cara membuat efek zoom atau membesar pada gambar di blog -hello sobat blogger, pada posting kali ini saya akan memberikan sebuah tutorial mengenai membuat efek zoom atau membesar pada gambar di blog. pertama sobat tau apa itu maksud efek zoom pada gambar ? maksudnya saat scroll mouse mengenai gambar si gambar tersebut akan membesar dan akan terlihat seperti di zoom, gimana
sudah mengerti ? kalau belum mengerti langsung saja diperaktekan dan lihat hasilnya, efek ini bagus buat blog yang banyak gambarnya tapi ukuran gambarnya kecil. owh iya kalau soal memperlambat loading blog atau tidak menurut saya sendiri sih tidak memperberat loading blog kenapa ? karena memang efek ini tidak menggunakan javascript tapi menggunakan CSS tapi ga tau juga sih saya masih newbie jadi kalau ada kesalahan mohon di maafkan hehehehe. ok dari pada baca tulisan ga berguna dan ga bermutu langsung saja ke tutorial mengenai cara membuat efek zoom atau membesar pada gambar di blog.
masuk ke bagian template anda kemudian cari kode ]]></b:skin> agar lebih cepat gunakan F3 atau ctrl + F
bila sudah menemukan ]]></b:skin> selanjutnya masukan kode dibawah ini tepat di atas ]]></b:skin>
sudah mengerti ? kalau belum mengerti langsung saja diperaktekan dan lihat hasilnya, efek ini bagus buat blog yang banyak gambarnya tapi ukuran gambarnya kecil. owh iya kalau soal memperlambat loading blog atau tidak menurut saya sendiri sih tidak memperberat loading blog kenapa ? karena memang efek ini tidak menggunakan javascript tapi menggunakan CSS tapi ga tau juga sih saya masih newbie jadi kalau ada kesalahan mohon di maafkan hehehehe. ok dari pada baca tulisan ga berguna dan ga bermutu langsung saja ke tutorial mengenai cara membuat efek zoom atau membesar pada gambar di blog.
masuk ke bagian template anda kemudian cari kode ]]></b:skin> agar lebih cepat gunakan F3 atau ctrl + F
bila sudah menemukan ]]></b:skin> selanjutnya masukan kode dibawah ini tepat di atas ]]></b:skin>
.post img:hover { -o-transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transform: scale(1.3); -o-transform: scale(1.3); -webkit-transform: scale(1.3); }setelah simpan template sobat dan lihat hasilnya.
No comments:
Post a Comment