Kamis, 10 Januari 2013

Cara Membuat Efek Gambar Membesar Saat Diarahkan Kursor Mouse

Tutorial Blog kali ini Master Chef akan mengajak Sobat Blogger Dapur Tutorial Blogspot dan Seo untuk membahas resep soal Cara Membuat Efek Gambar Membesar atau Efek Zoom Image Saat Kursor Mouse diarahkan pada gambar tersebut. Pastinya Sobat blogger semuanya sering menemui blog yang ketika kursore diarahkan pada gambar blog tersebut maka otomatis gambar pada blognya tersebut membesar dengan sendirinya. Nah jika sobat blogger ingin membuat efek tersebut diblognya masing-masing Master Chef akan membahas tuntas dalam postingan ini.

Dengan memasang efek tersebut tampilan blog sobat akan terlihat unik dibanding dengan tampilan blog milik orang lain disisi lain pengunjung akan dimanjakan karena tidak perlu mengklik gambar untuk memperbesar gambar.Bagaimana  Cara Memasangnya ?, Langsung saja berikut Cara Membuat Efek Gambar Membesar Saat Diarahkan Kursor Mouse :
  1. Masih seperti biasanya, sobat blogger harus login terlebih dhulu 
  2. Jika sudah login, dari bagian dasboard blog sobat klik Template
  3. Menu Template
  4. Sekarang klik pada tombol "Costumize"
  5. Tombol Costumize
  6. Klik Pada menu "Advaced"
  7. Advaced
  8. Copas Kode berikut :
  9. .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); }
  10. Letakan kode diatas didalam kolom CSS sehingga kode menjadi seperti yang terlihat pada gambar dibawah ini pada bagian kotak warna merah.
  11. Add Kode To Colom CSS
  12. Jika sudah klik pada tombol "Apply To Blog"
  13. Selesai dan Lihat Hasilnya
Demikian sobat blogger Dapur Tutorial Blogspot Dan Seo semuanya. Semoga Tutorial Blog mengenai Cara Membuat Efek Gambar Membesar Saat Diarahkan Kursor Mouse ini bisa memberikan banyak manfaat. Terimakasih!

Tidak ada komentar:

Poskan Komentar

Artikel Populer