Cara Membuat Banner Slider Di Header Blog

Halo para pengunjung........
Kalian para blogger sudah punya banner, namun saat tukar banner mereka memasang banner anda di slider sementara anda memasang banner mereka non slider. Dalam hati kalian berkata: "Ini tak adil!". Oleh karena itu saya disini akan memberitahu cara membuatnya. Kali ini saya SHARE tantang "Cara Membuat Banner Slider Di Header Blog". Tertarik? Penasaran? Kepo? berikut tutorialnya.

Tutorial

• Log in ke akun blogger kalian
• Pilih menu Template
• Klik Edit HTML
• Cari kode ]]></b:skin> 
• Letakan kode berikut tepat diatas kode ]]></b:skin> 

#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:&#39;Communist-Regular&#39;;
text-shadow:1px 1px 1px #362c30;}

• Belum selesai sampai disitu, Cari kode <header id='header-wrapper'> 
• Letakan kode berikut tepat dibawah kode <header id='header-wrapper'> 

<div id='slider2'>
<div id='mask'>
<ul>
<li><a href='http://creative-blog10.blogspot.com/' title='Go And Get Your Self'><img src='http://1.bp.blogspot.com/-ZOY1pH5V0ls/UvN9Q12n7OI/AAAAAAAABXk/mDiYmZnxYf8/s1600/rafiblog.gif'/></a></li>
<li><a href='http://creative-blog10.blogspot.com/' title='Go And Get Your Self'><img src='http://1.bp.blogspot.com/-ZOY1pH5V0ls/UvN9Q12n7OI/AAAAAAAABXk/mDiYmZnxYf8/s1600/rafiblog.gif'/></a></li>
<li><a href='http://creative-blog10.blogspot.com/' title='Go And Get Your Self'><img src='http://1.bp.blogspot.com/-ZOY1pH5V0ls/UvN9Q12n7OI/AAAAAAAABXk/mDiYmZnxYf8/s1600/rafiblog.gif'/></a></li>
<li><a href='http://creative-blog10.blogspot.com/' title='Go And Get Your Self'><img src='http://1.bp.blogspot.com/-ZOY1pH5V0ls/UvN9Q12n7OI/AAAAAAAABXk/mDiYmZnxYf8/s1600/rafiblog.gif'/></a></li>
</ul>
</div>
<div id='progress'>
</div><div id='overlay'>
</div><div id='pause'>
</div></div>

• Klik Simpan atau Save
• Selesai

Jika berhasil komen ya.....
Jika ada yang ingin ditanyakan komen juga

Backlinks Please Thanks

URL

Code For Forum

HTML Code <a href='http://creative-blog10.blogspot.com/2014/02/cara-membuat-banner-slider-di-header.html' target='_blank'>Cara Membuat Banner Slider Di Header Blog</a>

Anda Baru Saja Membaca Artikel Tentang Cara Membuat Banner Slider Di Header Blog ,Anda Boleh Menyebarluaskan / Mengcopy Paste Artikel Cara Membuat Banner Slider Di Header Blog Ini Bermanfaat Buat Anda , Namun Saya Mohon Untuk Mencantumkan Link Cara Membuat Banner Slider Di Header Blog Sebagai SumberNya.