22 January 2011

Cara Membuat Gallery Foto pada Blogger

Karena kodenya panjang sekali maka langsung saja kita mulai membuat gallery foto pada blogger.  Dalam hal ini kita mempergunakan 16 buah foto.
Cara pembuatan :
  1. upload foto ke hosting (picasa, atau photobucket, atau yang lainnya)
  2. dapatkan url foto yang telah diupload
  3. bikin postingan dalam mode HTML (bukan Compose)
  4. masukkan kode di bawah ini pada postingan
  5. publish dan lihat hasilnya

membuat-galery-foto-blogspot

<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.
  6. Kalau semuanya sudah dilakukan dengan benar, hasilnya bisa dilihat  disini.

17 comments:

  1. thanks,, perfect banget tutorialnya!!

    ReplyDelete
  2. Apakah bisa jika tulisan yang berwarna merah diganti dengan alamat link url posting blogspot yang ada foto nya ? sehingga jika di klik foto tersebut akan menuju pada postingan blogspot kembali ?

    ReplyDelete
  3. @Pelukis Cahaya, Jika ingin menambahkan link posting blogspot maka yang diganti bukan yang berwarna merah, tapi http://brugkembar.blogspot.com/2011/01/cara-membuat-gallery-foto-pada-blogger.html diganti dengan link posting milik anda.

    ReplyDelete
  4. kalo mau ngasih caption ke tiap fotonya gmn gan? jadi ada keterangannya nama foto itu apa, gitu. caranya gmn ya?

    ReplyDelete
  5. @Warna Rupa, tinggal ditulis saja keterangannya sebelum tag </dt>

    ReplyDelete
  6. Thanks banyak mas...bermanfaat sekali nih ilmunya

    ReplyDelete
  7. Ok mkasih gan infonya.

    ReplyDelete
  8. klo untuk buat home,profil,contack, daftar isi, itu gimana mas??

    ReplyDelete
  9. makasih gan atas inponya

    ReplyDelete
  10. kok hasilnya nempel gambarnya? kalo mau dibikin renggang pake spasi antara satu foto sama lainnya caranya gimana? thanks

    ReplyDelete
  11. @Ugit Rifai , bisa disebabkan dua hal :
    1. fotonya kegede-an, harus diperkecil ukurannya
    2. lebar halaman posting terlalu sempit, harus dilebarkan.

    ReplyDelete
  12. suwun,melu maca nyoba pan tk praktekna ah....!heheh

    ReplyDelete
  13. byk bged gan,,,ada yg lbih simple ngg'

    ReplyDelete
  14. TERIMAKASIH TUTORIALNYA....bermanfaat banget buat saya.
    konveksiaqiela.blogspot.com

    ReplyDelete

Note: Only a member of this blog may post a comment.