YahooGlee - Cara Membuat Gallery Foto di Blog
Sebelum membuat Album Foto, Sebaiknya anda Persiapkan Seluruh Foto-foto anda.
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 :
<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>
Nah mungkin itu saja...
Selamat Mencoba, Semoga Bermanfaat...
Ayo! Baca Juga Artikel Lainnya...!
Ayo! Baca Juga Artikel Lainnya...!
Penulis : Muhammad Zakaria bin Saad
Bang , Kok setelah di coba ada tulisan ,
ReplyDeleteHTML Anda tidak bisa diterima: Tag tidak tertutup: A
itu kenapa ya ?
Mungkin ada salah satu code yang tertinggal, coba sesuai yang telah saya arahkan diatas pasti berhasil.
ReplyDeleteSelamat Mencoba, semoga sukses!
keren thanks tutorialnya gan...
ReplyDeletehttp://mdta-tanmiyatulhuda.blogspot.com