CSS3 ANIMASI HOVER PADA JUDUL POST

moonroemoort

css

28 January 2014

2 Komentar

setelah lama tidak posting kali ini moonroemoort akan share CSS3 ANIMASI HOVER PADA JUDUL POST ,, apa sih CSS3 ANIMASI HOVER PADA JUDUL POST ???
itu lohh yang kalo mouse di arahin ke judul post akan ada petunjuk atau bisa juga agan ganti dengan yang lain...

LIVE DEMO

oke langsung saja ikuti cara pemasangannya ..

• masuk dashboard blogger
• kllik menu template > edit HTML
• cari kode ]]></b:skin> (tekan ctrl + f  untuk memudahkan pencarian)
• paste kan kode di bawah ini tepat di atas kode ]]></b:skin> 

.post h2 {
margin:.1em 0 0;
padding:0 0 4px;
font-size:1.0em;
font-weight:normal;
line-height:2.5em;
color:#444;
font-family: Oswald, Serif;
}
.post h2 a, .post h2 a:visited, .post h2 strong {
display:block;
text-decoration:none;
color:#444;
font-size:2.0em;
font-weight:normal;
font-family: Oswald, Serif;
}
.post h2 strong, .post h2 a:hover {
color:#0274be;
background: url("http://iconkits.com/images/vip/aerozone_arrow_small_preview.png") no-repeat 4px center transparent;
padding: 3px 10px 3px 50px;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
-webkit-transition: all 1s ease-out;
-ms-transition: all 1s ease-out;
transition: all 1s ease-out;
}
- See more at: http://chenkho.blogspot.com

• klik simpan template

bisa agan ganti link yang di sorot merah untuk mengganti animasi effek hover