Membuat Featured Post Dengan Simple Responsive Slider Di Sidebar Blog

Sebelumnya aku sudah pernah membagikan cara menciptakan simple responsive slider dengan javascript dan css. Namun selain di simpan di bawah header menyerupai slider pada umumnya, simple responsive slider ini dapat juga di simpan di sidebar.

Selain untuk menampilkan konten, ini juga dapat dipakai untuk menampilkan iklan, produk, dan lainnya yang ingin lebih gampang dilihat oleh pengunjung. Mungkin ini dapat dikatakan atau lebih menyerupai sebagai featured post blogger yang memakai slider sehingga dapat menampilkan beberapa konten yang dibentuk secara manual dengan javascript dan css dengan sedikit menambahkan pengaruh animasi.

Demonya silahkan lihat di sidebar blog ini atau pada gambar animasi gif di bawah ini.


Karena tidak dapat pribadi memakai isyarat simple responsive slider, kita harus sedikit merubah css-nya biar sesuai dengan sidebar. Silahkan gunakan kode-kode di bawah ini.

1. Kode CSS
Silahkan simpan isyarat css ini di atas isyarat </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 isyarat di bawah ini di atas isyarat </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 isyarat 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="Membuat Featured Post Dengan Simple Responsive Slider Di Sidebar Blog"><img alt="Membuat Featured Post Dengan Simple Responsive Slider Di Sidebar Blog Membuat Featured Post Dengan Simple Responsive Slider Di Sidebar Blog" height="150" src="URL IMAGE DI SINI" title="Membuat Featured Post Dengan Simple Responsive Slider Di Sidebar Blog" width="300"/></a></div><div class="slidepanel"><h2><a href="#" title="Membuat Featured Post Dengan Simple Responsive Slider Di Sidebar Blog">Kompi Flexible, Premium Blogger Template</a></h2><p>Kompi Flexible ialah template premium pertama yang aku 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="Membuat Featured Post Dengan Simple Responsive Slider Di Sidebar Blog"><img alt="Membuat Featured Post Dengan Simple Responsive Slider Di Sidebar Blog Membuat Featured Post Dengan Simple Responsive Slider Di Sidebar Blog" height="150" src="URL IMAGE DI SINI" title="Membuat Featured Post Dengan Simple Responsive Slider Di Sidebar Blog" width="300"/></a></div><div class="slidepanel bounceInLeft"><h2><a href="#" title="Membuat Featured Post Dengan Simple Responsive Slider Di Sidebar Blog">Kompi Flexible, Premium Blogger Template</a></h2><p>Kompi Flexible ialah template premium pertama yang aku 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="Membuat Featured Post Dengan Simple Responsive Slider Di Sidebar Blog"><img alt="Membuat Featured Post Dengan Simple Responsive Slider Di Sidebar Blog Membuat Featured Post Dengan Simple Responsive Slider Di Sidebar Blog" height="150" src="URL IMAGE DI SINI" title="Membuat Featured Post Dengan Simple Responsive Slider Di Sidebar Blog" width="300"/></a></div><div class="slidepanel bounceInLeft"><h2><a href="#" title="Membuat Featured Post Dengan Simple Responsive Slider Di Sidebar Blog">Kompi Simple, Free Blogger Template</a></h2><p>Template blogger kali ini merupakan kelanjutan dari template Kompi New yang sebelumnya aku 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="Membuat Featured Post Dengan Simple Responsive Slider Di Sidebar Blog"><img alt="Membuat Featured Post Dengan Simple Responsive Slider Di Sidebar Blog Membuat Featured Post Dengan Simple Responsive Slider Di Sidebar Blog" height="150" src="URL IMAGE DI SINI" title="Membuat Featured Post Dengan Simple Responsive Slider Di Sidebar Blog" width="300"/></a></div><div class="slidepanel bounceInLeft"><h2><a href="#" title="Membuat Featured Post Dengan Simple Responsive Slider Di Sidebar Blog">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="Membuat Featured Post Dengan Simple Responsive Slider Di Sidebar Blog"><img alt="Membuat Featured Post Dengan Simple Responsive Slider Di Sidebar Blog Membuat Featured Post Dengan Simple Responsive Slider Di Sidebar Blog" height="150" src="URL IMAGE DI SINI" title="Membuat Featured Post Dengan Simple Responsive Slider Di Sidebar Blog" width="300"/></a></div><div class="slidepanel bounceInLeft"><h2><a href="#" title="Membuat Featured Post Dengan Simple Responsive Slider Di Sidebar Blog">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="Membuat Featured Post Dengan Simple Responsive Slider Di Sidebar Blog"><img alt="Membuat Featured Post Dengan Simple Responsive Slider Di Sidebar Blog Membuat Featured Post Dengan Simple Responsive Slider Di Sidebar Blog" height="150" src="URL IMAGE DI SINI" title="Membuat Featured Post Dengan Simple Responsive Slider Di Sidebar Blog" width="300"/></a></div><div class="slidepanel bounceInLeft"><h2><a href="#" title="Membuat Featured Post Dengan Simple Responsive Slider Di Sidebar Blog">Kompi Males, Free Blogger Template</a></h2><span>Satu lagi aku bagikan sebuah template gratis yang responsive dan valid HTML5 yang aku 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 kemudian silahkan ganti isyarat URL IMAGE DI SINI dengan URL image yang ingin ditampilkan. Kemudian silahkan ganti isyarat # dengan URL tujuan klik konten. Kemudian silahkan sesuaikan untuk h2, title dan alt tag, dan konten teksnya untuk tiap-tiap konten. Serta untuk isyarat yang aku marking harus sama. Jumlah slidepager harus sama dengan jumlah konten yang ditampilkan.


Sumber https://www.kompiajaib.com/

Share this post