Ikhsanudin Ikhsanudin Author
Title: Auto zoom image blogger dengan CSS
Author: Ikhsanudin
Rating 5 of 5 Des:
Auto zoom image blogger dengan CSS. Auto zoom image dimaksud adalah, jika mouse kita arahkan diatas gambar, maka gambar secara otomatis akan...
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://lh5.googleusercontent.com/-6oL9JN-J6ms/UPHq2owJhsI/AAAAAAAAAB8/d4aObtJ6WRo/s912/bismillahirrahmanirrahim.png" /></a>

berikut contoh hasil Auto zoom image blogger dengan CSS



About Author

Advertisement

 
Top