Cara Membuat Widget Sidebar Blogger Tetap Muncul Melayang Saat Discroll

Baca Juga

Cara Membuat Widget Sidebar Blogger Tetap Muncul Melayang Saat Discroll -Sticky Sidebar, Static Sidebar, Floating Sidedar, FixedSidebar.

Melengkapi tips Cara Membuat Menu Navigasi Blog Tetap Muncul Saat Halaman Discroll, kali ini CB share kode dan cara membuat widget sidebar tetap muncul, statis, saat halaman digeser ke bawah.

Istilahnya banyak: Static, Fixed, Sticky, dan Floating Sidebar Widget. Artinya sama: widget tetap muncul alias melayang saat halaman discroll ke bawah.

Elemen ini penting untuk menampilkan widget ungulan di sidebar blog. Juga untuk kerapian tampilan jika sidebar sedikit atau banyak widget, sehingga tetap sejajar dengan Main Wrapper atau kolom utama blog (postingan).

Cara Membuat Widget Sidebar Blogger Tetap Muncul 

Langsung saja kita ke tutorial pemasangan kodenya sebagaimana dishare laman Making Different berikut ini.

1. Tema >  Edit HTML
2. Simpan kode berikut ini di atas kode </head>

<script type='text/javascript'>
/*<![CDATA[*/
(function($) {
var defaults = {
topSpacing: 0,
bottomSpacing: 0,
className: 'is-sticky',
center: false
},
$window = $(window),
$document = $(document),
sticked = [],
windowHeight = $window.height(),
scroller = function() {
var scrollTop = $window.scrollTop(),
documentHeight = $document.height(),
dwh = documentHeight - windowHeight,
extra = (scrollTop > dwh) ? dwh - scrollTop : 0;
for (var i = 0; i < sticked.length; i++) {
var s = sticked[i],
elementTop = s.stickyWrapper.offset().top,
etse = elementTop - s.topSpacing - extra;
if (scrollTop <= etse) {
if (s.currentTop !== null) {
s.stickyElement.css('position', '').css('top', '').removeClass(s.className);
s.currentTop = null;
}
}
else {
var newTop = documentHeight - s.elementHeight - s.topSpacing - s.bottomSpacing - scrollTop - extra;
if (newTop < 0) {
newTop = newTop + s.topSpacing;
} else {
newTop = s.topSpacing;
}
if (s.currentTop != newTop) {
s.stickyElement.css('position', 'fixed').css('top', newTop).addClass(s.className);
s.currentTop = newTop;
}
}
}
},
resizer = function() {
windowHeight = $window.height();
};
// should be more efficient than using $window.scroll(scroller) and $window.resize(resizer):
if (window.addEventListener) {
window.addEventListener('scroll', scroller, false);
window.addEventListener('resize', resizer, false);
} else if (window.attachEvent) {
window.attachEvent('onscroll', scroller);
window.attachEvent('onresize', resizer);
}
$.fn.sticky = function(options) {
var o = $.extend(defaults, options);
return this.each(function() {
var stickyElement = $(this);
if (o.center)
var centerElement = "margin-left:auto;margin-right:auto;";
stickyId = stickyElement.attr('id');
stickyElement
.wrapAll('<div id="' + stickyId + 'StickyWrapper" style="' + centerElement + '"></div>')
.css('width', stickyElement.width());
var elementHeight = stickyElement.outerHeight(),
stickyWrapper = stickyElement.parent();
stickyWrapper
.css('width', stickyElement.outerWidth())
.css('height', elementHeight)
.css('clear', stickyElement.css('clear'));
sticked.push({
topSpacing: o.topSpacing,
bottomSpacing: o.bottomSpacing,
stickyElement: stickyElement,
currentTop: null,
stickyWrapper: stickyWrapper,
elementHeight: elementHeight,
className: o.className
});
});
};
})(jQuery);
/*]]>*/
</script>

3. Copas kode berikut ini di atas kode </body> 

<script type='text/javascript'>
$(document).ready(function(){
$(&quot;#mdstickybar&quot;).sticky({topSpacing:0});
});
</script>

4. Simpan kode berikut ini di atas kode ]]></b:skin> 

#mdstickybar {background-color:#ECEEF5;padding-top:10px;width:300px!important;padding-bottom:15px;color:#474747;}

