1. Adım: CSS Kodlarını Ekleme
Öncelikle galerinin tasarımı için bu kodları Blogger panelinizde Tema > Özelleştir > Gelişmiş > CSS Ekle kısmına veya yazınızın HTML Görünümü kısmında en üste yapıştırın.
/* Galeri Konteynırı */ .custom-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-gap: 10px; margin: 20px 0; } /* Galeri Görselleri */ .custom-gallery img { width: 100%; height: 200px; /* Sabit yükseklik, kare görünüm için */ object-fit: cover; /* Görseli bozmadan sığdırır */ border-radius: 8px; transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer; } /* Üzerine gelince efekt */ .custom-gallery img:hover { transform: scale(1.05); box-shadow: 0 5px 15px rgba(0,0,0,0.3); } /* Mobil uyum için ayar */ @media (max-width: 480px) { .custom-gallery { grid-template-columns: repeat(2, 1fr); } }
2. Adım: Yazı İçine HTML Kodlarını Ekleme
Yazınızı hazırlarken sol üstteki kalem simgesinden "HTML Görünümü"ne geçin ve görselleri sergilemek istediğiniz yere şu kod yapısını ekleyin:
<div class="custom-gallery">
<img src="GÖRSEL_URL_1" alt="Açıklama 1"> <img src="GÖRSEL_URL_2" alt="Açıklama 2"> <img src="GÖRSEL_URL_3" alt="Açıklama 3"> <img src="GÖRSEL_URL_4" alt="Açıklama 4"> <img src="GÖRSEL_URL_5" alt="Açıklama 5"> <img src="GÖRSEL_URL_6" alt="Açıklama 6"> </div>
Not: GÖRSEL_URL_X kısımlarına Blogger'a yüklediğiniz veya başka bir yerdeki resimlerin bağlantılarını yapıştırmayı unutmayın.
Neden Bu Yöntemi Kullanmalısınız?
- Hız: Harici JavaScript kütüphaneleri yüklemediği için sayfanız yavaşlamaz.
- Mobil Uyumluluk: Resimler ekran boyutuna göre (telefonda yan yana 2, masaüstünde 4 adet gibi) otomatik dizilir.
yazi,icinde,galeri