BEGINI CARA NYA MEMBUAT WIDGET MELAYANG (STICKY WIDGET) DI BLOG DENGAN MUDAH - VERSI MOBILE /PC BERHASIL

---

Apa itu Sticky/Floating Widget

S

ticky widgets on sidebars blog atau lebih dikenal dengan istilah floating widgets adalah widget floating pada tampilan sidebar yang akan selalu mengambang jika halaman di scroll, hal ini digunakan untuk mengisi bagian yang kosong saat halaman blog di scroll. Selain untuk mengisi halaman yang kosong saat scrolling, widget sticky ini juga sangat berguna untuk memodifikasi tampilan blog Anda, memberikan tampilan sidebar blog Anda menarik ketika pengunjung membaca artikel sampai akhir. Sticky sidebar atau widget floating sidebar yang dapat Anda gunakan di semua widget di sidebar Anda seperti widget posting populer, posting terbaru, tag, iklan blog, dll. Jadi Anda bisa menyesuaikannya dengan kebutuhan Anda. Cara Membuat Sidebar Mengambang di Blog Anda Untuk membuat widget sidebar mengambang, elemen yang diperlukan adalah ID widget. Jadi silahkan tentukan ID sebelum memasang di blog. Cara berikut: Tentukan widget yang ingin Anda setel sebagai Sticky (mengambang), lalu dapatkan ID widgetnya

DAFTAR ISI

1. Apa itu Sticky Widget
2. Pemasangan
3. Alternatif
4. Akhir Kata

Sebelumnya, Ketahui dulu ID Widget anda. Berikut gambar step nya

• melalui Inspect Elemen pada tampilan web anda dengan menekan Shift+F12

Langkah Memasang Script Floating Widget

1. Login Blogger dengan akun anda
2. Copy dan Paste kan script dibawah tepat diatas atau sebelum ]]></b:skin>

.sticky {position:fixed;top:10px;/* jarak dari atas*/z-index: 100;max-width: 300px;}

3.Kemudian Copy dan pastekan kode script JS dibawah tepat diatas kode </body>

<b:if cond="data:blog.isMobileRequest == &quot;false&quot;">  

<script type="text/javascript">

  //<![CDATA[

bs_makeSticky("PopularPosts1");

function bs_makeSticky(elem) {

    var bs_sticky = document.getElementById(elem);

    var scrollee = document.createElement("div");

    bs_sticky.parentNode.insertBefore(scrollee, bs_sticky);

    var width = bs_sticky.offsetWidth;

    var iniClass = bs_sticky.className + ' bs_sticky';

    window.addEventListener('scroll', bs_sticking, false);

    function bs_sticking() {

        var rect = scrollee.getBoundingClientRect();

        if (rect.top < 0) {

            bs_sticky.className = iniClass + ' bs_sticking';

            bs_sticky.style.width = width + "px";

        } else {

            bs_sticky.className = iniClass;

        }

    }

}

//]]>

</script>

 

<style>

.bs_sticking {position:fixed; top:0; z-index:9999;}

   </style></b:if>    

    

    

 <b:if cond="data:blog.isMobileRequest == &quot;false&quot;"> 

 

 <script>

//<![CDATA[

$(function(){ // document ready

   if ($('#PopularPosts1').length) { // make sure "#sticky" element exists

      var el = $('#PopularPosts1');

      var stickyTop = $('#PopularPosts1').offset().top; // returns number

      var stickyHeight = $('#PopularPosts1').height();

      $(window).scroll(function(){ // scroll event

          var limit = $('#footer').offset().top - stickyHeight - 20;

          var windowTop = $(window).scrollTop(); // returns number

          if (stickyTop < windowTop){

             el.css({ position: 'fixed', top: 0 });

          }

          else {

             el.css('position','static');

          }

          if (limit < windowTop) {

          var diff = limit - windowTop;

          el.css({top: diff});

          }

        });

   }

});

//]]>

</script>

 

<style>

.bs_sticking {position:fixed; top:0; z-index:9999;}

   </style></b:if>

Sebagai Catatan:

1. ID Widget ='PopularPosts1'dan '#footer' harap diganti dengan ID Widget anda. Cara untuk melihat ID widget bisa di scrol keatas
2. dan untuk tanda tagar contoh: #PopularPosts1 jangan dihilangkan/dihapus. Ingat # jangan dihapus.

4.Silahkan simpan template dan lihat hasilnya. didalam script ini sudah ada versi mobile nya, dimana script nya tidak akan berjalan atau tidak berfungsi jika dibuka dengan versi seluler(mobile).

Widget ALternatif

1. Login ke blog anda
2. Copy script dibawah tepat diatas </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> $(function () { var offset = $("#HTML4").offset(); var topPadding = 0; $(window).scroll(function () { if ($(window).scrollTop() &gt; offset.top) { $("#HTML4").stop().animate({ marginTop: $(window).scrollTop() - offset.top + topPadding }) } else { $("#HTML4").stop().animate({ marginTop: 0 }) } }) }); </script>

#HTML4 = Silahkan ganti dengan ID widget anda tanpa menghapus tagar(#)

Gimana Boskuu gampang bukan. Bila ingin mengubah atau mempercantik tataletak atau tampilannya silahkan diutak atik script CSS diatas.

Akhir Kata

Sekian dulu perjumapaan kita dalam pembahasan dalam artikel Cara membuat sticky/floating Widget. Semoga bermanfaat dan sampai jumpa kembali di artikel berikutnya.

Keywords

Blog, blogger, Sticky widget, Floating Widget, Widget Melayang, JS,HTML,CSS,