Cara bikin Sidebar Blog Melayang V2 "Sticky"

Membuat sidebar melayang Di blog  Memang Menarik Perhatian, Cara tersebut Dikenal Sebagai "Sticky"
Widget Yang melayang Pada sidebar Cukup Berguna bagi kita, Untuk Posting Yang Terdahulu MAKNYUSblogger Pernah Juga postig Tentang Cara Bikin Sidebar melayang V1 
Dan untuk Bikin sidebar Melayang V2 Lumayan Agak sulit tapi hasil memuaskan :)

Cara ini Cukup efektif dengan segala macam widget yang ada di sidebar anda, Cara ini bukan hanya dapat digunakan pada kotak berlangganan email, anda bisa menggunakanya untuk promosi item, galeri,Posting popular,foto instagram dan yang lainya. Panda intinya sesua yang anda inginkan.

Untuk Cara Pemasangan Sbb:
1. Menambahkan widget Baru :
Halpertama yang anda hrus lakukan adalah Menambah widget Baru Pada sidebat anda.
Masuk Ke >>> BLOGGER >>> Tata Letak >>> Tambah Gadget >>> Tambah HTML/ Java Script dan
Nama Wigdget "My Gadget Sticky".
2. Pemasangan Kode :
Setelah Menambahkan Widge Pada Blog , Sekarang Kita Menuju Ke Template : Edit HTML Dan cari Kode </body> Bila sudah ketemu Taruh Kode Di bawah ini Tepat Di atas Kode </body>

<script>
/*<![CDATA[*/
// Sticky Plugin

(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>
<a style="display:none" href="http://maknyusblogger.blogspot.com">Blogger Widgets</a>
<script type='text/javascript'>
  $(document).ready(function(){
    $("#mblfloater").sticky({topSpacing:0});
  });
</script>

3. Merubah Java Script Widget yang Baru Kita bikin tadi Yang dikasih Judul "My Gadget Sticky".
Catatan : Untuk Mempercepat pencarian Klik di HTML Template , Tekan tombol "CTRL + F" sekarang untuk Menemukan "My Gadget Sticky"  anda akan dapat melihat kode yang mirip dengan kode berikut ini.

<b:widget id='HTML32' locked='false' title='My Sticky Gadget' 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 anda Menemukan Kode yang mirip Tersebut di atas, anda tinggal mengganti kode tersebut Dengan kode di bawah 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>

Jika sudah selesai Simpan Template Dan sekarang Lihat Hasilnya di Blog anda.

Anda baru saja membaca artikel tentang - Cara bikin Sidebar Blog Melayang V2 "Sticky". Silahkan baca artikel berikutnya Tentang - Next - Jangan lupa g+1 / fb / twit :)