Jika dulu harus mengedit template untuk menciptakan zoom effect, yang ini tidak usah mengubah template. Karena instruksi CSS-nya digabung eksklusif dengan HTML instruksi gambar. Tentu ini selain mempermudah juga dapat menciptakan blog tidak banyak instruksi CSS atau menciptakan blog tidak berat, sehingga loading blog tidak lemot.
Zoom effect yang menciptakan gambar jadi lebih besar ini dapat dipasang di post atau sidebar blog. Saat punya banner gambar di sidebar dapat menunjukkan dampak zoom ini. Bisa jadi pilihan menciptakan tampilan gambar banner atau foto jadi lebih menarik, selain menggunakan mouseover. Berikut yaitu instruksi untuk menciptakan effect zoom;
<style type="text/css">
.ow 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;
}
.ow img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
opacity: 1;
}
</style>
<a class="ow" href="http://twitter.com/kurniasepta" target="blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq-5ybGNew8h2bOIpaGSLjPtX8vW_3glZNAgyqVOOlOmVyVGUlhMSHslyvwTOmbRzpbpjfmtquVitjC50jy5lroYr1_B_kNGxumfRqPSGxGBnwKBlUO42ZrzCEWSFGJzoAbszj2-0Ekz4/s320/follow.jpg" /></a>
.ow 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;
}
.ow img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
opacity: 1;
}
</style>
<a class="ow" href="http://twitter.com/kurniasepta" target="blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq-5ybGNew8h2bOIpaGSLjPtX8vW_3glZNAgyqVOOlOmVyVGUlhMSHslyvwTOmbRzpbpjfmtquVitjC50jy5lroYr1_B_kNGxumfRqPSGxGBnwKBlUO42ZrzCEWSFGJzoAbszj2-0Ekz4/s320/follow.jpg" /></a>
Ganti instruksi yang berwarna merah dengan URL yang dituju dan URL gambar. Kamu dapat menambahkan instruksi diatas di post dengan menentukan HTML ketika menulisnya. Atau juga dapat ditambahkan di sidebar dengan memanfaatkan gadget HTML/Java Script di blogger. Hasilnya akan ibarat ini:
Bagaimana? Mudahkan? gambar, banner atau foto akan terlihat jadi lebih menarik. Akan menciptakan pengunjung tertarik untuk melihat dan mengklik.
Sumber https://www.kurniasepta.com/
