Memberi Efek Hover pada Gambar 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




Related Post:

15 comments

January 10, 2013 at 1:50 AM

keren di follow back dong blog q
http://kangshinokami.blogspot.com

January 10, 2013 at 4:56 PM

oke...

January 15, 2013 at 3:22 AM

Warnanya menarik gan tapi lebih bagusnya garisnya seperti byasa saja hehe

January 17, 2013 at 11:05 PM

maksudnya.....??? ~x(

February 4, 2013 at 11:18 PM

gan cara nyari kode html gambar nya gimana

February 5, 2013 at 12:08 AM

url kali, bukan html gambar. kalau url gambar caranya kita upload gambar nya ke photobucket. lalu klik kanan copy url...

February 18, 2013 at 4:41 AM

gan kok saya munculnya malah diatas header sih ...tolong dibantu *bang*

February 19, 2013 at 12:10 AM

ya kamu ganti la marginnya biar pas... ~x(

March 27, 2013 at 10:59 PM

kok malah rusak yaa knp gan

March 29, 2013 at 3:13 AM

knp gambarnya ada di belakang header tolong bantuannya

May 12, 2013 at 7:17 AM

^:D

June 30, 2013 at 10:18 PM

:D blog walking

October 25, 2013 at 3:27 AM

Kog Dibelakang Header yah gan...?????...tolong bantu

January 30, 2014 at 3:10 AM

kereen gan ...

September 5, 2014 at 7:33 PM

Ilmunya tingkat tinggi nieh, thanks ya

Post a Comment - Back to Content

Peraturan :
• komentar Dilarang Berbau SARA
• komentar Dilarang FLODDING,SPAM Dan Lain Lain
• komentar Dilarang Berbau Link Hidup
• Gunakan URL kalian utk berkomentar