Cara Membuat Galery Foto Di Blog Dengan Efek Ketupat

Sobat semuanya pasti ingin kalau memposting gambar atau foto tapi yang ber aturan alias tidak berantakan?Nah ini dia script untuk membuat galerry foto di blog sobat,nanti nya selain foto di blog sobat rapih,semua foto di blog akan berubah secara otomatis menjadi bentuk ketupat,bukan kotak seperti biasanya.

 Caranya sobat bisa ikuti langkah berikut ini;

1. Silahkan copy code di bawah ini
2. Buka Rancangan Template Blog sobat,jangan lupa centang expand widget  kemudian letakan kode tersebut tepat diatas kode ]]></b:skin>
3. Simpan template.

 /*--Hover--*/
.post img {
    border-radius: 30px 0 30px 0;
    -moz-border-radius: 30px 0 30px 0;
    -webkit-border-radius: 30px 0 30px 0;
    -o-border-radius: 30px 0 30px 0;
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
}
.post img:hover {
    box-shadow: 1px 1px 10px 3px rgba(0,0,0,0.5);
    border-radius:0;
    -moz-border-radius:0;
    -webkit-border-radius:0;
    -o-border-radius:0;
}

 Berikutnya adalah tahap pembuatan galery nya di postingan .

• Tahap Pertama yang Harus Dilakukan adalah Mengupload terlebih dahulu Foto yang ingin anda tampilkan didalam Gallery tersebut, Foto ini bisa di Upload ke Image Hosting seperti photobucket dll atau juga di Upload di Akun Blogger sobat. Saya Anggap anda sudah mengerti tentang hal ini.( baca juga; Cara Mengambil URL Gambar Di Photobucket )
• Buat Sebuah Postingan, Beri Judul misal GALERY KU .Kemudian Pada Halaman Postingan tersebut Pilih Metode HTML bukan COMPOSE.
• Copy Kode 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="IMAGE URL 1" target="_blank"><img alt="alt anda" class="attachment-thumbnail" height="96" src="IMAGE URL 1" title=" title anda" width="128" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon">
<a href="IMAGE URL 2" target="_blank"><img class="attachment-thumbnail" height="96" src="IMAGE URL 2" title="TITLE ANDA" width="128" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon">
<a href="IMAGE URL 3" target="_blank"><img class="attachment-thumbnail" height="96" src="IMAGE URL 3" title="TITLE ANDA" width="127" /></a>
</dt>
</dl>
<br />
<dl class="gallery-item">
<dt class="gallery-icon">
<a href="IMAGE URL 4" target="_blank"><img alt="Fs-Calm" class="attachment-thumbnail" height="96" src="IMAGE URL 4" title="Blog" width="127" /></a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon">
<a href="IMAGE URL 5" target="_blank"><img alt="Fs-Calm" class="attachment-thumbnail" height="96" src="IMAGE URL 5" title="Fs-Calm" width="128" />
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon">
<a href="IMAGE URL 6" target="_blank"><img alt="Fs-Calm" class="attachment-thumbnail" height="96" src="IMAGE URL 6" title="Book" width="128" /></a>
</dt>
</dl>
<br />
<br style="clear: both;" /></div>
</div>

•  kemudian pastekan pada Postingan anda, INGAT dalam bentuk HTML
•  Silahkan Ganti Tulisan URL IMAGE ANDA dengan Url Foto yang telah sobat Upload tadi
• Silahkan terbitkan dan selesai.

Selamat mencoba