Cara Membuat Gallery Foto di Blog

 







YahooGlee - Cara Membuat Gallery Foto di Blog
Sebelum membuat Album Foto, Sebaiknya anda Persiapkan Seluruh Foto-foto anda.
Kumpulkan Semua URL nya.


Bisa Dari Facebook, Google, atau Photobucket (Ingat : Ambil URL nya)
Belum tahu apa itu Url? Url contoh url nya seperti ini 

Contoh Url Gambar : http://1.bp.blogspot.com/-Au7Nt2l_waM/UA-A80TelkI/AAAAAAAAC3I/2ZzDOS7-tCk/s1600/untitled.bmp

Cara Dapetnya kaya gimana?
Contoh nih, kalian punya foto di Facebook, kemudian Klik kanan Foto itu dan Pilih : View Image

Kemudian Ambil deh itu Urlnya dibagian ini, Lihat Gambar dibawah ini.

Nah" Bagaimana? Sudah Faham atau Belum?

Setelah anda Kumpulkan Semua URL Gambar/Foto Anda, Sekarang masuk ke Akun Blogspot anda, dan Pilih Buat Entri Baru, Kemudian Pilih : Edit HTML.

Dan Masukkan Code Berikut ini :




<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 />
<div class="gallery snap_nopreview">
<dl class="gallery-item">
<dt class="gallery-icon">
<a href="URL GAMBAR/FOTO 1" target="_blank"><img alt="NAMA FOTO 1" class="attachment-thumbnail" height="96" src="
URL GAMBAR/FOTO 1" title=" NAMA FOTO 1" width="128" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon">
<a href="
URL GAMBAR/FOTO 2" target="_blank"><img class="attachment-thumbnail" height="96" src="URL GAMBAR/FOTO 2" title="NAMA FOTO 2" width="128" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon">
<a href="
URL GAMBAR/FOTO 3" target="_blank"><img class="attachment-thumbnail" height="96" src="URL GAMBAR/FOTO 3" title="NAMA FOTO 3" width="127" /></a>
</dt>
</dl>
<br />
<dl class="gallery-item">
<dt class="gallery-icon">
<a href="
URL GAMBAR/FOTO 4" target="_blank"><img alt="NAMA FOTO 4" class="attachment-thumbnail" height="96" src="URL GAMBAR/FOTO 4" title="NAMA FOTO 4" width="127" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon">
<a href="
URL GAMBAR/FOTO 5" target="_blank"><img alt="NAMA FOTO 5" class="attachment-thumbnail" height="96" src="URL GAMBAR/FOTO 5" title="NAMA FOTO 5" width="128" />
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon">
<a href="
URL GAMBAR/FOTO 6" target="_blank"><img alt="NAMA FOTO 6" class="attachment-thumbnail" height="96" src="URL GAMBAR/FOTO 6" title="NAMA FOTO 6" width="128" /></a>
</dt>
</dl>
<br />
<br style="clear: both;" /></div>
</div>

Keterangan :
Ganti Teks Berwarna Biru, dengan URL Foto atau Gambar anda.
Ganti Juga Teks Berwarna Merah dengan Title atau Nama Foto


Untuk Menambahkan Lagi Fotonya tinggal ditambahin saja Code yang Seperti ini :

<dl class="gallery-item">
<dt class="gallery-icon">
<a href="
URL GAMBAR/FOTO 5" target="_blank"><img alt="NAMA FOTO 5" class="attachment-thumbnail" height="96" src="URL GAMBAR/FOTO 5" title="NAMA FOTO 5" width="128" />
</dt>
</dl>

Contoh Setelah yang benar dalam Pemberian URL dan Nam Foto.



Contoh Code yang telah saya beri URL Gambar :

<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 />
<div class="gallery snap_nopreview">
<dl class="gallery-item">
<dt class="gallery-icon">
<a href="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-prn1/61940_104205046309174_2683515_n.jpg" target="_blank"><img alt="Zakaria dengan Teman" class="attachment-thumbnail" height="96" src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-prn1/61940_104205046309174_2683515_n.jpg" title=" Zakaria dengan Teman" width="128" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon">
<a href="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-prn1/63863_104204529642559_7613732_n.jpg" target="_blank"><img class="attachment-thumbnail" height="96" src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-prn1/63863_104204529642559_7613732_n.jpg" title="Zakaria Bin Saad" width="128" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon">
<a href="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-prn1/61056_104206936308985_5310500_n.jpg" target="_blank"><img class="attachment-thumbnail" height="96" src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-prn1/61056_104206936308985_5310500_n.jpg" title="Muhammad Zakaria" width="127" /></a>
</dt>
</dl>
<br />
<dl class="gallery-item">
<dt class="gallery-icon">
<a href="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc6/166799_133849290011416_2612432_n.jpg" target="_blank"><img alt="Zakaria" class="attachment-thumbnail" height="96" src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc6/166799_133849290011416_2612432_n.jpg" title="Zakaria" width="127" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon">
<a href="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-prn1/62518_104206429642369_4071194_n.jpg" target="_blank"><img alt="Muhammad" class="attachment-thumbnail" height="96" src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-prn1/62518_104206429642369_4071194_n.jpg" title="Muhammad" width="128" />
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon">
<a href="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/62518_104206439642368_3918734_n.jpg" target="_blank"><img alt="Jack Ganteng" class="attachment-thumbnail" height="96" src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/62518_104206439642368_3918734_n.jpg" title="Jack Ganteng" width="128" /></a>
</dt>
</dl>
<br />
<br style="clear: both;" /></div>
</div>


Contoh Hasil nya :



Nah mungkin itu saja...

Selamat Mencoba, Semoga Bermanfaat...

Ayo! Baca Juga Artikel Lainnya...!

Baca dan Pelajari juga yg ini!

3 comments...Leave one now

  1. Bang , Kok setelah di coba ada tulisan ,
    HTML Anda tidak bisa diterima: Tag tidak tertutup: A
    itu kenapa ya ?

    ReplyDelete
  2. Mungkin ada salah satu code yang tertinggal, coba sesuai yang telah saya arahkan diatas pasti berhasil.

    Selamat Mencoba, semoga sukses!

    ReplyDelete
  3. keren thanks tutorialnya gan...
    http://mdta-tanmiyatulhuda.blogspot.com

    ReplyDelete

© 2013. YahooGlee. Hak Cipta dilindungi Oleh Undang-undang.

DMCA.com Ping your blog, website, or RSS feed for Free