Blogger Widgets
Pemberitahuan :

1. Template Sedang Diperbaiki.
2. Copy Menggunakan CTRL + C.
3. Highlight (blok huruf) Transparan.
4. Screen Resolution 1366*768 untuk tampilan yang memuaskan.
Dark Gamesoft Dark Gamesoft Dark Gamesoft Dark Gamesoft

» » Cara Membuat Banner 468x60 Slider Di Header

Cara Membuat Banner 468x60 Slider Di Header

Diposting oleh Unknown - 0 komentar
 Kali Ini Dark Gmesoft Mau share " Cara Membuat Banner slider 468x60 Di Header"

Tutor Ini Sebenernya Sudah Lama Saya Buat Tapi Saya Mau Share Lagi Karna Blog Saya Yang Lama Telah Di Hapus Google :'v Padahal Viewers nya Perhari Udah Banyak
Udahlah Lupakan :v







Contohnya Di Header Blog Saya Yang Lama


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
Label:

Salam Blogger |(^o^)\

» Dimohon untuk memakai kata yang sopan
» Dimohon untuk tidak menggunakan kata kotor
» Dimohon untuk tidak memakai link hidup atau sejenisnya
» Dimohon untuk tidak SARA atau sejenisnya
» Dimohon untuk tidak SPAM atau sejenisnya


Terima kasih atas kerja samanya ^o^)~