Unik, Menarik, Life Style, Tips SEO Blogspot

Minggu, 11 September 2011

Cara membuat gambar membesar jika di hover mouse

Ari Software - Cara membuat gambar membesar jika di hover mouse,
Memperbesar gambar dengan cara mengklik sudah biasa. Tapi tutorial kali ini hanya jika gambar di hover akan memperbesar sendiri sesuai skala yang di berikan pada pengeditan kode HTML. Jika penasaran dengan apa yang saya maksud silahkan arahkan mouse sobat ke Gambar di samping, maka gambarnya akan membesar dengan sendirinya. Trick ini hanya menggunakan Css dan tidak menggunakan sedikitpun JavaScript. Dan trick ini cukup berguna jika gambar yang sobat share berukuran kecil. ok berhubung saya tidak pandai bicara panjang lebar lang sung simak caranya.

Ikuti Tutor berikut dengan teliti :

  1. Sudah jelas masuk ke akun Blogger masing masing
  2. dari dashboard ke Rancangan >> Edit HTML
  3. Cari kode berikut
    ]]></b:skin>
  4. Taruh kode berikut di atas kode tadi
    .post img:hover {
    -moz-transform:scale(1.3);
    -webkit-transform:scale(1.3);
    }
  5. jika sudah Save Template

Keterangan :
  • Ganti tulisan yang berwarna biru dengan tag kode gambar post sobat masing masing (karena setiap template berbeda defaultnya sih : img:hover)
  • Ganti tulisan yang berwarna merah dengan skala yang sobat mau
  • jika ingin seperti saya, gambarnya tidak langsung gede tambahin juga kode ini
    .post img {
    -webkit-transition: all 0.6s ease-in-out;
    }
  • Jika masih belum bisa silahkan hubungi admin melalui FACEBOOK
Sekian dulu Tutor dari saya sampai jumpa lain waktu

Description: Cara membuat gambar membesar jika di hover mouse
Rating: 5.0
Reviewer: Admin - Sc Zone
ItemReviewed: Cara membuat gambar membesar jika di hover mouse
Jumlah Voting : 99 Orang

9 Respons:

  1. thx udah posting jangan lupa kunjungan rutin blog saya ya :) :)

    http://www.bit-xp.com

    BalasHapus
  2. kalo untuk memperbesar gambar di blog saya,kayaknya kurang cocok

    BalasHapus
  3. thanks gan.

    ini caranya, boleh dipake?
    kalau boleh saya coba ;)

    BalasHapus
  4. =)) =)) =)) =)) =)) kwokwookw bikin ngakak aja nih ziyad :D :D :D :D

    BalasHapus
  5. kalo mau nambahin border ama sahadow di setiap foto di postingan gimana ya min?

    BalasHapus
  6. wah keren bgt nih,tp saya butuh trik ini dong buat menghadapi google panda thanks yah :) ihsanmagazine.blogspot.com

    BalasHapus

© 2011 Ari Software | All in one, AllRightsReserved.

Designed by Ari Software