Cara Membuat Widget Melayang/Sticky Ketika Di Scroll Sidebar

Widget yang melayang/menempel di sidebar blog ini sangat cocok jika anda seorang blogger yang suka membuat artikel tutorial atau panjang. Dengan widget yang menempel di sidebar blog akan membuat sidebar tidak kosong ketika pengunjung men-scroll untuk melanjutkan membaca artikel. Widget ini tidak bisa di close walaupun melayang karena berada di sidebar berbeda dengan widget yang berada diluar sidebar yang biasa berisi iklan sehingga bisa di close.
 
Sticty yang artinya lengket,maksudnya widget yang dibuat sticky akan lengket atau menempel di sidebar. Widget yang menempel bisa anda atur widget mana yang ingin dibuat melayang/menempel dengan mengganti id widgetnya,lalu apa fungsi widgte sticky.

Cara Membuat Widget Melayang/Sticky Ketika Di Scroll

Fungsi Widget Sticky

Karena widget ini melayang maka itulah fungsinya. Yaitu mengisi supaya sidebar blog anda tidak kosing ketika pengunjung menggulung ke bawah untuk melanjutkan membaca artikel. Lalu widget apa saja yang bisa melayang atau sticy? Semua widget yang memiliki 'id' bahkan iklan bisa dibuat melayang/sticky. 

Namun kadang-kadang widget ini tidak berfungsi dengan baik,ada beberapa template yang widget di sidebarnya tidak bisa dibuat sticky entah itu karena javascript atau cssnya. Widget sticky ini bisanya digunakan untuk meletakkan iklan,supaya CTR iklannya tinggi.Lalu bagaimana cara membuatnya? Ikuti saja langkah dibawah ini.

Cara Membuat Sticky Widget

Langkah 1
Silakan buka blogger, Template → Edit HTML

Langkah 1
Salin kode berikut lalu pastekan diatas kode ]]></b:skin>
     .sticky {  position:fixed;  top:10px;/* jarak dari atas*/  z-index: 100;}

Langkah 3
Cari kode </body> ,lalu salin kode dibawah lalu letakkan diatas kode </body>

    <script type="text/javascript">
    $(document).ready(function() {
    var stickyWidgetTop = $('#HTML6').offset().top;
    var stickyWidget = function(){
    var scrollTop = $(window).scrollTop();    
    if (scrollTop > stickyWidgetTop) {
        $('#HTML6').addClass('sticky');
    } else {
        $('#HTML6').removeClass('sticky');
    }
    };
    stickyWidget();
    $(window).scroll(function() {
        stickyWidget();
    });
    });
    </script>

Ganti kode yang berwarna merah dengan id widget yang ingin dibuat sticky,tanda # jangan dihapus.

Lalu Simpan template.

Mudah bukan,sekarang cek blog anda apakah widgetnya sudah sticky belum. Cukup sekian tutorial cara membuat sticky widget sidebar. Semoga bermanfaat. 

Subscribe to receive free email updates:

29 Responses to "Cara Membuat Widget Melayang/Sticky Ketika Di Scroll Sidebar"

  1. Nah saya lg butuh yang ini tp buat laman ada gak gan?

    ReplyDelete
  2. Wah nakasih gan ane coba sukses...

    ReplyDelete
    Replies
    1. Sama-sama gan,makasih atas kunjungannya ya

      Delete
  3. Wah mantap nih buat iklan, biar banyak yang klik hehe, makasih mas tutornya

    ReplyDelete
  4. Alhamdulillah. Akhirnya aku nemuin ilmu yg aku belum tau. . Sekali lagi aku bilang makasih ya gan atas infonya. Semoga bermanfaat bagi teman-teman yang lain. Next artikel nya.

    ReplyDelete
    Replies
    1. Sekali lagi saya ucapkan sama-sama gan

      Delete
  5. Bisa dipakai untuk FP blog atau iklan ya gan. Biar banyak yg like atau klik. Mantap.. gan

    ReplyDelete
    Replies
    1. Iya bisa begitu gan,biar sidebar tidak kosong juga

      Delete
  6. Makakasih gan artikel nya mantap nie

    ReplyDelete
  7. Terimakasih gan widget stickynya sangat membantu blog saya =D

    ReplyDelete
  8. Kalau saya biasanya buat widget sticy widget pakai CSS gan. Soalnya kalau JS itu kadang eror. Kalau pakai CSS jadinya kayak gini .Kodehtml {position:fixed}

    ReplyDelete
    Replies
    1. Memang kalau menggunakan js sering error apalagi kalau hosting jsnya down/tutup

      Delete
  9. Akhirnya nemu juga tutorial ini, thanks gan.

    ReplyDelete
  10. Mas punya saya kok gak berhasil ya. Tidak turun, masih tetap

    ReplyDelete
    Replies
    1. Silakan sesuaikan id sidebarnyabmas,setiap template mungkin berbeda

      Delete
  11. Gan.... untuk membuat scroll Box. Seperti punya agan gimana?

    ReplyDelete

Jangan ada link aktif di komentar karena komentar anda di moderasi!