Cara Membuat Widget Sidebar Blogger Tetap Muncul Melayang Saat Discroll

Cara Membuat Widget Sidebar Blogger Tetap Muncul Melayang Saat Discroll

Melengkapi tips Cara Membuat Menu Navigasi Blog Tetap Muncul 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.

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 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!!

susah? mending gak usah dipasang 😁😁
WARNING! !

Membuat Widget Sidebar Blogger Tetap Muncul Melayang Saat Discroll hanya akan memperlambat loading blog Anda. Apalagi kodenya jQuery.
SEMOGA BERMANFAAT!!