Rasanya kalau tampilan blog hanya teks itu membosankan. Oleh lantaran itu perlu juga ada gambar atau foto di blog agar mata dapat betah dan tertarik untuk melihat blog kita. Baik gambar yang dipakai sebagai ilustrasi postingan atau gambar yang dijadikan banner dan dipasang di sidebar.
Gambar selain dapat menjadi hiasan dapat juga menjadi pendukung dari goresan pena kita. Blog sebagai salah satu media umum yaitu untuk menuangkan pandangan gres pikiran dan pengalaman dapat lebih menarik. Salah satunya dengan membuat efek-efek pada gambar yang ada di blog.
Dulu pernah kita pelajari cara menciptakan imbas mouseover. Sekarang kita akan mencar ilmu menciptakan zoom effect atau imbas perbesar. Kaprikornus ini yakni cara menciptakan imbas pada gambar yang disentuh oleh mouse otomatis akan zoom atau diperbesar. Untuk menciptakan zoom effect ini tidaklah sulit, eksklusif saja simak langkah-langkahnya.
Cara Membuat Zoom Effect pada Gambar di Blog
1. Login ke akun blogger.com
2. Pilih Template kemudian Edit HTML
3. Jangan lupa centang Expand Template Widget
4. Cari arahan ]]></b:skin> kemudian taruh arahan berikut ini di bawahnya:
5. Simpan Template kalau sudah selesai.
6. Untuk menerapkan Zoom Effect ini kita harus menambahkan tag class="ow" pada arahan HTML gambar, misalnya menyerupai ini:
Sumber https://www.kurniasepta.com/
Gambar selain dapat menjadi hiasan dapat juga menjadi pendukung dari goresan pena kita. Blog sebagai salah satu media umum yaitu untuk menuangkan pandangan gres pikiran dan pengalaman dapat lebih menarik. Salah satunya dengan membuat efek-efek pada gambar yang ada di blog.
Dulu pernah kita pelajari cara menciptakan imbas mouseover. Sekarang kita akan mencar ilmu menciptakan zoom effect atau imbas perbesar. Kaprikornus ini yakni cara menciptakan imbas pada gambar yang disentuh oleh mouse otomatis akan zoom atau diperbesar. Untuk menciptakan zoom effect ini tidaklah sulit, eksklusif saja simak langkah-langkahnya.
Cara Membuat Zoom Effect pada Gambar di Blog
1. Login ke akun blogger.com
2. Pilih Template kemudian Edit HTML
3. Jangan lupa centang Expand Template Widget
4. Cari arahan ]]></b:skin> kemudian taruh arahan berikut ini di bawahnya:
.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;
}
-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;
}
5. Simpan Template kalau sudah selesai.
6. Untuk menerapkan Zoom Effect ini kita harus menambahkan tag class="ow" pada arahan HTML gambar, misalnya menyerupai ini:
<a class="ow" href="http://twitter.com/kurniasepta" ><img border="0" height="177" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq-5ybGNew8h2bOIpaGSLjPtX8vW_3glZNAgyqVOOlOmVyVGUlhMSHslyvwTOmbRzpbpjfmtquVitjC50jy5lroYr1_B_kNGxumfRqPSGxGBnwKBlUO42ZrzCEWSFGJzoAbszj2-0Ekz4/s320/follow.jpg" width="284" /></a>
Sumber https://www.kurniasepta.com/