Ditulis oleh: Ditulis pada: 2/20/2016
Sebelumnya saya sudah pernah membagikan cara membuat simple responsive slider dengan javascript dan css. Namun selain di simpan di bawah header seperti slider pada umumnya, simple responsive slider ini bisa juga di simpan di sidebar.Selain untuk menampilkan konten, ini juga bisa digunakan untuk menampilkan iklan, produk, dan lainnya yang ingin lebih mudah dilihat oleh pengunjung. Mungkin ini bisa dikatakan atau lebih mirip sebagai featured post blogger yang menggunakan slider sehingga bisa menampilkan beberapa konten yang dibuat secara manual dengan javascript dan css dengan sedikit menambahkan efek animasi.
Demonya silahkan lihat di sidebar blog ini atau pada gambar animasi gif di bawah ini.
Karena tidak bisa langsung menggunakan kode simple responsive slider, kita harus sedikit merubah css-nya agar sesuai dengan sidebar. Silahkan gunakan kode-kode di bawah ini.
1. Kode CSS
Silahkan simpan kode css ini di atas kode
</head>
<style type='text/css'>
#slide{height:auto}
#slidepager{width:auto;margin:0 auto;text-align:center;display:block!important}
#slidepager>span{display:inline-block;width:10px;height:10px;margin:10px 5px 0;background:rgba(0,0,0,.2);text-align:center;border-radius:100%;font-size:17px;text-decoration:none;transition:background .3s linear 0s;cursor:pointer}
#slidecontent{margin:0 auto;transition:opacity .3s linear 0s;color:#AAA;background:#fff;border:1px solid #dedede;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;position:relative;overflow:hidden;height:auto}
.slidepanel{width:100%;padding:10px 15px 15px;-moz-box-sizing:border-box;word-wrap:break-word;-webkit-box-sizing:border-box;box-sizing:border-box}
.slidepanel>h2{text-align:left;font-size:20px;font-weight:bold;line-height:1.2em;color:#333;margin:0 auto 10px;text-transform:capitalize;padding:0!important}
.slidepanel>p,.slidepanel>span{font-size:14px;font-weight:normal;line-height:1.2em;color:#777;margin:10px 0 0!important}
.slidepanel a{color:#333;text-decoration:none;font-weight:700;transition:all .4s ease-out}
#slide:hover .slidepanel a{color:#e8554e}
.slideimage{width:100%;height:150px;margin:0;padding:0;position:relative}
.slideimage img{width:100%;height:100%;margin-bottom:-4px}
.clear{clear:both}
.bounceInLeft{-webkit-animation-name:bounceInLeft;animation-name:bounceInLeft;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
@-webkit-keyframes bounceInLeft{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);transition-timing-function:cubic-bezier(.215,.61,.355,1)}
0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}
60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}
75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}
90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}
100%{-webkit-transform:none;transform:none}
}
@keyframes bounceInLeft{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);transition-timing-function:cubic-bezier(.215,.61,.355,1)}
0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}
60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}
75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}
90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}
100%{-webkit-transform:none;transform:none}
}
</style>
2. Kode Javascript
Silahkan simpan kode di bawah ini di atas kode
</body>
<script type='text/javascript'>
//<![CDATA[
function _(e){return document.getElementById(e)}function pager(e){_("slidecontent").style.opacity=0;for(var n=0;n<ba.length;n++)ba[n].style.background="rgba(0,0,0,.2)";ba[e].style.background="rgba(0,0,0,.7)",setTimeout(function(){_("slidecontent").innerHTML=bca[e],_("slidecontent").style.opacity=1},300)}function bubbleSlide(){bi++,bi==ba.length&&(bi=0),pager(bi)}var ba,bi=0,intrvl;window.addEventListener("load",function(){ba=_("slidepager").children,intrvl=setInterval(bubbleSlide,7e3)});
//]]>
</script>
3. Kode HTML
Silahkan simpan kode HTML di bawah ini di gadget HTML/JavaScript di sidebar melalui tata letak.
<div id='slide'>
<div id='slidecontent'>
<div class="slideimage"><a href="#" title="Kompi Flexible Blogger Template"><img alt="Kompi Flexible Blogger Template" height="150" src="URL IMAGE DI SINI" title="Kompi Flexible Blogger Template" width="300"/></a></div><div class="slidepanel"><h2><a href="#" title="Kompi Flexible Blogger Template">Kompi Flexible, Premium Blogger Template</a></h2><p>Kompi Flexible adalah template premium pertama yang saya buat. Template responsive dengan penyempurnaan dari beberapa template gratis yang sebelumnya telah buat.</p></div><div class="clear"></div>
<script>
//<![CDATA[
var bca = [
'<div class="slideimage bounceInLeft"><a href="#" title="Kompi Flexible Blogger Template"><img alt="Kompi Flexible Blogger Template" height="150" src="URL IMAGE DI SINI" title="Kompi Flexible Blogger Template" width="300"/></a></div><div class="slidepanel bounceInLeft"><h2><a href="#" title="Kompi Flexible Blogger Template">Kompi Flexible, Premium Blogger Template</a></h2><p>Kompi Flexible adalah template premium pertama yang saya buat. Template responsive dengan penyempurnaan dari beberapa template gratis yang sebelumnya telah buat.</p></div><div class="clear"></div>',
'<div class="slideimage bounceInLeft"><a href="#" title="Kompi Simple Blogger Template"><img alt="Kompi Simple Blogger Template" height="150" src="URL IMAGE DI SINI" title="Kompi Simple Blogger Template" width="300"/></a></div><div class="slidepanel bounceInLeft"><h2><a href="#" title="Kompi Simple Blogger Template">Kompi Simple, Free Blogger Template</a></h2><p>Template blogger kali ini merupakan kelanjutan dari template Kompi New yang sebelumnya saya bagikan. Dengan lebar 950px, template ini cocok untuk personal blog atau untu sharing blog.</p></div><div class="clear"></div>',
'<div class="slideimage bounceInLeft"><a href="#" title="Kompi Grid Blogger Template"><img alt="Kompi Grid Blogger Template" height="150" src="URL IMAGE DI SINI" title="Kompi Grid Blogger Template" width="300"/></a></div><div class="slidepanel bounceInLeft"><h2><a href="#" title="Kompi Grid Blogger Template">Kompi Grid, Free Blogger Template</a></h2><p>Kompi Grid yang merupakan modifikasi dari template Kompi Simple dengan tampilan grid dengan masonry sehingga tidak akan merusak gambar postingan.</p></div><div class="clear"></div>',
'<div class="slideimage bounceInLeft"><a href="#" title="Kompi New Blogger Template"><img alt="Kompi New Blogger Template" height="150" src="URL IMAGE DI SINI" title="Kompi New Blogger Template" width="300"/></a></div><div class="slidepanel bounceInLeft"><h2><a href="#" title="Kompi New Blogger Template">Kompi New, Free Blogger Template</a></h2><p>Kompi New, Simple Template Untuk Main Adsense dengan ukuran sempit ini untuk bermain Adsense dengan lebar template 728px.</p></div><div class="clear"></div>',
'<div class="slideimage bounceInLeft"><a href="#" title="Kompi Males Blogger Template"><img alt="Kompi Males Blogger Template" height="150" src="URL IMAGE DI SINI" title="Kompi Males Blogger Template" width="300"/></a></div><div class="slidepanel bounceInLeft"><h2><a href="#" title="Kompi Males Blogger Template">Kompi Males, Free Blogger Template</a></h2><span>Satu lagi saya bagikan sebuah template gratis yang responsive dan valid HTML5 yang saya namai dengan Kompi Males.</span></div><div class="clear"></div>'
];
//]]>
</script>
</div>
<div id='slidepager'>
<span onclick='pager(0); clearInterval(intrvl);' style='background:rgba(0,0,0,.7);'></span>
<span onclick='pager(1); clearInterval(intrvl);'></span>
<span onclick='pager(2); clearInterval(intrvl);'></span>
<span onclick='pager(3); clearInterval(intrvl);'></span>
<span onclick='pager(4); clearInterval(intrvl);'></span>
</div>
</div>
Silahkan buat gambar dengan dimensi 300px x 150px lalu silahkan ganti kode
URL IMAGE DI SINI dengan URL image yang ingin ditampilkan. Kemudian silahkan ganti kode # dengan URL tujuan klik konten. Kemudian silahkan sesuaikan untuk h2, title dan alt tag, dan konten teksnya untuk tiap-tiap konten. Serta untuk kode yang saya marking harus sama. Jumlah slidepager harus sama dengan jumlah konten yang ditampilkan.