Anda tentu pernah mendatangi ke situs berkategori hiburan yang memperlihatkan banyak gambar dan disana pasti akan menyaksikan icon zoom setiap kali anda menjalankan hover pada gambar dan foto yang ada di situs tersebut. Maka kali ini saya akan mengambarkan cara terhadap anda memperlihatkan icon zoom pada setiap gambar di artikel blog secara otomatis.
Sedikit penjelasan yang mungkin anda perlukan, tolong-menolong saya cuma mengganti nilai dari properti kursor yang tadinya auto/tampilan wajar lalu mengubahnya dengan memperlihatkan icon zoom, yang saya jalankan hanyalah menyertakan 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 isyarat ]]></b:skin> lalu tempatkan isyarat dibawah ini tepat diatasnya.
4) Klik Simpan Template
Sekarang coba anda lihat gambar pada satu posting blog lalu jalankan hover pada gambar maka icon zoom akan muncul. Semoga bermanfaat. Enjoy & Happy coding.
Sedikit penjelasan yang mungkin anda perlukan, tolong-menolong saya cuma mengganti nilai dari properti kursor yang tadinya auto/tampilan wajar lalu mengubahnya dengan memperlihatkan icon zoom, yang saya jalankan hanyalah menyertakan deklarasi pada selektor CSS gambar dengan memberi properti nilai zoom-in.
Saya cuma akan mengganti kursor/ memperlihatkan icon zoom pada gambar di artikel blog yang memiliki link atau gambar yang sanggup dibuka pada fitur lightbox pada dikala hadirin menjalankan hover.
Demo
Langkah-langkah :
1) Masuk ke akun blogger anda lalu klik Template
2) Klik Back Up lalu klik Edit Template
3) Cari isyarat ]]></b:skin> lalu tempatkan isyarat 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 jalankan hover pada gambar maka icon zoom akan muncul. Semoga bermanfaat. Enjoy & Happy coding.