belajar dan berbagi

Auto zoom image blogger dengan CSS

Auto zoom image blogger dengan CSS. Auto zoom image dimaksud adalah, jika mouse kita arahkan diatas gambar, maka gambar secara otomatis akan membesar, dan jika mouse kita jauhkan dari gambar, maka gambar akan terlihat normal kembali.
Lalu bagaimana cara buat Auto zoom image blogger dengan CSS tersebut?
Berikut ini kita akan coba membuat Auto zoom image blogger dengan CSS
1. Login ke blogger.com lagi ya.....
2. Template > Edit html dan centang Expant Templat Widget
3. Temukan kode ]]></b:skin>
4. kopi Copy dan paste kode berikut ini diatasnya :
.hovergallery img{
-webkit-transform:scale(0.8);
-moz-transform:scale(0.8);
-o-transform:scale(0.8);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
opacity: 0.7;
margin: 0 10px 5px 0;
}

.hovergallery img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
opacity: 1;
}

5. Simpan template
6. cara diatas adalah cara memasukkan kodenya pada template blog, lalu cara memposting atau membuat atau mengaktifkan atau menfungsikan Autozoom ini adalah : saat kita memasukkan gambar pada posting diharuskan dengan menggunakan kode ini :


<a class="hovergallery" href="http://ikhsanu.blogspot.com/" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixiZxLwDoJNJ8EtPxmTsdl0XC1mInQQMyN3TBkWXneywfWe31V-OEzqJEYL2_ZodlISXQ6XSLEtx-VVBV0zL6QIqlxKULq6dm7ExcLpZK9Vj_DbhKyxzVfApWMyAWy3TxE25J4cmjZ6w/s912/bismillahirrahmanirrahim.png" /></a>

berikut contoh hasil Auto zoom image blogger dengan CSS



Labels: Blogger, Tips dan Trik, Tutorial

Thanks for reading Auto zoom image blogger dengan CSS. Please share...!

Back To Top