Cara Membuat 2 Banner Slider Di Blog

Assalamualaikum sobat ^_^
Alhamdulillah hari ini saya dapat posting Artikel hari ini nih, oke post hari ini adalah tentang Tutorial Blog, Mungkin bagi sobat yang suka tukar tukaran banner sama seseorang, tapi gak ada tempatnya hehehe, nih saya kasih Cara Membuat 2 Banner Slider Di Blog...
yuk langsung saja,,,,,,,,,,,,,,,,

• Pertama, Sobat Login  Blogger
• Dashboard --> Template -->Edit Html
• Kemudian, Kita masukkan CSSnya dahulu di ]]></b:skin> Untuk Mempermudah pencarian sobat bisa tekan Ctrl+ F
• Jika Sudah Ketemu letakkan kode dibawah ini tepat diatas kode tadi

 /*Go! Blog*/
#slider4 {
background:rgba(7,111,192, .7);
border:5px solid #0000ff;;
width: 468px;
height: 60px;
top:0px;
right:-2px;
margin-top:20px;
margin-bottom:20px;
margin-left:50px;
overflow: hidden;
-moz-transition: all 170ms ease-in;
-webkit-transition: all 170ms ease-in;
-o-transition: all 170ms ease-in;
position: relative;}
#mask4 {
overflow:hidden;
}
#slider4:hover #pause {
opacity:1;
}
#slider4:hover #progress {
background-color:#DDD;
}
#slider4:hover ul, #slider4:hover #progress, #slider4:hover #overlay {
-moz-animation-play-state:paused;
-webkit-animation-play-state:paused;
}
#pause4 {
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;
}
#progress4 {
width:1px;
height:1px;
background-color:transparent;
-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;
}
#overlay4 {
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;
}
#slider4 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;
}
#slider4 li {
display:inline;
width:468px;
height:60px;
margin:0;
padding:0;
float:left;
position:relative;
}
#slider4 li:last-of-type {
background-color:#362c30;
}
#slider4 li a {
display:block;
text-decoration:none;
}
#slider4 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 #000000;
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;}
}
#slider4 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;
}
#slider3 {
background:rgba(7,111,192, .7);
border:5px solid #0000ff;;
width: 468px;
height: 60px;
top:0px;
right:-2px;
margin-top:20px;
margin-bottom:20px;
margin-left:50px;
overflow: hidden;
-moz-transition: all 170ms ease-in;
-webkit-transition: all 170ms ease-in;
-o-transition: all 170ms ease-in;
position: relative;}
#mask1 {
overflow:hidden;
}
#slider3:hover #pause1 {
opacity:1;
}
#slider3:hover #progress1 {
background-color:#DDD;
}
#slider3:hover ul, #slider:hover #progress1, #slider:hover #overlay1 {
-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:transparent;
-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;
}
#slider3 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;
}
#slider3 li {
display:inline;
width:468px;
height:60px;
margin:0;
padding:0;
float:left;
position:relative;
}
#slider3 li:last-of-type {
background-color:#362c30;
}
#slider3 li a {
display:block;
text-decoration:none;
}
#slider3 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 #000000;
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;}
}
#slider3 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;
}

• Eitssss,,, belum selesai XD
• Kemudian Sobat Cari Lagi Kode <div id='content'> atau <div id='content-wrapper'> Setiap Template memiliki Kode yang berbeda.
• Jika Sudah ketemu Kode Tadi, Letakkan Kode Dibawah ini Tepat Diatas Kode tadi.

 <div id='slider3'>
<div id='mask1'>
<ul><li>
<a href='http://error-99.blogspot.com/'> <img src='http://i.imgur.com/YB4LmlS.gif' alt='Click Here!' title='Go! Blog'/></a></li>
<li>
<a href='http://error-99.blogspot.com/'> <img src='http://i.imgur.com/YB4LmlS.gif' alt='Click Here!' title='Go! Blog'/></a></li>
<li>
<a href='http://error-99.blogspot.com/'> <img src='http://i.imgur.com/YB4LmlS.gif' alt='Click Here!' title='Go! Blog'/></a></li>
<li>
<a href='http://error-99.blogspot.com/'> <img src='http://i.imgur.com/YB4LmlS.gif' alt='Click Here!' title='Go! Blog'/></a></li>
</ul>
</div>
<div id='progress1'/>
<div id='overlay1'/>
<div id='pause1'/>
</div>
  </div>
<div style='float:right;margin-right:50px;'>
<div id='slider4'>
<div id='mask4'>
<ul><li>
<a href='http://error-99.blogspot.com/'> <img src='http://i.imgur.com/YB4LmlS.gif' alt='Click Here!' title='Go! Blog'/></a></li>
<li>
<a href='http://error-99.blogspot.com/'> <img src='http://i.imgur.com/YB4LmlS.gif' alt='Click Here!' title='Go! Blog'/></a></li>
<li>
<a href='http://error-99.blogspot.com/'> <img src='http://i.imgur.com/YB4LmlS.gif' alt='Click Here!' title='Go! Blog'/></a>
</li>
<li>
<a href='http://error-99.blogspot.com/'> <img src='http://i.imgur.com/YB4LmlS.gif' alt='Click Here!' title='Go! Blog'/></a></li>
</ul>
</div>
<div id='progress4'/>
<div id='overlay4'/>
<div id='pause4'/>
</div>
  </div>

• Ganti Kode Warna Biru dengan Banner 468x60 Sobat
• Pratinjau Dahulu, Jika sudah pas Simpan Template

Oke Wassalam XD
Source CSS