Join this site

Memberi Efek Hover pada Gambar yang ada di Header



Adithya Blog kali ini akan share cara Memberi Efek Hover pada Gambar yang ada di Header. untuk demonya silahkan klik demo di bawah ini, lalu coba kamu sorot gambar yang ada 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='http://2.bp.blogspot.com/-s4JmE8cyXMI/UNao2BeJUoI/AAAAAAAABW0/lkxbmI4OHkE/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

Sumber : Adithya-putr4

9 komentar:

  1. Nice Post

    Visit back http://ardi007jr.blogspot.com/

    BalasHapus
  2. wahh lumayan nihh buat mempercantik header ..

    mamzerd.blogspot.com

    BalasHapus
  3. nice post bro,visit back ya?

    http://amos-xp.blogspot.com << blogwalking please!!

    BalasHapus
  4. yang diedit marginnya header blog kita atau gambar yg pengen dibuat efek hover ya mas?

    BalasHapus
  5. Nice Post

    visit back y
    www.gtasafederation.blogspot.com

    BalasHapus

[D-S] COMMENTS RULE :

-DONT SPAM
-DONT FLOOD
-BILA ANDA SUKA DENGAN ARTIKEL INI SILAHKAN BERKOMENTAR
-BILA ANDA INGIN MENDAPATAKAN INFO DI BLOG INI SILAHKAN FOLLOW BLOG INI
-GUNAKANLAH BAHASA YANG SOPAN
-FOLLOW THIS BLOG I WILL FOLLOWBACK !!

 
Thanks For Visiting Gunakanlah Google Chrome Untuk Tampilan Sempurna