Save Template!

5. Pasang Static Sidebar Widget

• Layout > Pilih Widget yang akan dijasikan tatis atau melayang
• Klik "Edit"
• Copy ID Widget nya di address bar.

6. Kembali klik Template > Edit HTML
7. Press CTRL + F untuk menemukan Widget ID yang akan distatiskan.

Misalnya:

<b:widget id='HTML1' locked='false' title='Widget Title' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

8. Copas kode berikut ini di bawah kode <b:includable id=’main’>

<div id="mdstickybar">

9. Masukkan kode </div> setelah kode <data:content/>

Jadinya seperti ini:

<b:widget id='HTML1' locked='false' title='Widget Title' type='HTML'>
<b:includable id='main'>
<div id="mdstickybar">
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Save!

Cara #2 Pasang Sticky Sidebar 

Cara lain memasang Static Fixed Sticky Sidebar Widget - Tetap Muncul Melayang Saat Discroll.

Kode CSS
Simpan di atas kode ]]></b:skin>

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

Kode JS
Simpan di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
$(function() {
  if ($('#sticky-sidebar').length) { // Ganti "#sticky-sidebar" dengan ID Widget yang akan distatiskan
    var el = $('#sticky-sidebar');
    var stickyTop = $('#sticky-sidebar').offset().top;
    var stickyHeight = $('#sticky-sidebar').height();
    $(window).scroll(function() {
      var limit = $('#footer-wrapper').offset().top - stickyHeight - 20; // Jarak berhenti di "#footer-wrapper"
      var windowTop = $(window).scrollTop();
      if (stickyTop < windowTop) {
        el.css({
          position: 'fixed',
          top: 20 // Jarak atau margin sticky dari atas
        });
      } else {
        el.css('position', 'static');
      }
      if (limit < windowTop) {
        var diff = limit - windowTop;
        el.css({
          top: diff
        });
      }
    });
  }
});
//]]>
</script>

Save!

Cara #3 Pasang Sticky Sidebar (Recommended)

1. Klik Layout dan hapus SEMUA widget yang sudah dipasang. Jika ada kode, amankan dulu kodenya untuk nanti dipasangkan lagi.
2. Klik Tema > Edit HTML
3. Hapus dan ganti kode  <aside id='sidebar-wrapper'> .. </aside> atau  <div id='sidebar-wrapper'> ... </div> dengan kode di bawah ini:

<aside id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar_top' mobile='yes' preferred='yes'/>
        <b:section class='sidebar' id='sidebar_bottom' mobile='yes' preferred='yes'/>
</aside>

Kode di atas akan menjadikan elemen sidebar menjadi dua bagian, yakni sidebar atas (sidebar_top) dan sidebar bawah (sidebat_bottom). Nah, yang bawah inilah yang akan menjadi sticky widget!

4. Copas kode berikut ini di atas kode </body> atau kode &lt;!--</body>--&gt;&lt;/body&gt;

<script type='text/javascript'>
//<![CDATA[
// Theia Sticky Sidebar v1.3.0 - https://github.com/WeCodePixels/theia-sticky-sidebar
// Tutorial: https://goo.gl/szhFRE
!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.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",1),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);
$(document).ready(function(){$("#sidebar-wrapper").theiaStickySidebar({additionalMarginTop:10,additionalMarginBottom:10})});
//]]>
</script>

5. Pastikan di template Anda sudah terpasang kode jQuery library. Contohnya yang seperti ini:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

Jika belum ada, pasang/copas kode tersebut di atas kode </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;

6. Agar Sticky Sidebar tidak berfungsi saat blog dibuka di HP, tambahkan kode berikut ini di atas kode ]]></b:skin>

@media screen and (max-width:768px){
#sidebar-wrapper{overflow:visible}
}

7. Save! Simpan perubahan template.

Demikian cara membuat Static Fixed Sticky Sidebar Widget - Tetap Muncul Melayang Saat Discroll ke bawah.

Susah? Mending gak usah pasang aja. Ojo neko-neko lah. Membuat Widget Sidebar Blogger Tetap Muncul Melayang Saat Discroll hanya akan memperlambat loading blog Anda. Apalagi kodenya jQuery.

Good Luck & Happy Blogging! (www.contohblog.com).*