Thursday 10 January 2013

Memberi Efek Hover Pada Gambar Header

Kali ini saya akan membagikan artikel bagaimana cara memberi efek hover pada gambar header. Langsung saja ikuti langkah-langkah di bawah ini:

     1. Login ke Blogger
     2. Pilih menu Template lalu pilih Edit HTML dan pilih Lanjutkan
     3. Cari kode ]]></b:skin> dan letakkan code di bawah ini tepat di atasnya

Wirabazhover
 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.
Mickeymaruhover:hover img{  margin-left: 175px;  padding-left: 0px;  }     4. Sesuaikan letak gambar kalian dengan mengedit marginnya 
     5. Lalu copy code di bawah ini dan pastekan tepat di bawah code </head> 

<a class='Wirabazhover'>
<img alt='Wirabaz' src='http://wirabaz.blogspot.com/header.png'/></a>
     6. Ubah kode yang berwarna biru dengan URL gambar kalian 
     7. Setelah itu simpan HTML kalian dan lihat hasilnya.

    Sekian tutorial dari saya kali ini, semoga bermanfaat, jika ingin bertanya silakan berkomentar di kolom komentar, terima kasih.

    4 comments

    Harap berkomentar dengan menggunakan kata-kata yang sopan, dan tidak memicu keributan. Terima kasih
    EmoticonEmoticon