Minggu, 15 November 2009

Membuat Galery Foto di Blogger




Sangat asyik ya jika kita dapat menampilkan foto-foto kita pada blog kita sendiri seperti layaknya sebuah halaman website.
Dalam ulasan ini Rudy ingin ngasih script buat nampilin foto-foto kita di blog. Sebelum membuat script ini, terlebih dahulu temen-temen mengupload foto-foto yang ingin ditampilkan untuk mengambil url nya. terserah deh mo upload dimna. contoh nya di Facebook, Flickr, google site. yang penting kita dapat url nya nanti.  url yang biasa diawali dengan 'http://' okay...



Udah Belom???

Terus, Paste kan kode dibawah ini di Postingan kamu...


<div class="snap_preview"><div><br /> <center><span style="color: #0066ff; font-size: medium;">Galery Foto</span></center><br /> </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><br /> <div class="gallery snap_nopreview"><br /> <dl class="gallery-item"><dt class="gallery-icon"><br /> <br /> <a href="http://farm4.static.flickr.com/3449/3774723292_0dcfb86c8c_m.jpg" target="_blank"><img border="0" height="96" src="http://farm4.static.flickr.com/3449/3774723292_0dcfb86c8c_m.jpg" width="128" /></a><br /> </dt> </dl>

<dl class="gallery-item"><dt class="gallery-icon"><br /> <br /> <a href="http://farm3.static.flickr.com/2592/3773920241_2be6c7f560_m.jpg" target="_blank"><img border="0" height="96" src="http://farm3.static.flickr.com/2592/3773920241_2be6c7f560_m.jpg" width="128" /></a><br /> </dt> </dl>

<dl class="gallery-item"><dt class="gallery-icon"><br /> <br /> <a href="http://farm4.static.flickr.com/3539/3774725714_4d8b23a512_m.jpg" target="_blank"><img border="0" height="96" src="http://farm4.static.flickr.com/3539/3774725714_4d8b23a512_m.jpg" width="128" /></a><br /> </dt> </dl><br /> <br />

<dl class="gallery-item"><dt class="gallery-icon"><br /> <br /> <a href="http://farm3.static.flickr.com/2485/3774720912_56ab18088c_m.jpg" target="_blank"><img border="0" height="96" src="http://farm3.static.flickr.com/2485/3774720912_56ab18088c_m.jpg" width="128" /></a><br /> </dt> </dl>

<dl class="gallery-item"><dt class="gallery-icon"><br /> <br /> <a href="http://farm3.static.flickr.com/2552/3773912965_224754805c_m.jpg" target="_blank"><img border="0" height="96" src="http://farm3.static.flickr.com/2552/3773912965_224754805c_m.jpg" width="128" /></a><br /> </dt> </dl>

<dl class="gallery-item"><dt class="gallery-icon"><br /> <br /> <a href="http://farm4.static.flickr.com/3515/3773912409_b69f126b20_m.jpg" target="_blank"><img border="0" height="96" src="http://farm4.static.flickr.com/3515/3773912409_b69f126b20_m.jpg" width="85" /></a><br /> </dt> </dl><br />

<dl class="gallery-item"><dt class="gallery-icon"><br /> <br /> <a href="http://photos-g.ak.fbcdn.net/hphotos-ak-snc1/hs258.snc1/10517_1141348490836_1141152651_30395383_2960806_n.jpg" target="_blank"><img border="0" height="96" src="http://photos-g.ak.fbcdn.net/hphotos-ak-snc1/hs258.snc1/10517_1141348490836_1141152651_30395383_2960806_n.jpg" width="128" /></a><br /> </dt> </dl><br />

<dl class="gallery-item"><dt class="gallery-icon"><br /> <br /> <a href="http://photos-f.ak.fbcdn.net/hphotos-ak-snc3/hs039.snc3/12659_1163722370169_1141152651_30447296_3859019_n.jpg" target="_blank"><img border="0" height="96" src="http://photos-f.ak.fbcdn.net/hphotos-ak-snc3/hs039.snc3/12659_1163722370169_1141152651_30447296_3859019_n.jpg" width="128" /></a><br /> </dt> </dl><br />

<dl class="gallery-item"><dt class="gallery-icon"><br /> <br /> <a href="http://photos-d.ak.fbcdn.net/hphotos-ak-snc3/hs039.snc3/12659_1163722410170_1141152651_30447297_7057012_n.jpg" target="_blank"><img border="0" height="96" src="http://photos-d.ak.fbcdn.net/hphotos-ak-snc3/hs039.snc3/12659_1163722410170_1141152651_30447297_7057012_n.jpg" width="128" /></a><br /> </dt> </dl><br /> </div></div>

Ops,, tapi jangan lupa ea, url nya diganti dengan url foto yang akan ditampilkan.
Kalo mo nambah Foto silahkan Copy mulai dari paragraf 2. Tapi Kode yang terakhir harus dimuat juga soalnya menutup tag kode yang petama. Kalo gak maka akan terjadi kesalahan.
trus ganti URL Foto nya. Url Foto nya pada bagian src='http://....jpg' dan href='http://....jpg'. yang berwarna merah. Nah, mulai dari http-nya sampai .jpg tu adalah url foto kamu. Jadi ganti saja dengan url  foto kamu. 
Tips: Buat mengetahui url foto dapat dilakukan dengan cara klik kanan pada foto kemudian pilih copy image location (untuk browser Mozilla .red) OK
Moga berhasil menampilkan foto. Have fun... Mau lihat contoh???? Inilah hasilnya.

Baca Artikel Menarik Lainnya:

8 komentar:

  1. untuk Wordpress bisa g' maz Rud?

    BalasHapus
  2. Naaah.. Ini yang q cari.. Makasih nih bang! =) Ntar d pke aah..

    BalasHapus
  3. Sama-sama, semoga membantu...

    BalasHapus
  4. makasih panduan nya mas, hasilnya lumayan buat ukuran pemula macem saya :D
    apalagi tanpa hosting. hehehe..

    www.altimapan.co.cc

    BalasHapus
  5. Sama-sama, saya juga masih belajar...

    BalasHapus
  6. sipppp thanks infonya bos

    BalasHapus

"Blog DOFOLLOW - Jadilah Orang pertama yang memberikan komentar. Budayakan Berkomentar setelah membaca". Berikan Komentar anda,. Komentar anda sangat berguna bagi perkembangan blog ini. Terima kasih.