Cara Membuat Widget Sidebar Blogger Tetap Muncul Melayang Saat Discroll 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 Saat Halaman Discroll, kali ini CB share instruksi dan cara menciptakan widget sidebar tetap muncul, statis, ketika halaman digeser ke bawah.

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

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

1. Tema >  Edit HTML
2. Simpan instruksi berikut ini di atas instruksi </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 instruksi berikut ini di atas kode </body> 

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

4. Simpan instruksi berikut ini di atas instruksi ]]></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.
Cara Membuat Widget Sidebar Blogger Tetap Muncul Melayang Saat Discroll Cara Membuat Widget Sidebar Blogger Tetap Muncul Melayang Saat Discroll


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 instruksi berikut ini di bawah instruksi <b:includable id=’main’>

<div id="mdstickybar">

9. Masukkan instruksi </div> sesudah instruksi <data:content/>

Jadinya ibarat 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 instruksi ]]></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 instruksi </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!

Demikian cara menciptakan Static Fixed Sticky Sidebar Widget - Tetap Muncul Melayang Saat Discroll.

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.idtutorial.com).*

Share To:

Endo Sadewa

Post A Comment:

0 comments so far,add yours