Masih ingat dengan tutorila cara menciptakan zoom effect yang juga ditulis di blog ini? Kali ini kita akan berguru menciptakan zoom effect yang lebih mudah. Zoom effect yaitu menciptakan dampak perbesar pada gambar yang tersentuh oleh cursor.
Jika dulu harus mengedit template untuk menciptakan zoom effect, yang ini tidak usah mengubah template. Karena isyarat CSS-nya digabung eksklusif dengan HTML isyarat gambar. Tentu ini selain mempermudah juga dapat menciptakan blog tidak banyak isyarat 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 isyarat 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/chipaz_anrhy" target="blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu_muRxzIymKhF-NG1nst9_YYnqaJ8efmv2eAiPrKcPZljTPBTRJ_7msTWpibmunT9jGKT8ioPGu66RE50cLMV9HmxXYd8PkZ6sUBIUNXcKY3L7g-WT12xSZTo-qfhK7VKx8E4z5mL_go/s320/follow.jpg" /></a>
Ganti isyarat yang berwarna merah dengan URL yang dituju dan URL gambar. Kamu dapat menambahkan isyarat 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.
0 comments:
Post a Comment