Cara Membuat Sticky di Samping Laman Blog

Tutorial kali ini tentang Cara Membuat Sticky di Samping Laman Blog. Secara otomatis widget yang akan kita edit (Sticky) akan tampil walaupu...

Tutorial kali ini tentang Cara Membuat Sticky di Samping Laman Blog. Secara otomatis widget yang akan kita edit (Sticky) akan tampil walaupun pengunjung sudah melanjutkan scroll ke bawah. Silahkan di coba aja dech, yang pasti hasilnya akan terlihat keren.

Login to Blogger Dashboard.

Klik Template >> Edit HTML >> dan cari kode </body>, copy kode di bawah ini dan pastekan tepat di atas </body> Tag.

<script>
/*<![CDATA[*/
// Sticky Plugin
// =============
// Author: Muhammad Iqbal
(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>
<script type='text/javascript'>
  $(document).ready(function(){
    $("#mdbfloater").sticky({topSpacing:0});
  });
 </script>

Temukan ID widget sobat yang akan di tampilkan.

Selanjutnya gunakan CTRL+F untuk menemukan HTML 13 (kode widget).

<b:widget id='HTML13' locked='false' title='Follow and Subscribe' 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> Perubahannya akan seperti kode di bawah ini. <b:widget id='HTML13' locked='false' title='Follow and Subscribe' type='HTML'>
<b:includable id='main'>
<div id='mdbfloater'>
    <!-- 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>

Catatan : Tambahkan <div id='mdbfloater'> di bawah <b:includable id='main'> dan jangan lupa menambahkan kode </div> di bawah <data:content/>