Tips!
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.
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 : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMCf7dEwDDoRwCeW9hzCr7ToGYol-gezLWp4T0PY8TMev9ilpuwXWLYnRjH_4zPMcw9br6H31u3-UjIBj37gqZ7qrNBq8AX8EJw_ir-KyrhtNxPh7DIUVIDhrE-MnXwDjnNqsEWXGg97s/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...



Copyright © 2011-2013 Ilmu Komputer 95. Hak cipta dilindungi Oleh Undang-undang.

Diposting oleh Tabugan Keluarga Sawah on Selasa, 24 Juli 2012
categories: edit post

0 komentar

Posting Komentar

Blog Archive

Ikuti Kami Juga Disini!

Informasi Situs