Cara Gampang Memunculkan Icon Zoom Pada Gambar Posting Blog
Wednesday, September 16, 2020
Edit
Anda niscaya pernah mengunjungi ke situs berkategori hiburan yang menampilkan banyak gambar dan disana niscaya akan melihat icon zoom setiap kali anda melaksanakan hover pada gambar dan foto yang ada di situs tersebut. Maka kali ini saya akan pertanda cara kepada anda menampilkan icon zoom pada setiap gambar di postingan blog secara otomatis.
Sedikit klarifikasi yang mungkin anda perlukan, bersama-sama saya hanya merubah nilai dari properti kursor yang tadinya auto/tampilan normal kemudian menggantinya dengan menampilkan icon zoom, yang saya lakukan hanyalah menambahkan deklarasi pada selektor CSS gambar dengan memberi properti nilai zoom-in.
Langkah-langkah :
1) Masuk ke akun blogger anda kemudian klik Template
2) Klik Back Up kemudian klik Edit Template
3) Cari instruksi ]]></b:skin> kemudian tempatkan instruksi dibawah ini sempurna diatasnya.
4) Klik Simpan Template
Sekarang coba anda lihat gambar pada satu posting blog kemudian lakukan hover pada gambar maka icon zoom akan muncul. Semoga bermanfaat. Enjoy & Happy coding.
Sedikit klarifikasi yang mungkin anda perlukan, bersama-sama saya hanya merubah nilai dari properti kursor yang tadinya auto/tampilan normal kemudian menggantinya dengan menampilkan icon zoom, yang saya lakukan hanyalah menambahkan deklarasi pada selektor CSS gambar dengan memberi properti nilai zoom-in.
Saya hanya akan merubah kursor/ menampilkan icon zoom pada gambar di postingan blog yang memiliki link atau gambar yang dapat dibuka pada fitur lightbox pada ketika pengunjung melaksanakan hover.
Demo
Langkah-langkah :
1) Masuk ke akun blogger anda kemudian klik Template
2) Klik Back Up kemudian klik Edit Template
3) Cari instruksi ]]></b:skin> kemudian tempatkan instruksi dibawah ini sempurna diatasnya.
Klik ganda untuk menyalin
.post a img:hover{cursor: -webkit-zoom-in ! important; cursor: -moz-zoom-in ! important;} 4) Klik Simpan Template
Sekarang coba anda lihat gambar pada satu posting blog kemudian lakukan hover pada gambar maka icon zoom akan muncul. Semoga bermanfaat. Enjoy & Happy coding.