Widget Featured Post Simple Responsive Slider Di Sidebar Blog

Di kesempatan kali ini kita akan membahas kembali mengenai widget blog Featured Post Simple Responsive Slider. Pemasangan widget blog ini sebagai menu suplemen nantinya yang akan kita buat ibarat halnya widget Featured Posts yang tampilannya lebih Responsive kemudian ditambahkan kreasi slider yang nantinya akan terlihat lebih Premium pada ketika dipasang di sidebar blog.

Pembahasan kali ini hampir sama caranya dan lanjutan dari postingan sebelumnya adalah Cara Pasang Beberapa Iklan Dengan JavaScript Menggunakan Widget Slide Image. Namun ada sedikit perbedaan cara penerapannya dan tampilannya, biasanya penggunaan Featured posts ini sering dipasang di bawah post disini kita akan buat dengan cara yang sedikit berbeda adalah kita pasang pada sidebar blog.

Widget Featured Posts ini sangat berkhasiat nantinya untuk menampilkan Postingan Unggulan dari Blog kita yang akan di tampilkan pada pengunjung sehingga pengunjung dapat lebih betah berlama-lama di blog kalau sudah begitu tentu blog akan semakin baik dimata perayapan dan Google khususnya sebab dapat memperkecil Bounce Rate.

Langsung saja bagi teman yang mau mencobanya mari kita bahas bersama dan ikuti langkah penerapan dibawah ini.

Cara Memasang Widget Featured Post Simple Responsive Slider Di Sidebar Blog

Langkah Pertama

Silahkan salin isyarat CSS dibawah ini lalu letakkan di 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> 

Langkah Ke Dua
Silahkan salin isyarat Javascript dibawah ini lalu letakkan di atas </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> 

Langkah Ke Tiga
Silahkan salin isyarat HTML dibawah ini lalu letakkan di gadget HTML/Javascript sidebar melalui Tata letak.

<div id='slide'>   <div id='slidecontent'>       <div class="slideimage"><a href="#" title="10 Cara Diterima Daftar Google Adsense Full Approved Non Hosted"><img alt="10 Cara Diterima Daftar Google Adsense Full Approved Non Hosted" height="150" src="URL IMAGE DI SINI" title="10 Cara Diterima Daftar Google Adsense Full Approved Non Hosted" width="300"/></a></div><div class="slidepanel"><h2><a href="#" title="10 Cara Diterima Daftar Google Adsense Full Approved Non Hosted">10 Cara Diterima Daftar Google Adsense Full Approved Non Hosted</a></h2><p>Untuk Sobat semua yang masih belum menerima kesempatan untuk diterima menjadi Publisher adsense berikut aku menyebarkan pengalaman mudah-mudahan pengalaman aku ini dapat bermanfaat, apa saja Syarat untuk menjadi Publisher Adsense, berikut kita simak 10 Cara Diterima Daftar Google Adsense Full Approved Non Hosted.</p></div><div class="clear"></div>     <script>       //<![CDATA[       var bca = [         '<div class="slideimage bounceInLeft"><a href="#" title="Notifikasi Adblocker Adsense Untuk Blog "><img alt="Notifikasi Adblocker Adsense Untuk Blog " height="150" src="URL IMAGE DI SINI" title="Notifikasi Adblocker Adsense Untuk Blog " width="300"/></a></div><div class="slidepanel bounceInLeft"><h2><a href="#" title="Notifikasi Adblocker Adsense Untuk Blog ">Notifikasi Adblocker Adsense Untuk Blog </a></h2><p>Di postingan ini akan dibahas dan cukup mudah juga hanya memodifikasi sedikit isyarat dan dengan menambahkan background-image di tag lokasi iklan berada jadi pada ketika ada penggunjung yang menggunakan Tools Adblocker secara otomatis akan tampil background tersebut berupa notifikasi.</p></div><div class="clear"></div>',         '<div class="slideimage bounceInLeft"><a href="#" title="Cara Membuat Halaman Daftar Harga Flat di Blogger"><img alt="Cara Membuat Halaman Daftar Harga Flat di Blogger" height="150" src="URL IMAGE DI SINI" title="Cara Membuat Halaman Daftar Harga Flat di Blogger" width="300"/></a></div><div class="slidepanel bounceInLeft"><h2><a href="#" title="Cara Membuat Halaman Daftar Harga Flat di Blogger">Cara Membuat Halaman Daftar Harga Flat di Blogger</a></h2><p>Di Postingan kali ini akan membahas Cara Membuat Halaman Daftar Harga Flat di Blogger atau lebih sering dikenal Halaman Flat Pricing Table.</p></div><div class="clear"></div>',         '<div class="slideimage bounceInLeft"><a href="#" title="Cara Memasang In-Feed Ads Google AdSense"><img alt="Cara Memasang In-Feed Ads Google AdSense" height="150" src="URL IMAGE DI SINI" title="Cara Memasang In-Feed Ads Google AdSense" width="300"/></a></div><div class="slidepanel bounceInLeft"><h2><a href="#" title="Cara Memasang In-Feed Ads Google AdSense">Cara Memasang In-Feed Ads Google AdSense</a></h2><p>Ada yang gres dari Google Adsense adalah penambahan jenis gaya iklan adalah unit iklan In-Feed Ads yang mampu di pasang didalam blog.</p></div><div class="clear"></div>',         '<div class="slideimage bounceInLeft"><a href="#" title="Cara Mudah Membuat Kotak Iklan di Blog"><img alt="Cara Mudah Membuat Kotak Iklan di Blog" height="150" src="URL IMAGE DI SINI" title="Cara Mudah Membuat Kotak Iklan di Blog" width="300"/></a></div><div class="slidepanel bounceInLeft"><h2><a href="#" title="Cara Mudah Membuat Kotak Iklan di Blog">Cara Mudah Membuat Kotak Iklan di Blog</a></h2><p>Postingan ini aku akan menyebarkan dengan teman semua bagaimana memasang Banner atau Iklan diluar dari Adsense.</p></div><div class="clear"></div>',         '<div class="slideimage bounceInLeft"><a href="#" title="Featured Post Simple Responsive Slider"><img alt="Featured Post Simple Responsive Slider" height="150" src="URL IMAGE DI SINI" title="Featured Post Simple Responsive Slider" width="300"/></a></div><div class="slidepanel bounceInLeft"><h2><a href="#" title="Featured Post Simple Responsive Slider">Featured Post Simple Responsive Slider</a></h2><span>Pemasangan widget blog ini sebagai menu suplemen nantinya yang akan kita buat ibarat halnya widget Featured Posts yang tampilannya lebih Responsive.</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> 

Catatan :

• Perhatikan isyarat yang ditandai silahkan sesuaikan dengan konten yang akan ditampilkan dalam Featured Posts. Agar tampilan Image atau gambar terlihat mengagumkan silahkan teman sesuaikan ukurannya dengan dimensi 300px x 15px.
• Untuk Kode URL Image Disini silahkan rubah dengan URL image yang teman ingin tampilkan.
• Untuk isyarat # silahkan gantin dengan URL tujuan konten yang akan ditampilkan.
• Untuk h2, title tag, alt tag silhakan isi dan sesuaikan.

Perhatikan langkah penerapannya, ada baiknya di backup terlebih dahulu templatednya antisipasi kalau terjadi error. Jika sudah sesuai silahkan SAVE dan simpulan selamat mencoba biar bermanfaat.