Cara Membuat Floating "Sticky" Sidebar Widget di Blogger

Cara Membuat Floating "Sticky" Sidebar Widget di Blogger - Selamat datang kembali bersama blog Dindin Rosidin, yang akan memberikan sebuah informasi atau Cara Membuat Floating "Sticky" Sidebar Widget di Blogger, yang akan dipandu oleh Dindin Rosidin.. Hihih kayak lagi siaran aja.


Screensot, untuk demonya udah ada kan, tuh disebelash << :D

Unsur yang mengapung di sepanjang layar Anda cukup keren dan menarik perhatian. Mereka lebih dikenal sebagai "Sticky" widget mengambang yang menempel pada layar Anda sebagai Anda menggulir dan cenderung memiliki lebih tinggi klik melalui tingkat.

Oke deh cukup dulu penjelasannya, sekarang kita langsung ke topik Cara Membuat Floating "Sticky" Sidebar Widget di Blogger ok, berikut cara caranya :
Hal pertama kalian harus membuat widget baru pada sidebar Anda sehingga nantinya Anda dapat membuatnya Sticky. Pergi ke Blogger.com >> Tata Letak >> Tambah Gadget >>  HTML / JavaScript >> dan nama widget sebagai "My Gadget Sticky". Dan untuk isi widgetnya terserah anda.
Sekarang anda ke Blogger.com >> Template >> Edit Template, lalu cari kode </body>, setelah ketemu copas kode dibawah ini tepat diatas </body>

Oke deh cukup dulu penjelasannya, sekarang kita langsung ke topik Cara Membuat Floating "Sticky" Sidebar Widget di Blogger ok, berikut cara caranya :
  • Hal pertama kalian harus membuat widget baru pada sidebar Anda sehingga nantinya Anda dapat membuatnya Sticky. Pergi ke Blogger.com >> Tata Letak >> Tambah Gadget >>  HTML / JavaScript >> dan nama widget sebagai "My Gadget Sticky". Dan untuk isi widgetnya terserah anda.
  • Sekarang anda ke Blogger.com >> Template >> Edit Template, lalu cari kode </body>, setelah ketemu copas kode dibawah ini tepat diatas </body>
<script>
/*<![CDATA[*/
// Author: Dindin Rosidin
(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>
  • Setelah menambahkan kode JavaScript, Anda harus mencari nama widget Anda. Sejak itu, sayatelah menamakannya sebagai "My Gadget Sticky". Oleh karena itu, dalam pencarian coding template untuk "My Gadget Sticky". Untuk dapat mencari dengan benar adalah penting bahwa Anda harus menggunakan kotak pencarian built-in yang disediakan oleh editor template Blogger.

    Catatan: Untuk mengaktifkan kotak pencarian klik di mana saja di template editor dan tekan "CTRL + F". Sekarang untuk menemukan "My Gadget Sticky" Anda akan dapat melihat kode yang mirip dengan yang 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>
  • Sekarang setelah menemukan kode seperti yang disebutkan di atas, hanya mengganti sepenuhnya dengan coding berikut. 
<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>
  • Simpan/save, dan lihat hasilnya :) hihi  
 Sekian tutorial tentang Cara Membuat Floating "Sticky" Sidebar Widget di Blogger, semoga bermamfaat ;)

/bye

11 Responses to Cara Membuat Floating "Sticky" Sidebar Widget di Blogger

Hallo :) Please don't span and share link in comment.