Followers

Posted by irga pasoepati under

Cara Membuat Gallery Foto di Blog

untitled 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.

untitled

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.
asdf

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...

0 komentar:

Ads 468x60px

Movie Category 5

Movie Category 4

Featured Posts

Social Icons

Recent Posts

Read more: http://tutorialblog45.blogspot.com/2012/08/cara-membuat-efek-berputar-mengikuti.html#ixzz2CH02mubb

Unordered List

Berita Luar Negeri

Download

Recent Post

Night Diamond Bloody Red - Precision Select
Diberdayakan oleh Blogger.

Translate

Google

Social Icons

Popular Posts

Search This Blog

Memuat...