Cara Membuat Sidebar Blogger Menjadi Sticky (Melayang) ~ mekz

27 Maret 2014

Dalam ulasan kali ini saya akan berbagi sebuah tips kepada teman-teman blogger khususnya blogger dengan platform blogspot atau lebih familiar teman-teman menyebutnya dengan sebutan blogger.

Tips kali ini adalah tentang bagaimana membuat widget pada sidebar blogger kalian menjadi sticky / floating atau dengan bahasa indonesia kita menyebutnya melayang, sehingga terus-terusan terlihat pada bagian sidebar meskipun pengguna scroll down laman blog hingga ke bagian paling bawah sekalipun.

Agar tidak bingung silahkan teman-teman lihat pada blog DEMO yang sudah saya sediakan di bawah ini. Pada blog tersebut bisa teman-teman lihat widget dengan judul "Komunitas" di kanan bawah terus-terusan melayang alias sticky ketika laman di scroll ke bawah. Kurang lebih dalam ulasan kali ini trik seperti itulah yang akan saya bahas.

DEMO

Langkah 1

Silahkan teman-teman menambahkan widget baru terlebih dahulu. Masuk ke menu Tata Letak → Add a Gadget → Add HTML/JavaScript → beri nama widget tersebut "Komunitas" (contoh saja) dan silahkan di Save. Dalam hal ini kemudian widget dengan nama "Komunitas" itulah yang akan kita buat menjadi sticky atau melayang.

Langkah 2

Silahkan teman-teman masuk ke menu Template → Edit/HTML kemudian dengan menggunakan CTRL + F carilah kode </body> dan taruh semua kode di bawah ini tepat di atas kode tersebut.

<script>
/*<![CDATA[*/
// Sticky Plugin
// ================
// www.thesigit.net
(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(){
    $("#mblfloater").sticky({topSpacing:0});
   });
 </script>

Langkah 3

Setelah menambahkan kode javascript sekarang waktunya membuat widget tersebut menjadi sticky. Masih di menu Edit/HTML dengan menggunakan CTRL+F silahkan kamu cari judul widget yang ingin kamu buat sticky tadi. Sebagai contoh tadi kita membuat widget dengan nama "Komunitas". Setelah mendapatkan kode widget tersebut, biasanya akan terlihat seperti di bawah ini.

<b:widget id='HTML32' locked='false' title='Komunitas' 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>

Setelah menemukan kode dari widget milikmu, silahkan kamu tambahkan dua baris kode berikut, sehingga nantinya akan menjadi seperti di bawah ini.

<b:widget id='HTML32' locked='false' title='Komunitas' type='HTML'>
            <b:includable id='main'>
<div id='mblfloater'>
  <!-- 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>

Perhatikan dengan seksama agar tidak ada yang terlewat. Pada dasarnya teman-teman hanya tinggal menambahkan kode <div id='mblfloater'> dan kemudian di tutup kembali oleh tag </div> tepat sebelum atau di atas tag </b:includable>.

Kembali saya ingatkan untuk teman-teman perhatikan kode <div id='mblfloater'> dan tag penutupnya </div> di atas </b:includable> dengan seksama.

Setelah semua step di atas kalian ikuti dengan benar, silahkan langsung saja kamu "Save Template" dan lihat hasilnya pada Template Blogger milikmu.

Bagaimana kawan, ada yang sudah berhasil membuat widgetnya menjadi sticky? Apabila masih ada yang merasa kesulitan dan kebingungan dalam menggunakan tips ini, silahkan teman-teman diskusikan dengan saya melalui kotak komentar yang ada di bawah. Semoga ulasan saya kali ini bermanfaat.

mekz