DickeyMaru DickeyMaru
DickeyMaru v7 200k IDR
Guest
Book

Cara Membuat Banner slider 468x60 Di Header

Author: HarisKhan 10.52 0 Comments
Sambil Nunggu Game Online selesai loading , Admin mau bagi tips nih
semoga aja bermanfa'at ..
 Kali Ini FirmanDark Mau share " Cara Membuat Banner slider 468x60 Di Header"

Contohnya Di Header Blog Saya Yg satunya

Gimana ?? tertarik .. Silahkan Ikuti Langkah Langkahnya

1.Buka Blogger
2.Edit HTML
3.Letakan Kode Ini Di Atas ]]></b:skin> , Agar Lebih mudah Gunakan Ctrl + F
#slider2 {
width: 468px;
height: 60px;
margin-left:125px;
margin-top:230px;box-shadow: 2px 2px 10px #000;
overflow: hidden;
background-color: #221f21;
border-top: 5px solid #000;
border-right: 25px solid #000;
border-left: 25px solid #000;
border-bottom: 5px solid #000;
-moz-transition: all 170ms ease-in;
-webkit-transition: all 170ms ease-in;
-o-transition: all 170ms ease-in;
position: relative;
border-radius: px px px px;
}
#slider2 img{opacity:1;
-webkit-filter: saturate(0.0);
-moz-filter: saturate(0.0);
-ms-filter: saturate(0.0);
-o-filter: saturate(0.0);
filter: saturate(0.0);
-webkit-transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
-ms-transition:all 1s ease-in-out;
-o-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;}
#slider2 img:hover{opacity:1.0;
-webkit-filter: saturate(1.0);
-moz-filter: saturate(1.0);
-ms-filter: saturate(1.0);
-o-filter: saturate(1.0);
filter: saturate(1.0);
-webkit-transition:all .1s ease-in-out;
-moz-transition:all .1s ease-in-out;
-ms-transition:all .1s ease-in-out;
-o-transition:all .1s ease-in-out;
transition:all .1s ease-in-out;}
#mask {
overflow:hidden;
}
#slider2:hover {
background-color:#221f21;
border-top: 5px solid #0bbd00;
border-right: 25px solid #0bbd00;
border-left: 25px solid #0bbd00;
border-bottom: 5px solid #0bbd00;
border-radius: px px px px;
}
#slider2:hover #pause {
opacity:1;
}
#slider2:hover #progress {
background-color:rgba(255,255,255,0.0);
}
#slider2:hover ul, #slider:hover #progress, #slider:hover #overlay {
-moz-animation-play-state:paused;
-webkit-animation-play-state:paused;
}
#pause {
width:468px;
height:60px;
position:absolute;
top:0;
opacity:0;
pointer-events:none;
-moz-transition:all 170ms ease-in;
-webkit-transition:all 170ms ease-in;
-o-transition:all 170ms ease-in;
}
#progress {
width:1px;
height:1px;
background-color:#000000;
-moz-animation:progress 35s infinite;
-webkit-animation:progress 35s infinite;
position:relative;
top:-1px;
-moz-transition:all 170ms ease-in;
-webkit-transition:all 170ms ease-in;
-o-transition:all 170ms ease-in;
}
#overlay {
width:4680px;
height:60px;
position:absolute;
top:0;
pointer-events:none;
-moz-transition:all 170ms ease-in;
-webkit-transition:all 170ms ease-in;
-o-transition:all 170ms ease-in;
opacity:0.5;
-moz-animation:overlay-fade 35s infinite;
-webkit-animation:overlay-fade 35s infinite;
}
#slider2 ul {
width:2400px;
list-style:none;
padding:0;
margin:0;
-moz-animation:slide-animation 35s infinite;
-webkit-animation:slide-animation 35s infinite;
position:relative;
left:0px;
overflow:hidden;
}
#slider2 li {
display:inline;
width:468px;
height:60px;
margin:0;
padding:0;
float:left;
position:relative;
}
#slider2 li:last-of-type {
background-color:#272727;
}
#slider2 li a {
display:block;
text-decoration:none;
}
#slider2 li span {
display:block;
width:560px;
padding:15px 20px;
position:absolute;
bottom:0;
left:0;
background-color:rgba(54,44,48,0.6);
border-top:1px solid #362c30;
text-shadow:1px 1px 1px #362c30;
pointer-events:none;
text-align:left;
}
@-webkit-keyframes slide-animation {
0% {opacity:0;}
2% {opacity:1;}
20% {left:0px; opacity:1;}
22.5% {opacity:0.6;}
25% {left:-468px; opacity:1;}
45% {left:-468px; opacity:1;}
47.5% {opacity:0.6;}
50% {left:-936px; opacity:1;}
70% {left:-936px; opacity:1;}
72.5% {opacity:0.6;}
75% {left:-1404px; opacity:1;}
95% {opacity:1;}
98% {left:-1404px; opacity:0;}
100% {left:0px; opacity:0;}
}
@-moz-keyframes slide-animation {
0% {opacity:0;}
2% {opacity:1;}
20% {left:0px; opacity:1;}
22.5% {opacity:0.6;}
25% {left:-468px; opacity:1;}
45% {left:-468px; opacity:1;}
47.5% {opacity:0.6;}
50% {left:-936px; opacity:1;}
70% {left:-936px; opacity:1;}
72.5% {opacity:0.6;}
75% {left:-1404px; opacity:1;}
95% {opacity:1;}
98% {left:-1404px; opacity:0;}
100% {left:0px; opacity:0;}
}
@-webkit-keyframes progress {
0% {width:0px; opacity:0;}
2% {width:0px; opacity:1;}
20% {width:468px; opacity:1;}
22.5% {width:468px; opacity:0;}
22.59% {width:0px;}
25% {width:0px; opacity:1;}
45% {width:468px; opacity:1;}
47.5% {width:468px; opacity:0;}
47.59% {width:0px;}
50% {width:0px; opacity:1;}
70% {width:468px; opacity:1;}
72.5% {width:468px; opacity:0;}
72.59% {width:0px;}
75% {width:0px; opacity:1;}
95% {width:468px; opacity:1;}
98% {width:468px; opacity:0;}
100% {width:0px; opacity:0;}
}
@-moz-keyframes progress {
0% {width:0px; opacity:0;}
2% {width:0px; opacity:1;}
20% {width:468px; opacity:1;}
22.5% {width:468px; opacity:0;}
22.59% {width:0px;}
25% {width:0px; opacity:1;}
45% {width:468px; opacity:1;}
47.5% {width:468px; opacity:0;}
47.59% {width:0px;}
50% {width:0px; opacity:1;}
70% {width:468px; opacity:1;}
72.5% {width:468px; opacity:0;}
72.59% {width:0px;}
75% {width:0px; opacity:1;}
95% {width:468px; opacity:1;}
98% {width:468px; opacity:0;}
100% {width:0px; opacity:0;}
}
@-webkit-keyframes overlay-fade {
0% {opacity:0;}
2% {opacity:0.5;}
95% {opacity:0.5;}
98% {opacity:0;}
100% {opacity:0;}
}
@-moz-keyframes overlay-fade {
0% {opacity:0;}
2% {opacity:0.5;}
95% {opacity:0.5;}
98% {opacity:0;}
100% {opacity:0;}
}
#slider2 ul li span h2 {
font-size:24px;
line-height:24px;
color:#fff;
font-weight:normal;
font-family:'Communist-Regular';
text-shadow:1px 1px 1px #362c30; }

