Blogger'a Resim Üzerine Gelince Hover Efekti Nasıl Eklenir?

Blogger sitenize resimlerin üzerine gelindiğinde (hover efekti) modern ve şık bir görünüm kazandırmak, ziyaretçilerinizin kullanıcı deneyimini fazlasıyla artıracaktır. Bu efekti, sitenizin kod yapısını bozmadan, tamamen CSS kullanarak en güvenli ve temiz şekilde nasıl ekleyeceğinizi adım adım anlattım.

Aşağıdaki yöntem, resme hafif bir yakınlaşma (zoom) ve yumuşak bir parlama/gölge efekti vererek web tasarım trendlerine (minimalist ve modern çizgilere) uyum sağlar.

Adım 1: Blogger Paneline Giriş Yapın

Blogger hesabınızda oturum açın.
Sol menüde bulunan Tema sekmesine tıklayın.
Önünüze gelen ekranda Özelleştir butonunun yanındaki aşağı ok (▼) simgesine tıklayarak HTML'i Düzenle seçeneğini seçin.

Adım 2: CSS Kod Alanını Bulun

Kod editörünün içerisine bir kez tıklayın ve CTRL + F kombinasyonunu kullanarak arama çubuğunu açın.
Arama çubuğuna </style> veya ]]</b:skin> yazarak Enter tuşuna basın. Bu etiketler, sitenizin stil kodlarının bittiği yeri gösterir.

Adım 3: Hover Efekti Kodlarını Ekleyin

Bulduğunuz </style> veya ]]</b:skin> satırının hemen üzerine aşağıdaki CSS kodlarını tamamen kopyalayarak yapıştırın:

/* Blogger Resim Hover Efekti */
.post-body img {
transition: transform 0.4s ease, box-shadow 0.4s ease;
transform: scale(1);
}

.post-body img:hover {
transform: scale(1.03);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

Not: .post-body img sınıfı, bu efektin yalnızca yazılarınızın içerisindeki resimlerde aktif olmasını sağlar. Böylece sitenizin logo veya diğer tasarım elementleri bu durumdan etkilenmez. transform: scale(1.03); değeri resmin %3 oranında yumuşakça büyümesini sağlar.

Adım 4: Değişiklikleri Kaydedin

Kodları ekledikten sonra sağ üst köşede bulunan Kaydet (Disket) simgesine tıklayarak temanızı güncelleyin. Blogunuzdaki herhangi bir yazıya girip görselin üzerine geldiğinizde efektin pürüzsüz bir şekilde çalıştığını görebilirsiniz.

Blogger, Hover Efekti, CSS Görsel