Cara Membuat Gallery Photo di Blog

Cara Membuat Gallery Photo di Blog

Apakahkamu menginginkan Desaign gambar atau gallery photo yang rapi dan menarik untuk di pandang, tetapi tidak membutuhkan tempat yang banyak? Mungkin inilah Solusi yang kamu cari. Cara Membuat Gallery Photo di Blog, jika kamu tertarik kamu bisa gunakan cara berikut:

 Demo Lihat » Disini


Step

1. Siapkan Foto, upload ke (Postingan blog, picasa, atau photobucket, atau yang lainnya)
2. Copy Url Foto kamu
3.  Gantilah Url yang berwarna merah di bawah ini dengan kode Url foto kamu.

<div class="snap_preview">
<div>
<a href="http://bloggertrikz.blogspot.com/2011/09/miss-universe-2011-contestants-museum_9939.html" target="_blank"><b><span style="color: #0066ff; font-size: large;">Miss Universe 2011 - Contestants&nbsp; Museum Tour</span></b></a></div>
<style type="text/css">
.gallery{margin:auto;}.gallery-item{float:left; width:33%;} .gallery-caption { margin-left: 0; }
</style>
<div class="gallery snap_nopreview">


Gallery of Contestants Miss Universe 2011, Museum Tour :
Click Picture to Full
<dl class="gallery-item">
<dt class="gallery-icon"><a href="http://bloggertrikz.blogspot.com/2011/09/miss-universe-2011-contestants-museum_5540.html" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img border="0" height="133" src="http://1.bp.blogspot.com/-LEdQaEyI2R8/TmNkA8uF8gI/AAAAAAAAEVc/O_h8X8qFOmw/s1600/16.jpg" title="Miss Universe 2011 - Contestants - Museum Tour16" width="200" /> </a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href="http://bloggertrikz.blogspot.com/2011/09/miss-universe-2011-contestants-museum_1469.html" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img alt="Miss Universe 2011 - Contestants  Museum Tour" border="0" height="133" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH_HuAywjMPXKlkPFJL_IrTpT4RKKV4bthvMWA4FBRv2I5wbgYpwTQ4726s4U8obxBELsI4eezuCvDUeCcNAqeQtCtRhBAaGPba9WQW0Lx6jy0fDuq8lnPqpRQ9FUXW79gXIBXBK6v6KI/s200/17.jpg" title="Miss Universe 2011 - Contestants  Museum Tour" width="200" /></a> </dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href="http://bloggertrikz.blogspot.com/2011/09/miss-universe-2011-contestants-museum_2773.html" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img alt="Miss Universe 2011 - Contestants  Museum Tour" border="0" height="133" src="http://1.bp.blogspot.com/-yMah8Qm7VyI/TmNkheJH0JI/AAAAAAAAEVs/8zVKBgYapC8/s200/20.jpg" title="Miss Universe 2011 - Contestants  Museum Tour" width="200" /></a> </dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href="http://bloggertrikz.blogspot.com/2011/09/miss-universe-2011-contestants-museum_8316.html" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img alt="Miss Universe 2011 - Contestants  Museum Tour" border="0" height="133" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHTNIRmN1_MFWJQ6NpIhu_lJOvkVCmSNFVgZCWKBNzS5gH5PDzZa1Dtj44B8_npZFqBL39OdCM9EGl84pXyIXxDXX5EZZ29T_mkZrWKEnzJYxQcJD4CRXV3ItcDRW7PvJ7Y7MAVwzjlGA/s200/19.jpg" title="Miss Universe 2011 - Contestants  Museum Tour" width="200" /></a> </dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href="http://bloggertrikz.blogspot.com/2011/09/miss-universe-2011-contestants-museum_1219.html" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img alt="Miss Universe 2011 - Contestants  Museum Tour" border="0" height="133" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgACTNRvNzRF3TLI2iCed6bOAUIqeFgX1fXo-IlXVLV1kzSDCE3pn5DO62IhRuAF4wijUeuDlkycsjHKhFhTmYaQlFPdf7pbtxNteNhSDLzcoXtBEBDPxbiSf3ozu4ZCdDsyVhqeIMxyB0/s200/18.jpg" title="Miss Universe 2011 - Contestants  Museum Tour" width="200" /></a> </dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href="http://bloggertrikz.blogspot.com/2011/09/miss-universe-2011-contestants-museum_4726.html" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img alt="Miss Universe 2011 - Contestants  Museum Tour" border="0" height="133" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7KFhNd_p9_Gm7eQdFfYFofOpcIoq1Di4A_BBbSxEj38VC5aRVEDTScj8dpTbxwH4JuuXSmKCY6pkbMJGpHPoV-Y8q_V3xE1AVPW23Kq1jq8AcijrifEVISD-mMQoSGV3aL44k4wuaVko/s200/21.jpg" title="Miss Universe 2011 - Contestants  Museum Tour" width="200" /></a> </dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href="http://bloggertrikz.blogspot.com/2011/09/miss-universe-2011-contestants-museum_3985.html" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img alt="Miss Universe 2011 - Contestants  Museum Tour" border="0" height="133" src="http://3.bp.blogspot.com/-M496EQmEhRc/TmNkyzmN4LI/AAAAAAAAEV0/nSAFyKN8XKY/s200/22.jpg" title="Miss Universe 2011 - Contestants  Museum Tour" width="200" /></a> </dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href="http://bloggertrikz.blogspot.com/2011/09/miss-universe-2011-contestants-museum_3271.html" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img alt="Miss Universe 2011 - Contestants  Museum Tour" border="0" height="133" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHYnKLb5WXqf_PzF2GMrmOaJefBtYwN8lJ3sbf_NhzcJvsgZTf5aCoW7kAq7cHro0DaVd1DwSLgsALVJDimiuPPxJrIwgFAmKrAaVAt4PN1AWvwTbiQLpGBb_gfHvQpY6IuK-aLHjYg2Y/s200/23.jpg" title="Miss Universe 2011 - Contestants  Museum Tour" width="200" /></a> </dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href="http://bloggertrikz.blogspot.com/2011/09/miss-universe-2011-contestants-museum_5711.html" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img alt="Miss Universe 2011 - Contestants  Museum Tour" border="0" height="133" src="http://4.bp.blogspot.com/-_Hr-A2KJXQU/TmNlUzWKnYI/AAAAAAAAEWE/ju5h9_6GMKk/s200/26.jpg" title="Miss Universe 2011 - Contestants  Museum Tour" width="200" /></a> </dt>
</dl>
</div>
</div>

Cara Membuat Gallery Photo di Blog

Perhatian :

• Kode yang berwarna merah adalah url foto yang didapatkan dari hosting setelah foto diupload.

• Ukuran foto bisa diganti dengan merubah angka 150 dan 200.

• Angka 25% adalah prosentase untuk membuat foto berjajar menyamping 4 kolom (rumusnya: 100% dibagi 4 = 25%)

• Bila ingin menambah jumlah foto tinggal copy saja mulai kode <dl class="gallery-item"> sampai dengan kode </dl> demikian pula jika ingin menguranginya.

• Saat menuliskan kode harus benar-benar rapat, jangan menggunakan enter, bila masih terdapat ruang kosong maka fungsikanlah backspace untuk menghapusnya sehingga kode menjadi rapat.

Jika Sudah Selesai Save dan lihat Hasilnya.
Demo Lihat » Disini

Search: Cara Membuat Gallery Photo di Blog, Cara Membuat Gallery Foto di Blog, Cara Membuat Gallery Photo di Blogger, Cara Membuat Gallery Photo di Wordpress, Cara Membuat Gallery Photo di Blogspot, Cara Membuat Gallery Foto di Blogspot, Cara Membuat Gallery Foto