- Back to Home »
- CSS Tricks »
- Cara Membuat Gambar di Header Bergeser
Posted by : Boyz
Kamis, 25 April 2013
1. Masuk ke edit HTML kemudian centang Expand Template Widget
2. Letakkan kode ini diatas ]]></b:skin>
div.Kode {
background: url("URL Gambar") no-repeat ;
-webkit-transition: all 560ms ease-out;
-moz-transition: all 560ms ease-out;
-ms-transition: all 560ms ease-out;
-o-transition: all 560ms ease-out;
transition: all 560ms ease-out;
margin-left:300px;
position:absolute;
height: 200px;
width: 277px;
}
#header-wrapper:hover .Kode {
margin-left:490px;
opacity:0;
}
div.Kode1 {
background: url("URL Gambar") no-repeat;
-webkit-transition: all 560ms ease-out;
-moz-transition: all 560ms ease-out;
-ms-transition: all 560ms ease-out;
-o-transition: all 560ms ease-out;
transition: all 560ms ease-out;
margin-left:405px;
position:absolute;
height: 200px;
width: 277px;
opacity:0;
}
#header-wrapper:hover .Kode1 {
margin-left:490px;
opacity:1;
}
3. Lalu letakkan kode ini dibawah <div id='header-wrapper'>
<div class='Kode'/>
<div class='Kode1'/>
4. Pratinjau dulu sebelum di save
Edit by KODE
Sumber
bang...
BalasHapusklu header-wrapper gk ad gantinya ap ya..
template bawaan blogger gk ad header-wrappernya..
visit n comment back..
http://kiritoblogs.blogspot.com/
Gan Gimana caranya yg lebih baik
BalasHapusterimakasih banyak buat tutorialnya, sangat membantu sekali..
BalasHapus