Minggu, 09 Maret 2014

Cara Membuat Gambar Membesar Saat disentuh Cursor Mouse

                      
Bayak sekali blog-blog yang menggunakan efek gambar membesar saat disentuh cursor.Efek gambar membesar ini banyak disenangi oleh para blogger,karena dapat memperbesar gambar atau zoom saat disentuh cursor yang akan membantu memperjelas gambar.Saat kita membuat tutorial bergambar tetapi gambarnya kecil,maka sulit bagi pembaca untuk memahaminya.Selain kelebihan diatas efek gambar membesar juga mempunyai kekurangan yaitu dapat mengganggu pengunjung saat membaca artikel blog.
Tetapi tidak apa-apa dengan kekurangannya,bagi sobat yang ingin memasangnya silahkan sobat ikuti langkahnya dibawah ini.

Cara Membuat Gambar Membesar Saat disentuh Cursor:


  1. Login dulu ke blog sobat.
  2. Pilih Template> Edit HTML.
  3. Cri kode ]]></b:skin>
  4. Letakkan kode berikut,diatas kode ]]></b:skin>

    1. .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); }

  5. Klik Simpan Template,dan lihat hasilnya.

0 komentar:

Posting Komentar

Template by:

Free Blog Templates