Cara Membuat Gallery Foto di Blog
Berikut ini saya Berikan Tips membuat Galery Foto atau Album Foto di Blog...
IlmuKomputer95.com- Bismillah"
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 : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy3TnkpoBKdOtgehcbi61WzTnfpj8ek3Kfdx4AM447-1lS83LlepOdpow-G9Ud71U1g2q366k96CVQbSUvemeNEGl9NKzwm809bQ35Yt78sR1FKyu_6DlaPA6gkXj6d8exVSQUtZbswK4/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>
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...
0 komentar: