Sticky Widget Sidebar Blogger

Sticky Widget Sidebar Blogger - Bagian widget sidebar atau sidebar itu sendiri menjadi float (mengapung) dengan menggunakan jQuery, orang menyebutnya dengan sticky widget sidebar, dalam hal ini bagian yang dipilih untuk menjadi sticky akan mengapung ketika layar discroll kebawah pada target ukuran tertentu.

Sticky widget sidebar ini tidak menggunakan CSS position, sehingga kita tidak perlu menambahkan ukuran widget sidebar, widget sidebar akan melayang setelah kita melakukan scrolling layar dan ukuran widget sidebar tidak mengalami perubahan baik panjang atau lebar.

Berbeda ketika kita menambahkan CSS position:fixed, setelah kita melakukan scrolling, ukuran widget sidebar akan berubah sesuai dengan id atau class widget tersebut.

Menurut saya pribadi, ini lebih baik dengan tidak adanya tambahan style CSS didalamnya, karena ukuran widget sidebar akan sesuai dengan ukuran sidebar itu sendiri, namun dalam hal ini tidak adanya animasi ketika scrolling.

Membuat Sticky Widget Sidebar

Bagaimana kita menerapkan sticky widget sidebar pada blogger? kalian bisa menggunakan script dibawah ini dan letakan script tersebut diatas </head> dan tentukan bagian widget sidebar yang akan kita buat menjadi melalayang mengikuti scroll layar

<script type="text/javascript">
//<![CDATA[
(function($) {
    var defaults = {
            topSpacing: 0,
            bottomSpacing: 0,
            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>

<script type="text/javascript">
   $(document).ready(function(){
    $("#iniwidgetyangdibuatmelayang").sticky({topSpacing:15});
   });
 </script>

Jika kita menambahkan widget pada sidebar dengan cara manual, kita bisa langsung mengganti tulisan #iniwidgetyangdibuatmelayang ini dengan id atau class pada widget tersebut.

Jika kita menambahkan script widget melalui Layout - Add Gadget, kita mesti sisipkan id atau class pada widget tersebut seperti contoh HTML dibawah, menginginkan widget bawaan blogger yang dijadikan sticky widget, kita sisipkan id atau class nya seperti kita menyisipkan tag kondisional pada widget tersebut.

HTML widget sebelum disisipkan id atau class:

<b:widget id='HTML5' locked='false' title='Sticky Widget Sidebar' 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:includable>
          </b:widget>

Sudah ditambahkan id atau class:

<b:widget id='HTML5' locked='false' title='Sticky Widget Sidebar' type='HTML'>
            <b:includable id='main'>
<div id='iniwidgetyangdibuatmelayang'>
  <!-- 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:includable>
          </b:widget>

Semoga mudah untuk dipahami dan bisa diterapkan pada blogger kalian.