Aug 16, 2017

Widget Featured Post Simple Responsive Slider Di Sidebar Blog

Featured Post Simple Responsive

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

Pembahasan kali ini hampir sama caranya dan lanjutan dari postingan sebelumnya yaitu 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 yaitu kita pasang pada sidebar blog.

Widget Featured Posts ini sangat berguna 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 karena dapat memperkecil Bounce Rate.

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


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



Langkah Ke Dua
Silahkan salin kode 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 kode 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 mendapatkan kesempatan untuk diterima menjadi Publisher adsense berikut saya berbagi pengalaman mudah-mudahan pengalaman saya 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 AMP HTML"><img alt="Notifikasi Adblocker Adsense Untuk Blog AMP HTML" height="150" src="URL IMAGE DI SINI" title="Notifikasi Adblocker Adsense Untuk Blog AMP HTML" width="300"/></a></div><div class="slidepanel bounceInLeft"><h2><a href="#" title="Notifikasi Adblocker Adsense Untuk Blog AMP HTML">Notifikasi Adblocker Adsense Untuk Blog AMP HTML</a></h2><p>Di postingan ini akan dibahas dan cukup mudah juga hanya memodifikasi sedikit kode dan dengan menambahkan background-image di tag lokasi iklan berada jadi pada saat 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 baru dari Google Adsense yaitu penambahan jenis gaya iklan yaitu unit iklan In-Feed Ads yang bisa 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 saya akan berbagi dengan sobat 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 tambahan nantinya yang akan kita buat seperti 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 kode yang ditandai silahkan sesuaikan dengan konten yang akan ditampilkan dalam Featured Posts. Agar tampilan Image atau gambar terlihat bagus silahkan sobat sesuaikan ukurannya dengan dimensi 300px x 15px.
  • Untuk Kode URL Image Disini silahkan rubah dengan URL image yang sobat ingin tampilkan.
  • Untuk kode # 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 jika terjadi error. Jika sudah sesuai silahkan SAVE dan selesai selamat mencoba semoga bermanfaat.

Artikel Terkait

Halo Sobat, sedikit cerita mengenai diri saya, saya adalah hanya seorang penulis amatiran yang mencoba berbagi pengetahuan dari apa yang saya dapat sehari-hari. Pengalaman ini saya tuangkan di tulisan dengan tujuan baik agar pengetahuan dan pengalaman saya ini dapat bisa di pergunakan dan bermanfaat khususnya untuk diri saya pribadi dan umumnya untuk orang lain, sehingga saya beri nama Web saya ini dibalikseo.com yang filosofinya adalah dibalik pengetahuan yang saya dapat.