Tips Membuat Galeri Foto di Blog Bagi Blogger Pemula

 

Dalam mendesain Blog tentu kita ingin agar tampilan blog kita terlihat lebih menarik sehingga dapat menarik pengunjung ke blog yang kita publikasikan. Salah satu laman blog yang penting untuk di desain semenarik mungkin adalah laman galeri foto. Galeri foto yang menarik bukan berarti banyak embel-embel didalamnya tapi bagaimana tampilannya rapih dan menyenangkan untuk dipandang.
Saya belumlah "jago" dalam mendesain blog masih butuh banyak belajar.. tapi minimal saya bisa membagikan sedikit yang saya tahu dari apa yang telah saya lakukan ke pembaca blog yang budiman. saya akan mencoba sharing dengan langkah yang lebih dimengerti...Lets starting one by one. 

First step 

1. Siapkan foto yang akan anda masukkan ke dalam galeri 

1. kemudian  masuk (sign in) ke dashbor blog anda

1. Anda harus meng-Upload foto anda ke dalam blog anda sendiri untuk mendapatkan URL foto anda ingat cukup meng-Upload tanpa perlu di posting atau diterbitkan.

1. Untuk meng-upload foto anda klik Laman >Laman Baru >Laman Kosong. seperti gambar dibawah ini

Setelah tampilan laman kosong terbuka silahkan anda upload fotonya dengan cara klik insert image spt gambar dibawah ini




 sehingga akan muncul tampilan seperti dibawah,




Silahkan mulai meng-upload file foto anda. Pilih Upload > Pilih file. Tunggu sampai proses uploading selesai. Setelah anda selesai upload tutup laman tanpa perlu klik add selected. sekarang foto anda telah memiliki URL... siap untuk langkah selanjutnya. di next page.



Second step.

Selanjutnya kita akan melakukan sedikit perubahan pada template blog anda. ikuti langkahnya.

1. Klik Template > Edit HTML dan beri tanda centang pada Expand Template Widget.

1. Kemudian cari kode seperti ini

     ]]></b:skin>

1. supaya lebih mudah mencarinya tekan ctrl+F maka pada bagian bawah jendela browsing akan muncul kotak search copy paste code maka akan langsung terlihat code dimaksud 

1. kemudian copy code dibawah ini. copy code di bawah ini dan paste tepat diatas code tadi 

 /*--Hover--*/<br /> .post img {<br /> border-radius: 30px 0 30px 0;<br /> -moz-border-radius: 30px 0 30px 0;<br /> -webkit-border-radius: 30px 0 30px 0;<br /> -o-border-radius: 30px 0 30px 0;<br /> transition: all 0.5s;<br /> -moz-transition: all 0.5s;<br /> -webkit-transition: all 0.5s;<br /> -o-transition: all 0.5s;<br /> }<br /> .post img:hover {<br /> box-shadow: 1px 1px 10px 3px rgba(0,0,0,0.5);<br /> border-radius:0;<br /> -moz-border-radius:0;<br /> -webkit-border-radius:0;<br /> -o-border-radius:0;<br /> }






Jika telah selesai, simpan dan lanjutkan ke langkah terakhir yaitu membuat laman galeri foto anda

Last step

1. Buka laman > Laman baru> Laman Kosong dan isi judul halaman sesuai dengan keinginan anda misalnya MY PICTURE GALERY.

1. Selanjutnya pada halaman postingan pilih HTML bukan Compose, ingat HTML bukan Compose..!!

1. kemudian copy paste kode dibawah ini pada kolom postingan

 

 <div class="snap_preview"> <style type="text/css"> .gallery { margin: auto; } .gallery-item { float: left; margin-top: 10px; text-align: center; width: 33%; } .gallery img { border: 2px solid #cfcfcf; } .gallery-caption { margin-left: 0; } </style><br /> <br /> <br /> <div class="gallery snap_nopreview"> <br /> <dl class="gallery-item"> <dt class="gallery-icon"><br /> <a href="IMAGE URL 1" target="_blank"><img alt="alt anda" class="attachment-thumbnail" height="96" src="IMAGE URL 1" title=" title anda" width="128" /></a><br /> </dt> </dl> <dl class="gallery-item"> <dt class="gallery-icon"><br /> <a href="IMAGE URL 2" target="_blank"><img class="attachment-thumbnail" height="96" src="IMAGE URL 2" title="TITLE ANDA" width="128" /></a><br /> </dt> </dl> <dl class="gallery-item"> <dt class="gallery-icon"><br /> <a href="IMAGE URL 3" target="_blank"><img class="attachment-thumbnail" height="96" src="IMAGE URL 3" title="TITLE ANDA" width="127" /></a><br /> </dt> </dl> <br /> <br /> <dl class="gallery-item"> <dt class="gallery-icon"><br /> <a href="IMAGE URL 4" target="_blank"><img alt="Fs-Calm" class="attachment-thumbnail" height="96" src="IMAGE URL 4" title="Blog" width="127" /></a><br /> </dt> </dl> <dl class="gallery-item"> <dt class="gallery-icon"><br /> <a href="IMAGE URL 5" target="_blank"><img alt="Fs-Calm" class="attachment-thumbnail" height="96" src="IMAGE URL 5" title="Fs-Calm" width="128" /><br /> </dt> </dl> <dl class="gallery-item"> <dt class="gallery-icon"><br /> <a href="IMAGE URL 6" target="_blank"><img alt="Fs-Calm" class="attachment-thumbnail" height="96" src="IMAGE URL 6" title="Book" width="128" /></a><br /> </dt> </dl> <br /> <br /> <br style="clear: both;" /></div> </div>

Setelah kode dimasukkan selanjutnya anda tinggal mengganti tulisan IMAGE URL 1, Image URL 2 dst dengan url foto anda yang sudah anda Upload tadi satu persatu. anda juga bisa mengganti tulisan title anda dengan judul foto anda.
Cara untuk mengambil url foto ; masih di laman postingan HTML pilih Insert Image > From This Blog maka akan terlihat foto yang sudah anda upload. klik kanan di foto yang ingin anda masukkan kemudian pilih Copy Image Location tutup dan paste pada tulisan IMAGE URL 1 dan seterusnya.
jika telah selesai silahkan di simpan dan di publish... dan silahkan lihat hasilnya. Gampang kan?
Semoga Bermanfaat. Good Luck Friend!!

Script : disadur dari, 
http://harysukasuka.blogspot.com/2013/01/cara-membuat-galery-foto-di-blog-dengan.html
Maklumlah... masih harus banyak belajar.....hehehe