Membuat Gambar Membesar Saat disentuh Cursor


Mungkin sebagian Blogger sering melihat gambar yang menjadi besar apabila tersentuh cursor. Dalam dunia blogging fitur seperti ini sering disebut dengan nama Image Zoom Effects atau Hover Zoom Smooth Effects.

Fitur yang satu ini lumayan banyak di senangi para blogger walaupun sebenarnya dengan memasang Image Zoom Effects ini di blog dapat menggangu pengunjung yang sedang membaca postingan kita.
Postingan ini saya buat untuk melengkapi Tutorial di blog ini, buat sobat yang ingin memasangnya silakan Anda ikuti tutorial dibawah ini.

Cara Membuat Gambar Membesar Saat disentuh Cursor :

  • Masuk ke akun blogger sobat.
  • Pilih Template > Edit HTML.
  • Cari kode :

 ]]></b:skin> , gunakan fungsi Find dengan menekan tombol CTRL+F pada keyboard.
Kalau sudah ketemu,

letakkan kode berikut 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); }

Terakhir klik Simpan Template.

Komentar

  1. boleh nih gan, coba ah. siapa tahu bisa mempercantik blog

    visit dan folback dino-hub.blogspot.com ya

    BalasHapus

Posting Komentar

• Dilarang berkomentar dengan Kata-kata Kasar/Kotor.
• Dilarang berkomentar SPAM dan Memasang Link Aktif.
• Komentar dengan Link Aktif akan dihapus sesegera mungkin.
• Berkomentarlah sesuai Topik/Artikel.
• Berkomentarlah dengan Sopan.

Postingan populer dari blog ini

Navigator Menu Horizontal

Mengatasi Judul Widget / Gadget Yang Tidak Boleh Kosong

Asal Usul Blog SITE-XP