Cara Membuat Gallery Foto di Blogspot

· · 12 comments

Tips blog kali ini yang ingin saya share adalah cara membuat gallery foto di blog  blogspot. Cara membuat gallery foto di blogspot tentu sangat berbeda dengan membuat galllery foto di wordpress, kalau di wordpress sobat tinggal upload lewat plugin yang telah disediakan, tapi di blogspot sobat harus menggunakan script yang di edit lewat halaman postingan.Gallery foto ini berguna buat sobat yang ingin menampilkan foto-foto dalam postingan dengan bentuk sejajar. Seperti apa ilustrasi bentuknya ? Lihat contoh hasilnya dibawah ini :



 Cara membuat gallery foto :
  
    1. Upload foto ke hosting (picasa, atau photobucket, atau yang lainnya)
    dapatkan url foto yang telah diupload
    2. Bikin postingan dalam mode HTML (bukan Compose)
    3. Masukkan kode di bawah ini pada postingan
    4. Publish dan lihat hasilnya


<div class="snap_preview">
<div>
<span style="color: #0066ff;font-size: medium;">Seribu Wajah Gayus</span></div>
<style type="text/css">.gallery{margin:auto;}.gallery-item{float:left; width:25%;} .gallery-caption { margin-left: 0; }</style>
<div class="gallery snap_nopreview">

<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="http://3.bp.blogspot.com/_ebUnF7PUwY0/TTmq03TbcsI/AAAAAAAABWg/ZTsc00AH-6I/s320/atronout.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="http://4.bp.blogspot.com/_ebUnF7PUwY0/TTmq1sZABLI/AAAAAAAABWk/KK9O5p8NVzo/s320/bieeen.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="http://3.bp.blogspot.com/_ebUnF7PUwY0/TTmq2xB53VI/AAAAAAAABWo/ceTnYkgkKcY/s320/blankon.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="http://2.bp.blogspot.com/_ebUnF7PUwY0/TTmq328XwJI/AAAAAAAABWs/Z2MSG35Sf9c/s320/boxing.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="http://2.bp.blogspot.com/_ebUnF7PUwY0/TTmq5tXNkdI/AAAAAAAABWw/4_0qitLH-ns/s320/duits.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="http://4.bp.blogspot.com/_ebUnF7PUwY0/TTmq786_ExI/AAAAAAAABW0/8KDLQSY2ytk/s320/goyang.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="http://3.bp.blogspot.com/_ebUnF7PUwY0/TTmq83zwVMI/AAAAAAAABW4/ZjgI-nCQeqs/s320/hormat.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="http://1.bp.blogspot.com/_ebUnF7PUwY0/TTmq9vesD8I/AAAAAAAABW8/IcWcKhsg9DU/s320/jendr.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="http://4.bp.blogspot.com/_ebUnF7PUwY0/TTmq_72wtDI/AAAAAAAABXE/NcxhFzEB2a8/s320/koran.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="http://4.bp.blogspot.com/_ebUnF7PUwY0/TTmrA50W4ZI/AAAAAAAABXI/SX1YhthILJY/s320/samar.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="http://3.bp.blogspot.com/_ebUnF7PUwY0/TTmrCzoefoI/AAAAAAAABXM/Xmj-HhEVMLw/s320/seribu.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="http://3.bp.blogspot.com/_ebUnF7PUwY0/TTmrEGGpVbI/AAAAAAAABXQ/VEBkyJfvZyA/s320/silat.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="http://3.bp.blogspot.com/_ebUnF7PUwY0/TTmrFHQqMfI/AAAAAAAABXU/KKwUfuu1ND4/s320/wig1.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="http://2.bp.blogspot.com/_ebUnF7PUwY0/TTm2ybg2rgI/AAAAAAAABXY/YHAWLwQ1xB0/s320/tenis.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="http://3.bp.blogspot.com/_ebUnF7PUwY0/TTm20KFUhBI/AAAAAAAABXc/wF7TssNxmTs/s320/santai.jpg" width="200" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href=" http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html " target="_blank">
<img border="0" height="150" src="http://1.bp.blogspot.com/_ebUnF7PUwY0/TTmq-jrNZJI/AAAAAAAABXA/ZX5jgiSFSA4/s320/kacamata.jpg" width="200" /></a>
</dt>
</dl>
</div>
</div>

Catatan Penting :
  1. Kode yang berwarna merah adalah url foto yang didapatkan dari hosting setelah foto diupload.
  2. Ukuran foto bisa diganti dengan merubah angka 150 dan 200.
  3. Angka 25% adalah prosentase untuk membuat foto berjajar menyamping 4 kolom (rumusnya: 100% dibagi 4 = 25%)
  4. Bila ingin menambah jumlah foto tinggal copy saja mulai kode <dl class="gallery-item"> sampai dengan kode </dl> demikian pula jika ingin menguranginya.
  5. Dalam menuliskan kode harus benar-benar rapat, jangan menggunakan enter, bila masih terdapat ruang kosong maka fungsikanlah backspace untuk menghapusnya sehingga kode menjadi rapat.
Okey, cukup sekian tips blog kali ini cara membuat gallery foto di blogspot.
Semoga Bermanfaat.

12 comments:

  1. thanks gan...sangat membantu...
    www.sasirangan.net

    ReplyDelete
  2. oke gan ane praktekin dlu yaa ...

    Soalnya ane mau bikin album kenang2an ...

    salam nich blog ane ..
    mampir yaa gan ...

    http://srezky.blogspot.com

    ReplyDelete
  3. kok gue ga bisa ya gan???? tolong bantu dong...

    ReplyDelete
  4. bagus banget infonya, mau tsaya coba di blog saya.
    thx buat pencerahannya

    www.bnsholiday.com / www.jakartarentbus.com

    ReplyDelete
  5. terimakasih gan, kunjung balik ya. ! :D aQ masih newbie nih.

    ReplyDelete
  6. selamat malam gan, kunjungan perdana nih... jangan lupa kunjungan baliknya ya di lipuuhulondalo.blogspot.com/ jangan lupa juga follow - join this site blog saya ya, saya udah follow blognya agan ....

    ReplyDelete
  7. Ok gan,, ane mau kunbal tapi blog nya dah dhapus.. =))

    ReplyDelete
  8. mas itu galeri fotonya bisa dibuat g pake jarak antara foto 1 dengan yang lain :))

    ReplyDelete
  9. Mantap tutorialnya, trima kasih mas, jd tambah keren nih blognya

    ReplyDelete