Cara Membuat Sticky Widget di Sidebar Blog dengan Mudah

Salah satu upaya untuk membuat tampilan blog menjadi lebih responsive dan menarik adalah dengan cara membuat sticky widget di sidebar blog. Fungsi dari sticky widget ini adalah untuk membuat widget di sidebar blog Sobat mengikuti ketika halaman di gulir ke bawah.



Sticky Widget di Sidebar Blog


Banyak sekali blogger yang mencari tentang tutorial ini untuk membuat widget-widget seperti popular post (postingan populer) yang berada di sidebar blog mengikut ketika di scroll. Ini dipercaya dapat menambahkan interaksi pengunjung untuk membuka artikel lain yang ada pada blog Sobat.

Selain itu ada pula yang menerapkan sticky widget untuk meletakkan iklan yang dapat mengikuti ketika halaman sedang digulir ke bawah. Dengan begitu iklan yang tampil pada sidebar blog Sobat akan selalu dapat dilihat oleh pengunjung meskipun halaman tersebut sudah di geser ke bawah, ini sangat efektif untuk meningkatkan daya tarik pengunjung terhadap iklan yang tampil di sidebar blog.

Saya telah merangkum beberapa cara untuk membuat sticky widget di sidebar blog dari berbagai situs yang telah Saya baca sebelumnya. Cara membuat sticky widget cukup bervariasi, Saya telah menemukan 3 cara yang cocok untuk Sobat praktikan kali ini yang sebagaimana ditulis di bawah ini.

Cara Membuat Sticky Widget di Sidebar Blog Versi Arlina Design

1. Langkah yang pertama login ke blogger > Buka menu tema/template > klik Edit HTML > Tambahkan kode di bawah ini sebelum kode </body> pada template Sobat. Gunakan tombol CTRL + F pada keyboard untuk mempermudah pencarian kode tersebut.

&lt;script type='text/javascript'&gt; //&lt;![CDATA[ $(function() { if ($('#id-sticky-sidebar').length) { var el = $('#id-sticky-sidebar'); var stickyTop = $('#id-sticky-sidebar').offset().top; var stickyHeight = $('#id-sticky-sidebar').height(); $(window).scroll(function() { var limit = $('#id-footer-wrapper').offset().top - stickyHeight - 20; var windowTop = $(window).scrollTop(); if (stickyTop &lt; windowTop) { el.css({ position: 'fixed', top: 10 }); } else { el.css('position', 'static'); } if (limit &lt; windowTop) { var diff = limit - windowTop; el.css({ top: diff }); } }); }


Tentukan kode #id-footer-wrapper di atas untuk membatasi titik pemberhentian fungsi sticky dan ubah kode #id-sticky-sidebar dengan ID widget yang akan di jadikan melayang atau sticky serta sesuaikan jarak atau margin dengan mengganti angka 10 pada kode di atas sesuai keinginan.

2. Langkah selanjutnya adalah menyesuaikan ukuran width (lebar) pada konten atau widget yang akan dibuat sticky, Contohnya jika Sobat ingin memberikan lebar 250px maka kode-nya seperti dibawah ini.

#id-sticky-sidebar{width:100%;max-width:250px}


Atau seperti yang satu ini

#HTML{width:100%;max-width:250px}


max-width yang digunakan adalah lebar sidebar pada template yang sedang Sobat gunakan saat ini. Sebaiknya mengikuti ukuran sidebar pada template Sobat agar terlihat lebih rapih.

3. Langkah terakhir, pada langkah ini yaitu mengganti lebar pada media query tertentu. Dengan begitu ini akan membuat tampilan-nya menjadi lebih baik lagi. Silahkan tambahkan kode CSS dibawah ini.

@media only screen and (max-width:768px){ #id-sticky-sidebar{width:100%;max-width:100%}}


Jika pada template yang sedang Sobat gunakan saat ini sudah terdapat kode @media only screen and (max-width:768px){ maka Sobat tidak perlu menambahkan kode tersebut. Cukup dengan menambahkan kode #sticky-sidebar{width:100%;max-width:100%}} saja di bawahnya. Jika sudah simpan template Sobat dan lihat hasilnya.

Cara Membuat Sticky Widget di Sidebar Versi Panduan Blog

1. Login ke blogger > masuk ke menu template/tema > klik Edit HTML > cari kode </body> dan tambahkan kode berikut ini tepat di bawahnya.

<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'> <script type='text/javascript'> //<![CDATA[ // Widget Sticky versi panduan blog $(function(){if($("#HTML1").length){var o=$("#HTML1"),t=$("#HTML1").offset().top,i=$("#HTML1").height();$(window).scroll(function(){var s=$("#comments").offset().top-i-20,f=$(window).scrollTop();if(f>t?o.css({position:"fixed",top:15}):o.css("position","static"),f>s){var n=s-f;o.css({top:n})}})}}); //]]> </script> </b:if>


2. Ubah #HTML1 dengan id widget yang ingin dijadikan sticky. Setelah itu sesuaikan jarak widget dengan mengganti angka 15 pada kode di atas. Untuk menemukan id widget caranya buka menu tata letak di dashboard blogger Sobat > klik edit pada widget yang akan di jadikan sticky > nah pada alamat widget tersebut terdapat id widget-nya. Setelah itu cari kode </b:skin> pada template Sobat, lalu tambahkan kode berikut ini tepat di bawahnya.

#HTML1{width:100%;max-width:250px}


3. Ubah #HMTL1 dengan id widget seperti pada langkah pertama. Lalu ubah max-width pada kode di atas untuk mengatur panjang widget sesuai keinginan Sobat. Jika sudah selesai silahkan klik simpan tema dan lihat hasilnya.

Cara Membuat Sticky Widget di Sidebar Blog Versi Indravedia

1. Login terlebih dahulu ke akun blogger
2. Masuk ke dashboard > buka menu tema/template > klik edit HTML
3. Letakkan kode di bawah ini tepat di atas kode ]]></b:skin>

.sticky {   position:fixed;   top:10px;   z-index: 100; }


4. Letakkan kode di bawah ini tepat di atas kode </body>

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


5. Ubah tulisan #HTML1 dengan id widget yang akan dijadikan sticky
6. Klik simpan tema dan lihat hasilnya Nah itulah beberapa cara yang bisa Sobat pilih salah satu untuk membuat sticky widget di sidebar blog.

Cara-cara di atas cocok untuk Sobat yang ingin membuat widget-widget tertentu seperti facebook fanpage, related post, dan lain sebagainya agar selalu terlihat ketika halaman di scroll. Dengan begini widget-widget yang terdapat di sidebar pada tampilan blog Sobat akan semakin menarik dan terlihat lebih rapih. Semoga bermanfaat tutorial dari blog.sepokat.my.id ini.