Panduan Cara Membuat Sticky Sidebar di Blogger Agar Widget Melayang

Panduan Cara Membuat Sticky Sidebar di Blogger Agar Widget Melayang
Tujuan dan Fungsi dengan membuat Sticky Sidebar di Blogger agar widget tertentu tetap mengikuti ketika pengunjung menggeser halaman ke bawah dan atas, biasanya widget melayang ini seperti di navigasi Popular Post, Label dan Recent Post. Hal ini bertujuan untuk memudahkan pengunjung untuk menjangkau navigasi meskipun sudah mengeser di akhir postingan Blognya.

Membuat Sticky Widget ini cukup efektif untuk meningkatkan dan menarik pengunjung untuk membaca dari widget Popular Post. Karena Ketika sobat sudah memasang fitur sticky pada bagian tertentu, maka secara otomatis Widget akan melayang di Blog milik sobat.

Fitur Sticky bisa tidak hanya bisa digunakan untuk widget sidebar saja, tetapi templatedi tahun 2019 yang sudah responsive seperti template dari igniel, kompiajaib, arlina dan El Creative Theme sekarang sudah menggunakan sticky Header baik di device smartphone maupun dekstop.

Cara Membuat Sticky Widget Sidebar di Blogspot

Fitur Sticky ini sudah di lengkapi dengan tag kondisional Mobile, agar fitur sticky ini tidak aktif ketika pengunjung membuka blog sobat dengan smartphone
1. Login akun Blogger
2. Masuk ke Menu Tema dan buka Edit HTML
3. Copy javascript dibawah ini dan Paste kan di sebelum </body>
<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
<script type='text/javascript'>
//<![CDATA[
// Sticky widget Sidebar di Blogger
$(function(){if($("#WidgetSticky").length){var o=$("#WidgetSticky"),t=$("#WidgetSticky").offset().top,i=$("#WidgetSticky").height();$(window).scroll(function(){var s=$("#StopSticky").offset().top-i-20,f=$(window).scrollTop();if(f>t?o.css({position:"fixed",top:20}):o.css("position","static"),f>s){var n=s-f;o.css({top:n})}})}});
//]]>
</script>
</b:if> 
Pada javascript diatas, sesuaikan beberapa bagian javascript berikut :
WidgetSticky : Ganti dengan ID widget di sidebar yang akan ditambahkan fitur Sticky atau Melayang (Terdapat 4 widgetsticky dan gantilah semuanya)
StopSticky : Ganti dengan ID untuk batas fitur sticky akan berhenti seperti ID footer, comment atau Related Post.
20 : Sesuaikan nilai tersebut untuk memberikan jarak akan aktif nya sticky.
Untuk sobat yang belum mengetahui ID widget tanpa harus mencarinya satu per satu di Template atau Inspect Element :
  • Buka Menu Tata Letak
  • Buka Widget di Sidebar yang sudah dibuat dan akan di jadikan Sticky
  • Carilah ID Widget seperti gambar berikut :
Panduan Cara Membuat Sticky Sidebar di Blogger Agar Widget Melayang 2
Mendapatkan ID Widget Sticky

Jika sudah mendapatkan ID Widget dan sudah pastekan di Javascript Sticky. Sobat juga harus menambahkan css berikut agar widget sidebar yang dijadikan sticky tidak berantakan atau ukuran tidak sesuai.
4. Copy CSS dibawah dan Paste sebelum </b:skin>
#widgetsticky{width:100%;max-widht:300px}
widgetsticky : Ganti dengan ID widget yang sudah di tambahkan fitur sticky (Catatan Langkah ke 3).
300px : Sesuaikan dengan mengatur ukuran Widget sampai sesuai.
5. Klik Simpan Tema

Coba lakukan pertinjauan Blog untuk melihat apakah berhasil atau tidak membuat sticky widget di sidebar atau membuat widget menjadi melayang. Jika tidak berhasil, cobalah mengecek ID Widget yang di javascript sticky sudah benar atau belum.

Demikian postingan mengenai "Panduan Cara Membuat Sticky Sidebar di Blogger Agar Widget Melayang" semoga dapat membantu sobat untuk membuat widget melayang di sidebar blog.

Artikel Terkait

0Comments

Previous Post Next Post