Image Zoom Effect Pada Postingan

Bismillaah, para pembaca yang semoga dirahmati Allaah Ta'ala pada kesempatan kali ini saya akan membahas tentang Image Zoom Effect. Memang, ada sebagian Blogger ada yang sudah tahu. Namun, kali ini agak berbeda, karena script ini hanya sekali pakai dan simpan tanpa menulis lagi dipostingan. Ok, daripada pusing-pusing lebih baik kita lihat Live Demo-nya :

Sudah lihat kan ?? Namun bagaimana caranya ?? Gampang, ikuti Tutorial Simple dibawah ini.

1. Login ke Blogger 

2.Pilih Rancangan, lalu pilih Edit HTML. Sebelum memasukkan kodenya centang dulu Expand Template Widget, takutnya ada kesalahan [ Ada kesalahan saya tidak tanggung, maaf sekali ]

3. Lalu cari ]]></b:skin> dan copy-paste kan kode dibawah ini sebelum kode

]]></b:skin>

post img, table.tr-caption-container {

border:none;
max-width:560px;
height:auto;
-o-transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.post img:hover {
-o-transition: all 0.3s;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
-webkit-transform: scale(1.5);
-webkit-border-radius: 36px 12px;
-moz-border-radius: 36px / 12px;
-webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6);
}

Nah, bagaimana, mudah-kan ?? 

Mohon maaf apabila ada kesalahan.

Wallaahu'alam bisshawwab.

Disusun oleh :

Abdul Aziz, seorang pelajar di sebuah SMP sekuler. Dan seorang penuntut 'ilmu Islam. Follow me on Twitter @slfslf

Disusun pada : 17 Ramadhan 1432 H / 17 Agustus 2011 M (17.40)

Posted in: IT,JavaScript