Cara Menambahkan Efek Zoom Dengan Efek Bayangan

Efek Zoom Dan Bayangan ini Efek Zoom yang kedua yang telah saya buat setelah saya menuliskan posting Cara Menambahkan Efek Zoom Dan Berputar. Efek Ini Juga Lebih Stylish Dari Pada Efek Sebelumnya. Efek Ini Dilengkapi Dengan Efek Zoom, Dan Efek Bayangan yang muncul bila kursor diarahkan pada gambar. Efek ini juga ukurannya tidak terlalu besar. Efek ini dibuat dengan menggunakan CSS3. Dengan Menambahkan Efek ini Blog Anda Terlihat Lebih Bergerak, Dan Lebih Menarik untuk dilihat. Efek ini perlu banyak Cara, hanya dengan menambahkan Kode CSS3 pada Template anda, otomatis akan terpasang pada setiap Gambar yang ada pada posting, Dan tidak perlu untuk menambahkan HTML Pihak Kedua atau Menambahkan HTML pada Posting. Untuk Cara Menambahkan Efek ini, Ikuti Cara Berikut ini:

• Silahkan Login Ke Blogger Anda.
• Setelah itu, Klik Menu Template, --> Klik Tombol Edit HTML.
• Lalu, Cari Kode ]]></b:skin> dengan menekan CTRL+F atau dengan F3.
• Masukan Kode berikut ini diatas kode ]]></b:skin> :

.post img{
-webkit-transform:scale(0.7); /*Webkit 0.7 times the original Image size*/
-moz-transform:scale(0.7); /*Mozilla 0.7 times the original Image size*/
-o-transform:scale(0.7); /*Opera 0.7 times the original Image size*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla Animation duration*/
-o-transition-duration: 0.5s; /*Opera Animation duration*/
opacity: 0.5;
margin: 0 10px 5px 0;
}
.post img:hover{
-webkit-transform:scale(1.1); /*Webkit: 0.5 times the original Image size*/
-moz-transform:scale(1.1); /*Mozilla 0.5 times the original Image size*/
-o-transform:scale(1.1); /*Opera 0.5 times the original Image size*/
box-shadow:0px 0px 30px gray;
-webkit-box-shadow:0px 0px 30px gray;
-moz-box-shadow:0px 0px 30px gray;
opacity: 1;
}

• Setelah itu, Klik Tombol Simpan Template.

Selamat Mencoba,

Salam Sukses,

Your-BelajarBLOG