Senin, 11 Maret 2013

Memberi Efek Hover pada Gambar di Header

0 komentar




Memberi Efek Hover pada Gambar di Header


Berikut Tutorialnya...

  • Login ke blogger
  • Pilih menu template >> edit HTML >> lanjutkan
  • Cari Kode ]]></b:skin> Lalu letakkan code di bawah ini tepat diatasnya...
a.thumbopacity img {  -moz-transition: all 0.3s ease-out;    -o-transition: all 0.3s ease-out;    -webkit-transition: all 0.3s ease-out;    -ms-transition: all 0.3s ease-out;    transition: all 0.3s ease-out;margin-top:5px;margin-left:230px; position:absolute; }
a.thumbopacity:hover img{  margin-left: 175px;  padding-left: 0px;  }

  • Sesuaikan letak Gambar kalian dengan mengedit marginnya 
  • Lalu copy code di bawah ini dan pastekan tepat dibawah code </head> 
<a class='thumbopacity'>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_wMZfVbYaLejxFqSKV5TAHv9F3FJCELv_smYSAYdCQ5GmM4X4GYbwWuhfkNilr3Xbm-DWKdxBcT2la0W-J5Httinzw4m_BsTJSg_XLCX9EaEWrN4z76vUDG5ddrxYBOniWj7O6EuCVXG0/s1600/adada.png'/></a>

  • Ubah kode yg berwarna hijau dengan URL gambar kalian 
  • Setelah itu simpan HTML kalian dan lihat hasilnya.

Selanjutnya tinggal kalian utak atik sendiri, dan selamat mencoba

Leave a Reply