4.Dan Letakan Kode Ini Dibawah Kode <div id='header-wrapper'>
<a href='http://cevinfirman007.blogspot.com' target='_blank'><img src='http://i1317.photobucket.com/albums/t622/Latu_Alam_Saputra/BannerTeman468x602_zpsa34a012d.gif'/></a>
<a href='http://cevinfirman007.blogspot.com' target='_blank'><img src='http://i1317.photobucket.com/albums/t622/Latu_Alam_Saputra/BannerTeman468x602_zpsa34a012d.gif'/></a>
<li><a href='http://ichalilmu.blogspot.com/'><img alt='Orblues banner' src='http://i.imgur.com/HtCm0bW.png'/></a>
</li>
<a href='http://cevinfirman007.blogspot.com' target='_blank'><img src='http://i1317.photobucket.com/albums/t622/Latu_Alam_Saputra/BannerTeman468x602_zpsa34a012d.gif'/></a>
</li>
</ul>
</div>
<div id='progress'>
</div><div id='overlay'>
</div><div id='pause'>
        </div></div>   

5.Klik Simpan
Udahan Ya Selamat Mencoba Terimakasih
Share and Backlinks
About Hariskhan
Awalnya cuman iseng main blog lama-lama jadi Gimana gitu saya senengngotakngatik,udah aboutnya sekian aja jangan kepo, pliss komentar di Artikel ini Terimakasih
You Might Also Like This

Tidak ada komentar:

Posting Komentar

COMMENTS SOBAT :D

Labels

Like (y)

Pengikut

Hariskhanishaq

© 2008-2013 DickeyMaru v7 | design by Dark Ard ???? RedesignHarisKhan | Some Rights is Reserved
Selamat datang! di blog cahaya ilmu semoga artikel disini bermanfaat ^_^ ~