Membuat Featured Post Dengan Simple Responsive Slider Di Sidebar Blog

Membuat Featured Post Dengan Simple Responsive Slider Di Sidebar Blog

Bola Hero Gawai

Membuat Featured Post Dengan Simple Responsive Slider Di Sidebar Blog

Membuat Featured Post Dengan Simple Responsive Slider Di Sidebar Blog
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.

Simple Responsive Slider Di Sidebar Blog

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.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×