Header Ads Widget

Ebook GRATIS Bisnis Online dari Nol - Banner Post Ads Uka Fahrurosid

Latest

6/recent/ticker-posts

Cara Membuat Tampilan Gallery Foto Unik di Blogspot

Bingung ingin membuat tampilan gallery foto unik di blogspot dengan ukuran kecil yang ditata rapi seperti dibawah ini???


Mau tau cara membuatnya?
Berikut instruksi dalam pembuatannya (copy paste kode berikut dibawah ini):


<div class='snap_preview'><div><center><font color="#0066FF" size="4">Cara Membuat Tampilan Gallery Foto Unik di Blogspot</font></center></div>
<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>
<div class='gallery snap_nopreview'><dl class='gallery-item'>
<dt class='gallery-icon'>
<img src="http://i109.photobucket.com/albums/n54/blue_generation04/Beamahakarya/IMG_0630.jpg" width="128" height="96" class="attachment-thumbnail" >
</dt></dl><dl class='gallery-item'>
<dt class='gallery-icon'>
<img src="http://i109.photobucket.com/albums/n54/blue_generation04/Beamahakarya/IMG_0631.jpg" width="128" height="96" class="attachment-thumbnail">
</dt></dl><dl class='gallery-item'>
<dt class='gallery-icon'>
<img src="http://i109.photobucket.com/albums/n54/blue_generation04/Beamahakarya/IMG_0642.jpg" width="127" height="96" class="attachment-thumbnail">
</dt></dl><br style="clear: both" /><dl class='gallery-item'>
<dt class='gallery-icon'>
<img src="http://i109.photobucket.com/albums/n54/blue_generation04/Beamahakarya/IMG_0672.jpg" width="127" height="96" class="attachment-thumbnail">
</dt></dl><dl class='gallery-item'>
<dt class='gallery-icon'>
<img src="http://i109.photobucket.com/albums/n54/blue_generation04/Beamahakarya/IMG_0673.jpg" width="128" height="96" class="attachment-thumbnail">
</dt></dl><dl class='gallery-item'>
<dt class='gallery-icon'>
<img src="http://i109.photobucket.com/albums/n54/blue_generation04/Beamahakarya/IMG_0674.jpg" width="128" height="96" class="attachment-thumbnail">
</dt></dl><br style="clear: both" />
<br style='clear: both'/>
</div>
</div>

(stop!! copy paste sampai disini)

Tugas Anda berikutnya,
Bila hanya ingin mengganti tampilan foto saja, Anda bisa rubah alamat gambar yang berwarna merah dengan alamat gambar yang Anda inginkan.

Namun Anda juga dapat mengotak-atiknya, bila sudah mengetahui/mempelajari bahasa HTML.

Mudah-mudahan bermanfaat,
Bagaimana menurut Anda??

Semoga Bermanfaat!

Miliki ebook GRATIS yang akan bantu kamu cuan dari dunia digital.

Dapatkan di Sini!

Follow @ukafahrurosid

Post a Comment

20 Comments

  1. Anonymous6:19 AM

    udah sy baca ka..
    makasih ya..
    maaf jg nagih2 trus.. hehehe...

    ReplyDelete
  2. Thnkz Gan ,,,
    Visit back please ,,
    www.deevro.co.cc ,,
    thnkZ ,,

    ReplyDelete
  3. wah terima kasih, pak. atas tutorialnya :)

    ReplyDelete
  4. wah ini dia gan yang aku cari...tapi gmana buat zoom nya...?

    ReplyDelete
  5. punya saya kox gax rapi ya...apa ada ksalahan di kodenya...?

    ReplyDelete
  6. makasih pak de, walaupun awalnya susah tuk menyesuaikan ukuran gambar tapi sekarang udah bisa. trus saya + title ma gambar aku jadikan link.

    ReplyDelete
  7. WAH AKU MSH BLUM NGERTI

    ReplyDelete
  8. Muanteeeeeeeeeeptepteptep..Mas Uka!!
    http://www.alandiny.tk/2011/10/gallery-album-foto-alandiny.html

    ReplyDelete
  9. dicoba,tanks gan

    ReplyDelete
  10. siip, pateen.......

    ReplyDelete
  11. nitip tukar link http://www.jubersradio.com/

    ReplyDelete
  12. KEREN
    NGE BANTU BANGET
    THANKS YA
    SEKALIAN KUNJUNGI BLOG SAYA
    http://fashiondar.blogspot.com/

    ReplyDelete
  13. simple sob, ane coba dulu deh.. ntar kalo makin belepotan ngadu dimari lagi.. hehehe.. salam kenal..

    ReplyDelete
  14. Anonymous12:49 PM

    makasi mas informasinya, saya lihat demo nya kok ga bisa di klik ya?
    gimana cara agar photo kalau di klik jadi pop up windows?
    Thanks

    ReplyDelete
  15. thx mas
    http://duniagame7.blogspot.com/

    ReplyDelete
  16. Anonymous9:45 PM

    kalo judul nya membuat gallery foto simpel di blogspot lebih tepat mas daripada unik, tapi sekedar saran aja kok mas

    ReplyDelete
  17. Trima kasih atas sarannya..

    ReplyDelete

Banner Ads 728x90