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.

Membuat widget sticky tanpa mencari id widget. Widget akan otomatis melayang/menempel/sticky di sidebar blog. Tanpa ribet mudah dengan script dan css.

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.

Subscribe to receive free email updates:

8 Responses to "Cara Membuat Sticky Widget Otomatis Di Blogger - Widget Melayang Dengan Javascript"

  1. Replies
    1. Templatenya belum support buktinya di blog saya work scriptnya

      Delete
    2. evo magz gan template premium,tertarik dengan templatenya bisa hubungi saya.

      Delete
  2. Replies
    1. gagal bagaimana mas, ini masih work lho di blog ini. Ubah dulu kode sesuaikan dengan template mu

      Delete
  3. Gagal juga bro. Ente kurang spesifik menjelaskannya.
    Sesuaikan ID Widget, bagian mananya? Itu javascript-nya panjang ke kanan, backgroundnya gelap, sakit mati. Selamat belajar ngeblog lagi.

    ReplyDelete

Jangan ada link aktif di komentar karena komentar anda di moderasi!