Membuat Image Zoom Effects di Blog
Cara Membuat Gambar Membesar ketika disentuh Cursor
Salah satu cara untuk mempercantik tampilan Blog anda adalah dengan menambahkan suatu fitur yang di dalam dunia blogging disebut dengan nama Image Zoom Effects atau Hover Zoom Smooth Effects.
Image zoom effects adalah suatu fitur yang dimana pada waktu anda meletakan posisi cursor mouse pada suatu gambar yang nantinya ukuran gambar tersebut akan berubah ukurannya menjadi membesar.
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 hanya untuk memberikan tambahan informasi cara memperindah blog yang anda buat,bagi anda yang berminat memasangnya silakan Anda ikuti proses pembuatannya dibawah ini :
- Silahkan anda masuk/log in ke akun blogger anda
- Pilih Template kemudian klik menu Edi HTML
- Centang Expand widget template
- Lalu cari kode ]]></b:skin> (untuk mempercepat pencarian kode tersebut anda gunakan fungsi shortcuts keyboard dengan menekan tombol Ctrl + F)
- Jika sudah ketemu kode tersebut ( ]]></b:skin> ) letakkan kode di bawah ini tepat di atas kode yang anda cari tadi :
.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 anda klik Simpan template.
Kemudian coba anda lihat hasilnya pada blog anda.
Demikianlah postingan artikel saya kali ini.. Semoga bermanfaat bagi anda,jika ada komentar atau pertanyaan silahkan anda mengisi form yang telah saya siapkan di bawah artikel ini