Membuat Gallery Foto Keren pada Sidebar dan Post Blogger

Gallery foto bisa membuat tampilan foto yang kita publish tampak lebih professional, bukan hanya itu gambar yang tampil pun lebih teratur dan mudah untuk dipantau.

Saat anda memuat sebuah gambar kedalam post, disana anda hanya boleh meletakan gambar disamping kiri, di tengah , dan kanan saja namun bagi sebagian orang hal ini diagap tidak memuaskan.Dan kali ini saya ingin membagikan sebuah tutorial untuk mengatasi ketidakpuasan anda, jika begitu silakan baca terus!

Walaupun begitu tidak semua blogger bisa melakukan ini, hal ini sangat dianjurkan untuk blog bertemakan fashion, kuliner ataupun menjual suatu produk, baik itu film, alat eletronik maupun game, tapi jika anda ingin sekedar coba-coba silakan.

Cara Membuat Gallery Foto

1. Login ke akun Blogger yang anda miliki kemudian pilih blog yang ingin dipasangkan gallery foto.
2. Pilih Posting > Entri baru (jika anda ingin memasangnya didalam post), pilih Tata Letak/Layout (jika anda ingin meletakan pada sidebar maupun footer).
3. Untuk memasang foto gallery didalam post, klik mode Edit HTML, bukan yang mode Compose. Kemudian copy paste script di bawah ini pada tempat yang Anda inginkan.
   <div class="snap_preview">
   <style type="text/css">.gallery{margin:auto;}.gallery-item{float:left; width:33%;} .gallery-caption { margin-left: 0; }</style> <br /><div class="gallery snap_nopreview">
   <dl class="gallery-item">
   <dt class="gallery-icon"><a href="Url Image anda" target="_blank">
   <img border="0" height="250" src="Url Image anda" width="200" /></a></dt></dl>
   <dl class="gallery-item">
   <dt class="gallery-icon"><a href="Url Image anda" target="_blank">
   <img border="0" height="250" src="Url Image anda" width="200" /></a></dt></dl>
   <dl class="gallery-item">
   <dt class="gallery-icon"><a href="Url Image anda" target="_blank">
   <img border="0" height="250" src="Url Image anda" width="200" /></a></dt></dl>
   <dl class="gallery-item">
   <dt class="gallery-icon"><a href="Url Image anda" target="_blank">
   <img border="0" height="250" src="Url Image anda" width="200" /></a></dt></dl>
   <dl class="gallery-item">
   <dt class="gallery-icon"><a href="Url Image anda" target="_blank">
   <img border="0" height="250" src="Url Image anda" width="200" /></a></dt></dl>
   <dl class="gallery-item">
   <dt class="gallery-icon"><a href="Url Image anda" target="_blank">
   <img border="0" height="250" src="Url Image anda" width="200" /></a></dt></dl>
   <dl class="gallery-item">
   <dt class="gallery-icon"><a href="Url Image anda" target="_blank">
   <img border="0" height="250" src="Url Image anda" width="200" /></a></dt></dl></div></div>
   Keterangan :

• Kode yang berwarna tebal silahkan anda ganti dengan Url gambar anda.
• Untuk merubah ukuran gambar anda silakan cari kode berwarna biru, untuk tinggi cari height="250", Untuk lebar cari width="200".
• Untuk menentukan berapa gambar yang tampil kearah samping sesuai kenginan anda, maka rubahlah angka berikut  ini sesuai jumlah gambar yang anda inginkan. Misalnya anda ingin menampilkna 4 gambar maka lakukan perhitungan berikut ini:
  100% : 4 = 25% maka nilai width: 33% tadi ganti menjadi width: 25%. 
• Apabila anda ingin menambahkan gambar lagi yang akan tampil kebawah, anda tinggal masukkan script di bawah ini, sebelum kode </div> </div> terakhir.
  <dl class="gallery-item"><dt class="gallery-icon"><a href="Url Image anda" target="_blank"><img border="0" height="250" src="Url Image anda" width="200" /></a></dt></dl>.
• Sekarang silahkan klik publish dan lihat hasilnya.

Saran: jika anda mengerti sedikit mengenai css, saya sarankan untuk menempatkan kode css dari script diatas, kedalam template anda agar proses loadingnya lebih cepat, dan jangan lupa juga untuk mengkompress “ukuran gambar”.

Semoga artikel ini dapat bermanfaat bagi anda dan terima kasih telah membaca artikel ini.