Cara Mudah Membuat Gallery Photo di Blogspot

! Bakalan-Tlogorejo-City  -Assalamualaikum ... Salam sejahtera untuk sahabat semuanya,,,Kali ini saya akan berbagi cara,Yaitu Bagaimana Cara Mudah Membuat Gallery Photo di Blog>>Cara Mudah Membuat Gallery Photo di Blog>>Cara Mudah Membuat Gallery Photo di Blog ,,, Dengan MenDesaign gambar atau gallery photo yang rapi dan menarik untuk di pandang, tetapi tidak membutuhkan tempat yang banyak? Mungkin inilah Solusi yang Sahabat Blogger cari. Cara Mudah Membuat Gallery Photo di Blog, jika Sahabat tertarik Sahabat bisa Mengikuti cara berikut: 

1. Siapkan Foto, upload ke (Postingan blog, picasa, atau photobucket, atau yang lainnya)
2. Copy Url Foto kamu
3. Buatlah  postingan dalam mode HTML (bukan Compose) 

 

 4. 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/AVvXsEi1DDEqqv60urKzPj5YoyzyXg25pe0RmqPFjwtBoieVKz_56-e8WU1HQTQ-yLoUtqH-lC0y3I1ZzZ79n8JhLaDnzK-jsYBTlEizS-9NETq8a0fMdBPKpGSuGl9YdjYz99gLJb_ew01bdog/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/AVvXsEiDtdzoPJ5JSdnUt_CfrD5Pvo28HL1DXZCAFe0E8QkjGjRt0bS3msh4XsFmKFZmKa3OSKP3cgMInBM3JVatyLkFT2dNgW85htUdT1uzWntE8agJID1tlr93jWAr1qSV-eKPVrV6-IPV5Tc/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/AVvXsEhHeiQ7AzA5BdUWczz_QP3PShc1BztH8-_GxLnZDXdwnXf7gfHngWp1wttRd-p3vGtXJocgPiKdnEZcLhsaj-itWvDQATAt2CflZh98u_I2eJ9AfzGyGCk8D03rMGV06JyFNed0HoPVoPQ/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/AVvXsEgUvJF6jUZClypKac03HLssrPL_mPFuS2wPvYAVJQ4KrdNxwyLRBnA5P1ZppcWvibmm6cOEfnVxE06CKrm8JYiekFzEregw4N9sTLfnrmknaDAKko6Jd33JKlCX_0FfnQyryfxC7CAALIE/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/AVvXsEixvdth7EsVBATo5ONxvHmADE-r7f_mQtVwCqW8soQZvV8BC5ysPkQem2bp4YZMgfNiSqC-6ALvNxMiRmT_fqqUU7lEN6vkcFqtzBQKHjRopEIwvBTNbz6QJgsqt0g7DvcePu5KWd_OTrs/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>

Kode Script di atas adalah Code>>Cara Mudah Membuat Gallery Photo di Blog>>Cara Mudah Membuat Gallery Photo di Blog>>Cara Mudah Membuat Gallery Photo di Blog>>Cara Mudah 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.