CMY-B

Creative Without Limits

lol ZETSUBOU48
D-Aschri Masked Verivication Rozers Zone MaenCit | By Way Of Life Yondarkness
Posted by : Unknown Sabtu, 26 Oktober 2013

Halo sekarang saya mau share Tentang Cara membuat banner slider di bwah header okey langsung saja TKP:
1.login blogger
2.pilih edit HTML
3.dan letakkan kode di bawah ini tepat di atas Kode ]]></b:skin>

#slider2 {
width: 936px;
height: 60px;
margin:auto;
margin-top:10px;
overflow: hidden;
background-color: #1100FF;
border-left: 3px solid #1100FF;
border-right: 3px solid #1100FF;
box-shadow: 0px 0px 7px #1100FF;
-moz-transition: all 170ms ease-in;
-webkit-transition: all 170ms ease-in;
-o-transition: all 170ms ease-in;
position: relative;
}
#mask {
overflow:hidden;
}
#slider2:hover {
background-color:#fff;
border:1px solid #fff;
}
#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;
}

4.eith blom slesai sekarang kita copy kan kode di bwah ini tepat di bawah kode menu navigasi anda
 
<div id='slider2'>
<div id='mask'>
<ul><li>
<a href='http://cydarkness.blogspot.com/'><img alt='ads' src='http://i.imgur.com/ANRQ1uS.gif '/></a>
</li>
<li>
<a href='http://hazamazi.blogspot.com/'><img alt='Hazamazi' src='http://i.imgur.com/tHjG8Gi.gif'/></a>
</li>
<li>
<a href='http://cydarkness.blogspot.com/'><img alt='ads' src='http://i.imgur.com/ANRQ1uS.gif'/></a>
</li>
<li>
<a href='http://cydarkness.blogspot.com/'><img alt='ads' src='http://i.imgur.com/ANRQ1uS.gif'/></a>
</li>
  <li>
    <a href='http://www.cydarkness.blogspot.com/'><img alt='ads' src='http://i.imgur.com/ANRQ1uS.gif'/></a>
</li>
</ul>
</div>
<div id='progress'>
</div><div id='overlay'>
</div><div id='pause'>
</div></div>
 
note : ganti tulisan yg berwarna merah dengan URL blog sobat dan URL banner sobat
MUdah bukan??? langsung saja di coba :D

{ 1 Comment... read them below or add one }

Banner Friend

CyDARKNESS CyDARKNESS CyDARKNESS CyDARKNESS CyDARKNESS CyDARKNESS CyDARKNESS CyDARKNESS CyDARKNESS CyDARKNESS CyDARKNESS CyDARKNESS CyDARKNESS CyDARKNESS CyDARKNESS

Postingan Populer

Recent Coment



Site info


SEO Reports for cydarkness.blogspot.com

Fageviewers

- Copyright © 2012 - 2013 S-Skyser [V7] - Powered by Blogger and Renadel - Designed by Margatama,Rafi BLog and Cybers King