Cara Membuat Sticky Widget Otomatis Di Blogger - Widget Melayang Dengan Javascript

Bagi kalian yang menginginkan supaya sidebar anda tetap terisi pasti mencari artikel seperti ini. Supaya sidebar tidak kosong ketika di scroll kebawah ada 2 opsi yaitu mengisi penuh sidebar dengan widget atau memasang fitur sticky widget di blog. Untuk opsi yang pertama mungkin memiliki efek samping yaitu loading menjadi lama serta membuat blog terkesan tidak rapi dengan banyaknya widget.

Opsi kedua jauh lebih cocok untuk dipakai. Walaupun widget di sidebar anda hanya ada 2 tetapi jika di scroll kebawah widget akan ikut turun dan menempel di sidebar jadi sidebar akan tetap terisi dan tidak kosong. Sticky widget lebih cocok untuk digunakan pada widget iklan 300x600 untuk meningkatkan CTR.

Widget Tidak Bisa Sticky

Namun biasanya blogger mengalami kesulitan dalam menerapkan sticky di widget mereka sehingga membuat widget yang melayang tidak sesuai dengan keinginan atau widget sudah berhasil melayang tapi menabrak widget lain,header,dan footer. Kesalahan tersebut biasanya terjadi karena kesalahan script dan salah dalam menambahkan id.

Tapi untuk script widget sticky yang akan saya bagikan ini anda tidak perlu repot-repot untuk mencari dan menentukan ID widget yang ingin dibuat sticky karena sudah akan secara otomatis. Dengan cara ini semua widget yang ada disidebar akan dibuat sticky.

Serta script ini tidak bekerja di mobile device jadi jika anda pengunjung yang membuka blog anda dengan mobile maka widget tidak akan sticky dan error. Tidak seperti script lain yang membuat widget di mobile ikut sticky sehingga malah tidak bisa scroll down sampai footer.Untuk demo anda bisa melihat blog saya ini karena saya sudah menerapkan scriptnya di blog ini juga.

Cara Memasang Widget  Sticky/Melayang

Langkah 1
Silakan anda buka blogger,pilih Template → Edit HTML. Lalu cari kode </body>

Langkah 2
Salin kode script widget stickynya dibawah ini lalu letakkan/paste diatas kode </body> 

