Kali Ini Grew Uchiha Akan Memberi Turorial Cara Membuat Gambar Header Geser
Berikut tutorialnya.
- Tutorial
- Log in ke akun blogger kalian
- Pilih menu Template
- Setelah itu Edit HTML
- Cari Kode ]]></b:skin> (Gunakan F3 untuk memudahkan pencarian)
- Letakan kode berkut tepat diatas kode ]]></b:skin>
div.GrewUchihaheadergeser {
-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-top:-10px;margin-left:405px;
background: url("http://i.imgur.com/GAW73kb.png") no-repeat ;
height: 369.5px;
width: 277px;position:absolute;
}
#header-wrapper:hover .Rafiheadergeser {margin-top:-10px;margin-left:405px;
margin-left: 510px;opacity:0;
}
div.GrewUchihaheadergeser1 {
-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-top:-10px;margin-left:405px;
background: url("http://i.imgur.com/GAW73kb.png") no-repeat;
height: 369.5px;
width: 277px;position:absolute;opacity:0;
}
#header-wrapper:hover .GrewUchihaheadergeser1 {margin-top:-10px;margin-left:405px;
margin-left: 510px;opacity:1;
}
#header img{margin-left:auto;margin-right:auto}
Keterangan:
Kode yang berwarna FUNCHSIA dapat diganti dengan URL Gambar header yang akan kalian gunakan
Kode yang berwarna LIME dapat diganti dengan URL Gambar header yang akan kalian gunakan setelah di mouseover
- Belum selesai sampai disitu, Cari kode <header id='header-wrapper'>
Letakan kode berikut tepat dibawah kode
- Letakan kode berikut tepat dibawah kode <header id='header-wrapper'>
- div class='GrewUchihaheadergeser'/>
<div class='GrewUchihaheadergeser1'/>
Semoga Bermanfaat :)
0 Komentar