Want To Be Creative IMPERONESS MaenCit | By Way Of Lifeiqbal fpFox-OneSyndicate™official KAZOKU48Want To Be A CreativeMr-alf1anz Raider BlogSandy-Cyber
Chat Box Sandy-Cyber
Join this site
KxMadagascar Is Valid HTML5
  • Blogger Indonesia
  • Blognya Sandy
  • VHEE-ZONE
  •  Raider Blog
  • Sandy Creativity
  • Sandy-Cyber
Posted by : Sandhy09 2 Jul 2013

 

Hay apa kabar sob, kali ini saya akan share bagaimana cara membuat banner slide seperti yang ada di Blognya Sandy-Cyber. Langsung ajah nih ikutin langkah-langkahnya.

1. Login ke Blogmu
2. Klik Template > Edit HTML
3. Cari Kode ]]></b:skin> (Ctrl+f )
4. Letakkan Kode dibawah ini Diatas ]]></b:skin> :

#slider3 {
background:rgba(7,111,192, .7);
border:5px solid #000000;;
width: 936px;
height: 60px;
top:0px;
right:-2px;
margin-top:20px;
margin-bottom:20px;
margin-left:25px;
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;
}
5. Cari Kode <div id='content'> atau <div id='wrapper'>
6. Letakkan Kode Dibawah ini Diatas <div id='content'> atau <div id='wrapper'>

<div id="slider3">
<div id="mask1">
<ul>
<li>
<a href="Url Blog Sobat" target="_blank"><img alt="Judul Blog Sobat" border="0" src="Url Gambar Sobat" /></a>
</li>
</li>
<li>
<a href="Url Blog Sobat" target="_blank"><img alt="Judul Blog Sobat" border="0" src="Url Gambar Sobat" /></a>
</li>
</li>
<li>
<a href="Url Blog Sobat" target="_blank"><img alt="Judul Blog Sobat" border="0" src="Url Gambar Sobat" /></a>
</li>
</li>
<li>
<a href="Url Blog Sobat" target="_blank"><img alt="Judul Blog Sobat" border="0" src="Url Gambar Sobat" /></a>
</li></li>
<li>
<a href="Url Blog Sobat" target="_blank"><img alt="Judul Blog Sobat" border="0" src="Url Gambar Sobat" /></a>
</li>
</li>
<li>
<a href="Url Blog Sobat" target="_blank"><img alt="Judul Blog Sobat" border="0" src="Url Gambar Sobat" /></a>
</li>
</ul>
</div>
<div id="progress1">
</div>
<div id="overlay1">
</div>
<div id="pause1">
</div>
</div>

NB: 
- Jika sobat ingin mengganti warna Border Slide, ubahlah kode warna ini #000000 dengan warna yang sobat suka,
- Sobat bisa mengatur Posisi Slide dengan mengubah jarak Marginnya. 
- Ganti Tulisan yang warna Biru dengan Url Blog sobat
- Ganti Tulisan yang warna Hijau dengan Judul Blog sobat
-Ganti Tulisan yang warna Kuning dengan Url Gambar Sobat.

ok, sekian postingan hari ini semoga bermanfaat.

Diposkan Oleh : Sandhy09 ~ Life Must Be Creative

Christian angkouw Sobat sedang membaca artikel tentang Cara Membuat 2 Banner Slide Di Blog. Oleh Sandhy09, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini dibawah postingan yang sobat copas sebagai sumbernya

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

PERHATIAN:

Komentar Akan di Hapus Jika :
1. Komentar Spam
2. Komentar Sara/Porno
3. Komentar Penghinaan/Fitnah
4. Komentar Bahasa Kasar.

- Copyright © 2013 Sandy-Cyber - Sasuke Dark Blue v.1 - Powered by Blogger - Designed by Johanes Djogan - Redesign by Sandy-Cyber -