Jumat, 13 September 2013

Cara Membuat Efek Gambar Membesar saat Mouse Lewat di Blog

Hover

Jika sebelumnya saya sudah membagikan CSS efek gambar mengecil saat mouse lewat untuk blog, maka kali ini saya membagikan script CSS kebalikannya, yaitu efek membesar dengan transisi smooth. Jika kalian penasaran dengan efeknya silakan unduh dokumen HTML nya disini.
Bagaimana ? Jika kalian tertarik silakan ikuti langkah - langkah dibawah ini :
1. Login ke akun blogger kalian, lalu pada dashboard klik menu dropdown dan pilih template
Biasakan backup template kalian sebelum mengedit template

2. Pada template klik 'Edit HTML'
Edit HTML

3. Nah sekarang pada form edit template cari kode <b:skin> (Klik formnya lalu tekan Ctrl+F untuk pencarian)
4. Copy kode CSS dibawah lalu  paste dibawah kode <b:skin>

img{
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;}
img:hover{
  overflow:hidden;
  -webkit-transform:translateY(-5px) scale(1.1);
  -moz-transform:translateY(-5px) scale(1.1);
  -o-transform:translateY(-5px) scale(1.1);
  -ms-transform:translateY(-5px) scale(1.1);}

5. Setelah itu klik tombol Simpan template. Sekarang cek blog kalian..jika efeknya berhasil...selamat !! :)

Semoga bermanfaat..good luck :)

2 komentar:

  1. nice share gan, bisa dicoba nih :O
    thanksyaa
    keep blogging

    BalasHapus
    Balasan
    1. tq gan..bisa :D
      yo masama gan...siip :D

      jgn lupa mampir lagi yaa...

      Hapus

Silahkan tinggalkan komentar ya :) Terimakasih...

 
Related Posts Plugin for WordPress, Blogger...