Ini Adalah Slot Banner Ukuran 468x60 Dengan Animasi Slider..
Jadi Jika Banyak Tidak Memenuhi Letak...
Karena Setiap Beberapa Detik Akan Berganti Secara Otomatis...
Cara Pemasangan :
- Masuk Ke Blog
- Pilih Template > Edit HTML
- Cari Kode ]]></b:skin>
- Pastekan Kode Dibawah Ini Tepat Diatasnya
#slider2 {
width: 468px;
height: 60px;
margin-top:-587px;
margin-left:-727px;
overflow: hidden;
background-color: none;
-moz-box-shadow: 0 0 16px 0px #000;
-webkit-box-shadow: 0 0 16px 0px #000;
box-shadow: 0 0 16px 0px #000;
border: 3px solid #006acc;;
-moz-transition: all 170ms ease-in;
-webkit-transition: all 170ms ease-in;
-o-transition: all 170ms ease-in;
position: absolute;
border-radius: 0px 0px 0px 0px;
}
#mask {
overflow:hidden;
}
#slider2:hover {
background-color:none;
border: 3px solid #006acc;
}
#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:468px;
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;
}
<div id='header-wrapper'>
- Pastekan Kode Dibawah Ini Tepat Diatasnya
<div id='slider2'>
<div id='mask'>
<ul><li>
<a href="http://kiritoblogs.blogspot.com/" target="_blank"><img height="60" src="http://i.imgur.com/2obvIR7.gif?1?2635" title="KIRITO BLOG'S | All About Blog, Editing,Template, & Tricks" width="468" /></a></li>
<li>
<a href="http://bakul-anime.blogspot.com/" target="_blank" title="Bakul Anime"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgngOUTYSHJVb7jkEdAxxvIk8FP_HKuRs-NNUp_6W-9mkngDzEODSVxH-F_7bJAc3H89hKfXqlDg54eiXcC91dcmV3N3ww82bzj_Zxpf8o2akUzAZ4sQxFfESx4wxMl4-D9f2zkGzm7e78/s1600/Pesanan-468-X-60.gif" alt="Kumpulan Anime Terbaru Subtitle Indonesia" /></a>
</li>
<li><a href="http://darcho-voldemort.blogspot.com/"><img height="60" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnEnXNZ1hxgQXgXnvIAiRQGpE0KpvsVG_rDVwB1GWdATMusf_eamZ8UuEdZHeyvF2YBr7QgmIrUj1uBq4f7jnd4ZnuSekWw9p_MsBuN7cONzc5xHrHmmX5ATNDxYFLv82_tJ4FPtzyC_E/s1600/468-cool.gif" title="Deidara Ryujinki™ | Art Is A Creativity" width="468" />
</a></li>
<li><a href='http://cyber-roxas-t.blogspot.com/' target='_blank' title='EVIL ROXAS|Simple Is My Life'><img alt='EVIL ROXAS|Simple Is My Life' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW4JDFEikKRbxoelD98GMOiR1Mkju4TmlLbzV7b7zfkW9ViTrRqAMy6C9itHRMlKDKd-N3PpN72MqX7DY2YA4KSKK3WhkfxV3BuvL_-IWHDnwnKVulnM5EP3FQbCtr2CrChN-lksY7jC-H/s1600/banner+new+evil+roxas.gif'/></a>
</li>
</ul>
</div>
<div id='progress'>
</div><div id='overlay'>
</div><div id='pause'>
</div></div>
- Ganti Yang Berwarna Merah Dengan Kode Banner Kalian...
Title : Memasang Banner Slider 468x60 Di Header
Description : Ini Adalah Slot Banner Ukuran 468x60 Dengan Animasi Slider.. Jadi Jika Banyak Tidak Memenuhi Letak... Karena Setiap Beberapa Detik Akan B...
