Latest News

Cara Membuat Widget Melayang/Sticky Ketika Di Scroll Sidebar

Widget yang melayang/menempel di sidebar blog ini sangat cocok jikalau anda seorang blogger yang suka membuat artikel tutorial atau panjang. Dengan widget yang menempel di sidebar blog akan membuat sidebar tidak kosong saat pengunjung men-scroll untuk melanjutkan membaca artikel. Widget ini tidak mampu di close walaupun melayang alasannya berada di sidebar berbeda dengan widget yang berada diluar sidebar yang biasa berisi iklan sehingga mampu di close.
 
Sticty yang artinya lengket,maksudnya widget yang dibuat sticky akan lengket atau menempel di sidebar. Widget yang menempel mampu anda atur widget mana yang ingin dibuat melayang/menempel dengan mengganti id widgetnya,lalu apa fungsi widgte sticky.

Cara Membuat Widget Melayang/Sticky Ketika Di Scroll

Fungsi Widget Sticky

Karena widget ini melayang maka itulah fungsinya. Yaitu mengisi semoga sidebar blog anda tidak kosing saat pengunjung menggulung ke bawah untuk melanjutkan membaca artikel. Lalu widget apa saja yang mampu melayang atau sticy? Semua widget yang memiliki 'id' bahkan iklan mampu dibuat melayang/sticky. 

Namun kadang kala widget ini tidak berfungsi dengan baik,ada beberapa template yang widget di sidebarnya tidak mampu dibuat sticky entah itu alasannya javascript atau cssnya. Widget sticky ini bisanya digunakan untuk meletakkan iklan,supaya CTR iklannya tinggi.Lalu bagaimana cara membuatnya? Ikuti saja langkah dibawah ini.

Cara Membuat Sticky Widget

Langkah 1
Silakan buka blogger, Template → Edit HTML

Langkah 1
Salin arahan berikut lalu pastekan diatas arahan ]]></b:skin>
     .sticky {  position:fixed;  top:10px;/* jarak dari atas*/  z-index: 100;}

Langkah 3
Cari arahan </body> ,lalu salin arahan dibawah lalu letakkan diatas arahan </body>

    <script type="text/javascript">     $(document).ready(function() {     var stickyWidgetTop = $('#HTML6').offset().top;     var stickyWidget = function(){     var scrollTop = $(window).scrollTop();         if (scrollTop > stickyWidgetTop) {         $('#HTML6').addClass('sticky');     } else {         $('#HTML6').removeClass('sticky');     }     };     stickyWidget();     $(window).scroll(function() {         stickyWidget();     });     });     </script>

Ganti arahan yang berwarna merah dengan id widget yang ingin dibuat sticky,tanda # jangan dihapus.

Lalu Simpan template.

Mudah bukan,sekarang cek blog anda apakah widgetnya sudah sticky belum. Cukup sekian tutorial cara membuat sticky widget sidebar. Semoga bermanfaat.