Cara Memasang Fungsi Sticky Widget di Blog

ada kesempatan kali Saya akan berbagi Tips tentang Cara Memasang Fungsi Sticky Widget di Blog, funsi dari sticky pada widget ini berguna bagi kalian yang menginginkan sebuah widget pada blog agar bisa melayang mengikuti halaman saat diguliran ke bawah dan akan kembali ke posisi semula saat halaman digulirkan keatas.

Sudah jelaskan bagaimana tampilan Sticky Widget ini? Biasanya Sticky Widget dipasang pada Sidebar bagian bawah. Karena jika dipasang pada sidebar bagian atas, hasilnya akan bertabrakan pada widget-widget lainnya. Sangat berguna jika dipasang widget-widget sosial seperti rekomendasi situs Google +1, Tombol Like / Like Box Facebook, dll. Dan Sticky Widget ini tidak akan mengganggu pandangan pengunjung Blog sobat, tidak seperti halnya Widget Melayang.

Bagaimana, sobat tertarik untuk memasang Sticky Widget ini pada Blog sobat? Untuk sobat yang ingin memasangnya, silakan simak langkah-langkah yang akan saya jelaskan dengan teliti, karena memang menurut saya pembuatnya agak rumit. OK, kita mulai penerapannya.

Cara Memasang Fungsi Sticky Widget di Blog

CARA 1 (sticky widget hanya di sidebar)
1. Buka Blogger > Klik Template > Edit HTML > Salin dan terapkan kode di bawah ini tepat sebelum </body>
Sebagai contoh widget yang akan dibuat sticky adalah widget dengan ID #HTML1

<script type='text/javascript'>//<![CDATA[// Sticky $(function(){if($("#HTML1").length){var o=$("#HTML1"),t=$("#HTML1").offset().top,i=$("#HTML1").height();$(window).scroll(function(){var s=$("#footer").offset().top-i-70,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>

#HTML1 : ID dari konten atau widget yang akan dibuat sticky
#footer : Tentukan ID untuk membatasi fungsi sticky
position:"fixed",top:20 : Jarak atau margin sticky dari atas

2. Selanjutnya simpan kode di bawah ini sebelum ]]></b:skin> atau </style>
Silakan atur kode di atas sesuai selera.

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

Tentukan lebar sesuai dengan lebar sidebar dari template yang sobat gunakan dan jangan lupa untuk mengganti lebar pada media query tertentu, contoh :

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

3. Simpan template dan lihat hasilnya.

Demo

CARA 2 (sticky widget sidebar dan navigation)
1. Buka Blogger > Klik Template > Edit HTML > Salin dan terapkan kode di bawah ini tepat sebelum </body>
Sebagai contoh widget yang akan dibuat Sticky Sidebar dan Site Navigation adalah widget sidebar dengan ID #HTML1 dan Site Navigation dengan ID #menu

<script type='text/javascript'>//<![CDATA[// Sticky Site Navigation$(document).ready(function() { var stickyNavTop = $('#menu').offset().top; var stickyNav = function(){ var scrollTop = $(window).scrollTop(); if (scrollTop > stickyNavTop) { $('#menu').css({ 'position': 'fixed', 'top':0, 'z-index':999 }); } else { $('#menu').css({ 'position': 'relative' }); } }; stickyNav(); $(window).scroll(function() { stickyNav(); }); });// Sticky $(function(){if($("#HTML1").length){var o=$("#HTML1"),t=$("#HTML1").offset().top,i=$("#HTML1").height();$(window).scroll(function(){var s=$("#footer").offset().top-i-70,f=$(window).scrollTop();if(f>t?o.css({position:"fixed",top:70}):o.css("position","static"),f>s){var n=s-f;o.css({top:n})}})}});//]]></script>

#menu : ID dari konten Site Navigation yang akan dibuat sticky
#HTML1 : ID dari konten atau widget Sidebar yang akan dibuat sticky
#footer : Tentukan ID untuk membatasi fungsi sticky
position:"fixed",top:20 : Jarak atau margin sticky dari atas

2. Selanjutnya simpan kode di bawah ini sebelum ]]></b:skin> atau </style>
Silakan atur kode di atas sesuai selera.

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

Tentukan lebar sesuai dengan lebar sidebar dari template yang sobat gunakan dan jangan lupa untuk mengganti lebar pada media query tertentu, contoh :

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

3. Simpan template dan lihat hasilnya.

Demo Aja

Updated at: May 03, 2017