Cara Membuat Banner Slider ala Kurazone - Kurazone Blog | Panduan Belajar Blogger Pemula

Cara Membuat Banner Slider ala Kurazone

Pilihan Editor :

Cara Membuat Banner Slider ala Kurazone
Penulis Bagus Surochman
0
Modus malam




KURAZONE ~ Blog yang memiliki banyak pengunjung biasanya tidak akan lengkap jika tidak disertai iklan didalamnya, salah satu iklan yang menjadi favorit adalah ukuran 468x60 (mobile banner) seperti dibawah ini :
PropellerAds
Namun, untuk menggunakan iklan dengan ukuran tersebut dalam jumlah yang banyak ternyata dapat memenuhi slot pada blog. Nah, supaya dapat menghemat tempat, kalian bisa mencoba Banner Slider ala Kurazone, yang tampilannya akan nampak seperti dibawah ini : (demo 4 banner)

  • PropellerAds
  • PropellerAds
  • PropellerAds
  • PropellerAds

Berikut adalah HTML dan CSS nya
<div id='slider2'>
<div id='mask'>
<ul>
<li><a href='#' title='#'><img src='urlgambar'/></a></li>
<li><a href='#' title='#'><img src='urlgambar'/></a></li>
<li><a href='#' title='#'><img src='urlgambar'/></a></li>
<li><a href='#' title='#'><img src='urlgambar'/></a></li>
</ul>
</div>
<div id='progress'>
</div><div id='overlay'>
</div><div id='pause'>
</div></div>
<style text="css">
#slider2 {
width: 468px;
height: 60px;
margin:0px 0px 0px 0px;
overflow: hidden;
background-color: #111111;
border: 1px solid red;
-moz-transition: all 170ms ease-in;
-webkit-transition: all 170ms ease-in;
-o-transition: all 170ms ease-in;
position: relative;
border-radius: 1px/2px;
}
#mask {
overflow:hidden;
}
#slider2:hover {
background-color:#670000;
border:2px dashed orange;
}
#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:10px;
height:10px;
background-color:blue;
-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:468px;
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:'Communist-Regular';
text-shadow:1px 1px 1px #362c30;
}
</style>
Taruh saja HTML dan CSS kedalam satu widget HTML/Javascipt > kemudian SIMPAN
Selanjutnya tinggal mengatur url link dan url image sesuai keinginan anda
<li><a href='#' title='#'><img src='urlgambar'/></a></li>

Kekurangan :
Animasi progress kadang kurang pas setelah wave kedua. Artinya adalah jika kalian menggunakan 4 buah banner, maka animasi progress nya masih pas pada animasi wave pertama yang menampilkan 4 banner hingga selesai. Kemudian saat berada di wave kedua, dari sinilah animasi progress nya kurang pas.
Wave adalah gelombang, 1 gelombang menampilkan banyaknya banner, setelah gelombang pertama selesai, maka animasi akan terulang kembali dari awal sebagai wave kedua dst.
Itulah informasi mengenai "Cara Membuat Banner Slider ala Kurazone". Selamat mencoba dan semoga bermanfaat. Goodluck !!
nanio
Cara Membuat Banner Slider ala Kurazone
Cara Membuat Banner Slider ala Kurazone Cara Membuat Banner Slider ala Kurazone Reviewed by Bagus Surochman on 6/16/2018

Tidak ada komentar:

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar 1 per 1.
5. Komentar selalu di moderasi.