Cara Membuat Gambar Membesar Saat Tersentuh Kursor

Banyak macam trik dan tips dalam mengelola blog. Banyak juga inovasi-inovasi untuk mempercantik sebuah blog atau juga untuk membuat blog menjadi unik.

Pada postingan kali ini, saya akan membagikan trik agar blog terlihat sedikit keren dengan membuat gambar yang berada dalam postingan menjadi besar saat tersentuh kursor.

Mungkin juga sebagian dari kalian ada yang pernah melihat trik seperti yang akan saya terangkan.

Bagi yang berminat dengan trik ini, silahkan ikuti panduan berikut ini:

Login ke Blog

Pilih Tema

Pilih Edit HTML  (Jangan lupa klik backup/pulihkan untuk berjaga-jaga)

Pada kolom edit template cari kode ]]></b:skin>.

Untuk mempercepat pencarian kode klik kiri di mana saja lalu tekan CTRL+F maka akan muncul kolom pencarian di pojok kanan atas.

Masukan kode yang ingin di cari ke dalam kolom pencarian lalu tekan ENTER.

Pastekan kode di bawah ini tepat di atas kode ]]></b:skin>

.post img, table.tr-caption-container { border:none; max-width:560px; height:auto; -o-transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; }

.post img:hover { -o-transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transform: scale(1.5); -o-transform: scale(1.5); -webkit-transform: scale(1.5); -webkit-border-radius: 0px 0px; -moz-border-radius: 0px / 0px; -webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6); }

Klik Simpan Template

Demikian panduan membuat gambar membesar saat tersentuh kursor di blog
Semoga bermanfaat dan selamat mencoba.