<script type="text/javascript">
//<![CDATA[
// Theia Sticky Sidebar | v1.3.0 - https://github.com/WeCodePixels/theia-sticky-sidebar
!function(i){i.fn.theiaStickySidebar=function(t){function o(t,o){var a=e(t,o);a||(console.log("TST: Body width smaller than options.minWidth. Init is delayed."),i(document).scroll(function(t,o){return function(a){var n=e(t,o);n&&i(this).unbind(a)}}(t,o)),i(window).resize(function(t,o){return function(a){var n=e(t,o);n&&i(this).unbind(a)}}(t,o)))}function e(t,o){return t.initialized===!0?!0:i("body").width()<t.minWidth?!1:(a(t,o),!0)}function a(t,o){t.initialized=!0,i("head").append(i('<style>.theiaStickySidebar:after {content: ""; display: table; clear: both;}</style>')),o.each(function(){function o(){a.fixedScrollTop=0,a.sidebar.css({"min-height":"1px"}),a.stickySidebar.css({position:"static",width:""})}function e(t){var o=t.height();return t.children().each(function(){o=Math.max(o,i(this).height())}),o}var a={};a.sidebar=i(this),a.options=t||{},a.container=i(a.options.containerSelector),0==a.container.size()&&(a.container=a.sidebar.parent()),a.sidebar.parents().css("-webkit-transform","none"),a.sidebar.css({position:"relative",overflow:"visible","-webkit-box-sizing":"border-box","-moz-box-sizing":"border-box","box-sizing":"border-box"}),a.stickySidebar=a.sidebar.find(".theiaStickySidebar"),0==a.stickySidebar.length&&(a.sidebar.find("script").remove(),a.stickySidebar=i("<div>
").addClass("theiaStickySidebar").append(a.sidebar.children()),a.sidebar.append(a.stickySidebar)),a.marginTop=parseInt(a.sidebar.css("margin-top")),a.marginBottom=parseInt(a.sidebar.css("margin-bottom")),a.paddingTop=parseInt(a.sidebar.css("padding-top")),a.paddingBottom=parseInt(a.sidebar.css("padding-bottom"));var n=a.stickySidebar.offset().top,d=a.stickySidebar.outerHeight();a.stickySidebar.css("padding-top",1),a.stickySidebar.css("padding-bottom",6),n-=a.stickySidebar.offset().top,d=a.stickySidebar.outerHeight()-d-n,0==n?(a.stickySidebar.css("padding-top",0),a.stickySidebarPaddingTop=0):a.stickySidebarPaddingTop=1,0==d?(a.stickySidebar.css("padding-bottom",0),a.stickySidebarPaddingBottom=0):a.stickySidebarPaddingBottom=1,a.previousScrollTop=null,a.fixedScrollTop=0,o(),a.onScroll=function(a){if(a.stickySidebar.is(":visible")){if(i("body").width()<a.options.minWidth)return void o();if(a.sidebar.outerWidth(!0)+50>a.container.width())return void o();var n=i(document).scrollTop(),d="static";if(n>=a.container.offset().top+(a.paddingTop+a.marginTop-a.options.additionalMarginTop)){var r,s=a.paddingTop+a.marginTop+t.additionalMarginTop,c=a.paddingBottom+a.marginBottom+t.additionalMarginBottom,p=a.container.offset().top,b=a.container.offset().top+e(a.container),g=0+t.additionalMarginTop,l=a.stickySidebar.outerHeight()+s+c<i(window).height();r=l?g+a.stickySidebar.outerHeight():i(window).height()-a.marginBottom-a.paddingBottom-t.additionalMarginBottom;var h=p-n+a.paddingTop+a.marginTop,f=b-n-a.paddingBottom-a.marginBottom,S=a.stickySidebar.offset().top-n,u=a.previousScrollTop-n;"fixed"==a.stickySidebar.css("position")&&"modern"==a.options.sidebarBehavior&&(S+=u),"legacy"==a.options.sidebarBehavior&&(S=r-a.stickySidebar.outerHeight(),S=Math.max(S,r-a.stickySidebar.outerHeight())),S=u>0?Math.min(S,g):Math.max(S,r-a.stickySidebar.outerHeight()),S=Math.max(S,h),S=Math.min(S,f-a.stickySidebar.outerHeight());var m=a.container.height()==a.stickySidebar.outerHeight();d=(m||S!=g)&&(m||S!=r-a.stickySidebar.outerHeight())?n+S-a.sidebar.offset().top-a.paddingTop<=t.additionalMarginTop?"static":"absolute":"fixed"}if("fixed"==d)a.stickySidebar.css({position:"fixed",width:a.sidebar.width(),top:S,left:a.sidebar.offset().left+parseInt(a.sidebar.css("padding-left"))});else if("absolute"==d){var y={};"absolute"!=a.stickySidebar.css("position")&&(y.position="absolute",y.top=n+S-a.sidebar.offset().top-a.stickySidebarPaddingTop-a.stickySidebarPaddingBottom),y.width=a.sidebar.width(),y.left="",a.stickySidebar.css(y)}else"static"==d&&o();"static"!=d&&1==a.options.updateSidebarHeight&&a.sidebar.css({"min-height":a.stickySidebar.outerHeight()+a.stickySidebar.offset().top-a.sidebar.offset().top+a.paddingBottom}),a.previousScrollTop=n}},a.onScroll(a),i(document).scroll(function(i){return function(){i.onScroll(i)}}(a)),i(window).resize(function(i){return function(){i.stickySidebar.css({position:"static"}),i.onScroll(i)}}(a))})}var n={containerSelector:"",additionalMarginTop:0,additionalMarginBottom:0,updateSidebarHeight:!0,minWidth:0,sidebarBehavior:"modern"};t=i.extend(n,t),t.additionalMarginTop=parseInt(t.additionalMarginTop)||0,t.additionalMarginBottom=parseInt(t.additionalMarginBottom)||0,o(t,this)}}(jQuery);
//]]>
</script>

              <script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
if ($(window).width() > 1120) {      
$("#main-wrapper, #sidebar-wrapper").theiaStickySidebar({
additionalMarginTop: 5,
additionalMarginBottom: 5
});  
}
}); 
//]]>
</script>

 <script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
if ($(window).width() > 1120) {      
$("#main-wrapper, #sidebar-wrapper").theiaStickySidebar({
additionalMarginTop: 5,
additionalMarginBottom: 5
});  
}
}); 
//]]>
</script>

lalu simpan template dan lihat hasilnya.

Bagaimana hasilnya? Anda bisa mengatur sesuai keinginan anda bisa ubah margin dan padding tapi saran saya jangan diuprek-uprek nanti malah hancur. Jika kalian merasa terbantu dengan artikel ini bisa meninggalkan sesuatu yang indah di kolom komentar. Sampai jumpa.