Web sitelerinde kullanıcılar bir görsele tıkladığında o görselin tam ekran veya karartılmış bir arka plan üzerinde büyümesini bekler. Ancak Blogger'ın varsayılan resim albümü yapısı bazen yetersiz kalır veya sayfadan dışarı yönlendirerek kullanıcıyı kaçırabilir.
Bu rehberde, blogunuzdaki tüm yazı içi görselleri otomatik olarak algılayan ve tıklandığında kusursuz bir modal pencerede açan hafif bir sistem kuracağız.
1. Neden Harici Kütüphane Kullanmamalıyız?
Lightbox kütüphaneleri (örneğin Fancybox veya eski tür jQuery eklentileri) ek dosya boyutları nedeniyle sitenizi yavaşlatır. Saf JavaScript ile yazılmış bu çözüm sadece birkaç satırdır ve tarayıcıyı asla yormaz.
2. Adım Adım Kurulum Rehberi
Adım 1: CSS Stillerini Ekleme
Tema düzenleyicinizde (Tema > HTML'yi Düzenle) ]]></b:skin> kodundan hemen önceye veya <style> etiketleri arasına şu stil kodlarını ekleyin:
/* Lightbox Arka Plan ve Modal Tasarımı */
#blogger-lightbox-modal {
display: none;
position: fixed;
z-index: 99999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.85);
backdrop-filter: blur(5px);
justify-content: center;
align-items: center;
cursor: zoom-out;
}
#blogger-lightbox-modal img {
max-width: 90%;
max-height: 90%;
border-radius: 6px;
box-shadow: 0 5px 25px rgba(0,0,0,0.5);
animation: zoomIn 0.3s ease;
}
@keyframes zoomIn {
from { transform: scale(0.8); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
/* Yazı İçindeki Görsellere Büyüteç İmleci */
.post-body img {
cursor: zoom-in;
transition: opacity 0.2s ease;
}
.post-body img:hover {
opacity: 0.95;
}
Adım 2: HTML Yapısını Eklemek
Tema dosyanızda </body> etiketinden hemen önce, modal penceremizi ve tüm süreci yönetecek olan JavaScript kodunu yerleştirin:
<!-- Lightbox Modal Konteyneri -->
<div id="blogger-lightbox-modal">
<img id="lightbox-img" src="" alt="Önizleme">
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
// Modal elementini oluştur
const modal = document.getElementById("blogger-lightbox-modal");
const modalImg = document.getElementById("lightbox-img");
// Yazı gövdesindeki tüm görselleri seç (İsteğe göre seçiciyi güncelleyebilirsiniz)
const images = document.querySelectorAll(".post-body img");
images.forEach(img => {
img.addEventListener("click", function () {
modal.style.display = "flex";
// Eğer görselin yüksek çözünürlüklü hali varsa onu al, yoksa mevcut kaynağı kullan
modalImg.src = this.src;
});
});
// Modala veya resme tıklandığında kapat
modal.addEventListener("click", function () {
modal.style.display = "none";
});
});
</script>
3. SEO ve Kullanıcı Deneyimi Katkısı
Daha Uzun Oturum Süresi: Ziyaretçiler makale içerisindeki şemaları, ekran görüntülerini veya infografikleri detaylı inceleyebildiği için sitede geçirdikleri süre artar.
Temiz Kod Altyapısı: Harici hiçbir kütüphane çağrısı (CDN) barındırmadığı için Core Web Vitals performans skorlarınıza tamamen dosttur.blogger,otomatik,lightbox