Advertisements
Advertisements
Anda pasti pernah mengunjungi ke situs berkategori hiburan yang menampilkan banyak gambar dan disana pasti akan melihat icon zoom setiap kali anda melakukan hover pada gambar dan foto yang ada di situs tersebut. Maka kali ini saya akan menunjukan cara kepada anda menampilkan icon zoom pada setiap gambar di postingan blog secara otomatis.
Sedikit penjelasan yang mungkin anda perlukan, sebenarnya saya hanya merubah nilai dari properti kursor yang tadinya auto/tampilan normal lalu 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 lalu klik Template
2) Klik Back Up lalu klik Edit Template
3) Cari kode ]]></b:skin> lalu tempatkan kode dibawah ini tepat diatasnya.
4) Klik Simpan Template
Sekarang coba anda lihat gambar pada satu posting blog lalu lakukan hover pada gambar maka icon zoom akan muncul. Semoga bermanfaat. Enjoy & Happy coding.
Sedikit penjelasan yang mungkin anda perlukan, sebenarnya saya hanya merubah nilai dari properti kursor yang tadinya auto/tampilan normal lalu 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 mempunyai link atau gambar yang bisa dibuka pada fitur lightbox pada saat pengunjung melakukan hover.
Demo
Langkah-langkah :
1) Masuk ke akun blogger anda lalu klik Template
2) Klik Back Up lalu klik Edit Template
3) Cari kode ]]></b:skin> lalu tempatkan kode dibawah ini tepat 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 lalu lakukan hover pada gambar maka icon zoom akan muncul. Semoga bermanfaat. Enjoy & Happy coding.
Komentar