Floating Sidebar Widget

Sore All
Floating artinya mengambang dan Sticky artinya nempel/menempel sedangkan Sidebar tentu sobat sudah tahu artinya . Pada kesempatan ini saya akan share tutorial membuat Floating " Sticky " Sidebar , berarti widget sidebar akan terus mengikuti walaupun di scroll kebawah dan tutorial ini sebenarnya request dari sahabat.


Untuk demo sticky widget sidebar sobat bisa lihat  widget Subscribe pada homepage blog ini dan pemasangan trik ini cukup mudah 

Sobat pasang dulu widget subscribe pada blog sobat dan letakan pada bagian sidebar paling atas. Setelah itu sobat masuk pada Edit Template lalu cari kode </body> dan tempatkan kode dibawah ini tepat diatas kode </body> 

<script>
/*<![CDATA[*/
// Sticky Plugin
// =============
// Author: Syed Faizan Ali
(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 selanjutnya sobat cari nama ID widget subscribe yang telah dipasang tadi contohnya widget yang saya punya seperti ini

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

dan sobat ganti semua kodenya  dengan kode dibawah ini

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


NB : Kode HTML32 sobat ganti dengan ID widget subscribe sobat dan nama "My Sticky Gadget" sobat ganti sesuka sobat.

Save dan lihat hasilnya

Note : Widget Floating "Sticky" Sidebar ini jangan sobat pasang pada widget adsense , karena ini salah satu alasan akun adsense sobat akan di banned.

15 komentar

saya msh ndak paham nih... nyimak dulu sambil nunggu komentar yg lain

Naon ieuteh bro,asa lieur keneh,karek hudang euy heuheu

ini bagus sekaliiiiiiiii....
saya cari -cari dan tanya ama orang pada pelit semua
eh taunya di blog agan ada rupanya makasih ya gan... ini bagus buat iklan :D
..
terimakasih banyak... :)

#tiap hari mantau blog agan keren-keren tutornya :army

wah sangat mantap dan berguna sekali sobat
terima kasih sudah berbagi

ini mbak.. yang di sidebar blog ini.. kan subcrisbenya bisa jalan ngikutin scroll kebawah

pertanyaanku ternyata terbalas lewat postingan lagi haha..

banyak jga kodenya,, kirain cuma nambahin kode di widget .

artinya apa kang.. -__-

wah keren nih layak dicoba, thank mas udah berbagi

maap nembe bisa blogging hehheeee

makasih miz telah menjelaskan hehe

apaan ini brow , masih pusing , maklum baru bangun oy ( translate )

ko pelit ya hehe
tapi jangn buat iklan adsense bisa bisa di banned sob ..
terimakasih kembali sobat

terimakasih sanjungannya mas jdi malu hixhix

udah dua postingan idenya dari pertanyaan miz tia terus hehe
tapi gak bakalan berat ko blognya .. lagian juga gampang masangnya miz

silahkan kang .. apalagi masangnya sambil ngabajigur matapzzzz kang ..
sumpah kang saya mah lagi ngabakar ikan hiu hehe

mantap sekali artikel nya sob,,,saya nyari2 yang kayak gini emank
kunjungi juga blog saya
disini sob!!