Cara Membuat Banner Slider Di Header
Sumber Gambar :
GuGel
Sumpah beneran gw dapet dari google ,semuanya ._.
Oke kita mulai dengan CSSnya
Taruh Di Atas Kode
]]></b:skin>
/*Reeznation Slider*/
#slider2 {position:absolute;
width: 468px;
height: 60px;
margin-left: 365px;margin-top:24px;overflow: hidden;
background-color: #181818;
border-left: 5px solid #000000;
border-top: 5px solid #000000;
border-bottom: 5px solid #000000;
border-right: 5px solid #000000;
}
#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 #0088ff;
border-right: 25px solid #0088ff;
border-left: 25px solid #0088ff;
border-bottom: 5px solid #0088ff;
border-radius: px px px px;
}
#mask {
overflow:hidden;
}
#slider2:hover {
background-color:#181818;
border:5px solid #000000;
}
#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:#ffd000;
-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:#362c30;
}
#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;}
Eiittss Belum Siap
Masukan Kode Ini Di Bawah
<div id='header-wrapper'>
<div id='slider2'>
<div id='mask'>
<ul>
<li>
<a
href='http://anonymous-accelerator.blogspot.com/'
target='_blank'><img alt='click Here'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLpppsVhn9qFWv7H96ZVdQ368yCepxpIhow0N841q33Qs4EO7_7OYFUO3311g9-6wPkr_WdDZkea4UxDDzM90Z4BqOFpnX_lcvBHgXjGQsJBWcQ1hht9rYqSgAlcJXCWRMd8egGuA5wzeP/s1600/468-x-60-b-a-n-n-e-r.gif'
title='Dark Kage'/></a></li>
<li>
<a
href='http://anonymous-accelerator.blogspot.com/'
target='_blank'><img alt='click Here'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5JY2bY91SO52s9TH1OJPzUeRCGkcsrREOZjoRUY7czDXq6vWxc-4Ifm2ZvnSnm4KKKrpMFoTq2ReBeKHkei7PotFsIWFl_Hhp71k268ZO6InZsJ0ru7MERL6hkTxigPpwqNnGsgtunS4/s1600/Banner-V.8-468.gif'
title='Reeznation'/></a></li>
<li>
<a
href='http://anonymous-accelerator.blogspot.com/'
target='_blank'><img alt='click Here'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5JY2bY91SO52s9TH1OJPzUeRCGkcsrREOZjoRUY7czDXq6vWxc-4Ifm2ZvnSnm4KKKrpMFoTq2ReBeKHkei7PotFsIWFl_Hhp71k268ZO6InZsJ0ru7MERL6hkTxigPpwqNnGsgtunS4/s1600/Banner-V.8-468.gif'
title='Go! Blog'/></a></li>
<li>
<a
href='http://anonymous-accelerator.blogspot.com/'
target='_blank'><img alt='click Here'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5JY2bY91SO52s9TH1OJPzUeRCGkcsrREOZjoRUY7czDXq6vWxc-4Ifm2ZvnSnm4KKKrpMFoTq2ReBeKHkei7PotFsIWFl_Hhp71k268ZO6InZsJ0ru7MERL6hkTxigPpwqNnGsgtunS4/s1600/Banner-V.8-468.gif'
title='Go! Blog'/></a></li>
</ul>
</div>
<div id='progress'>
</div><div id='overlay'>
</div><div id='pause'>
</div></div>
Oke Jika sudah , silahkan SIMPAN,
Ingat Kalau Ada yang tidak beres Silahkan komentar ya Sob
