"Alternative" Floating Sidebar

Pagi All
Beberapa waktu yang lalu saya memuat artikel tutorial tentang Floating Sidebar Widget , supaya sidebar bisa ikut kebawah ketika di scroll seperti pada homepage blog saya dan artikel itu di dedikasikan untuk pertanyaan salah satu komentar sahabat , yang menanyakan bagaimana caranya memasang  widget subscribe floating , setelah aku jelaskan tutorialnya , kata dia pemasangannya cukup rumit , tersirat di fikiranku yang dia maksud mungkin ingin pemasangan yang lebih mudah. 



Masuk pada edit template 
Cari kode </head>
Masukan kode dibawah ini sebelum kode </head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/
jquery.min.js"></script>

Save 
Sekarang sobat masuk pada Tata Letak > Add Gadget > HTML / Javascript 

<script type="text/javascript">
//<![CDATA[
(function($) {
    var defaults = {
            topSpacing: 0,
            bottomSpacing: 0,
            className: 'is-sticky',
            wrapperClassName: 'sticky-wrapper'
        },
        $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.stickyElement.parent().removeClass(s.className);
                        s.currentTop = null;
                    }
                }
                else {
                    var newTop = documentHeight - s.stickyElement.outerHeight()
                        - 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.stickyElement.parent().addClass(s.className);
                        s.currentTop = newTop;
                    }
                }
            }
        },
        resizer = function() {
            windowHeight = $window.height();
        },
        methods = {
            init: function(options) {
                var o = $.extend(defaults, options);
                return this.each(function() {
                    var stickyElement = $(this);
                    stickyId = stickyElement.attr('id');
                    wrapper = $('<div></div>')
                        .attr('id', stickyId + '-sticky-wrapper')
                        .addClass(o.wrapperClassName);
                    stickyElement.wrapAll(wrapper);
                    var stickyWrapper = stickyElement.parent();
                    stickyWrapper.css('height', stickyElement.outerHeight());
                    sticked.push({
                        topSpacing: o.topSpacing,
                        bottomSpacing: o.bottomSpacing,
                        stickyElement: stickyElement,
                        currentTop: null,
                        stickyWrapper: stickyWrapper,
                        className: o.className
                    });
                });
            },
            update: scroller
        };
    // 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(method) {
        if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === 'object' || !method ) {
            return methods.init.apply( this, arguments );
        } else {
            $.error('Method ' + method + ' does not exist on jQuery.sticky');
        }
    };
    $(function() {
        setTimeout(scroller, 0);
    });
})(jQuery);
//]]>
</script>
<script>
$(document).ready(function(){
$("#rbtSocialFloat").sticky({topSpacing:0});
$("#topside_box").sticky({topSpacing:6});
});
</script>
<div class="sticky-wrapper" id="topside_box-sticky-wrapper" style="height: 222px;text-align:center;"><div id="topside_box-sticky-wrapper" class="sticky-wrapper" style="height: 112px;"><div class="" id="topside_box" style="">
YOUR WIDGET CODE HERE</div></div></div>

Masukan kode widget / iklan sobat pada tulisan  "YOUR WIDGET CODE HERE" Save dan lihat hasilnya.



13 komentar

kureeeeeeennn pokonya, top markotop, mantap surantappppppppppppp

wahh.. kemana-mana emang kalo cuma nambahin widget, kodenya tambah panjang kali lebar.

Hi! My best wishes for you. I am here today. Have a nice day! http://fotisbazakas.blogspot.gr

maksudnya bukan kode yang aku tekankan tapi cara pemasangan yang lebih gampang miz ...
lagian gak bikin berat ke blognya ..

hahaha meni sakituna si akang .. haturnuhun kang ah
mangga atuh kopina di leueut hehe

mau pasang tapi di blog mamang ndak ada itu ' head" jadi bingung hadooooh

masa mang dikamanakeun atuh mang eta mastakana hehe

ciamik pisan nih akang...tutorialnya
paling jago deh...hebat...hehe
kapan2 saya juga boleh request ya kang Ruly... :)

hi...juga :)

ah bisa aja neh mas bud .. masih dalam tahap belajar mas
emmhh boleh .. but kalau gagal jgn nyalahin yah hehe

apa coba hehe

Tah ieumah rada babari yeuh sigana heuheu

lain babari deui kang super babari hehe