Membuat Widget Blog Melayang Saat Di Scroll Ada 2 Cara

Membuat Widget Blog Melayang Ketika di Scroll - Materi ini bekerjsama sudah berbagai tersebar dan mungkin saya termasuk terlambat dalam menulis artikel ini, tetapi untuk melengkapi konten blog yang belum dilengkapi bahan ini dan juga saya memperlihatkan dua alternatif atau dua cara untuk menciptakan widget blog melayang ketika di scroll, jadi siapa tau menjadi solusi buat Agan yang sudah muter muter keliling blog mencari cara menciptakan widget melayang tapi belum berhasil gampang mudahan di sini akan berhasil. Nah pribadi aja ke pokok pembahasannya ya..

Manfaat Widget Melayang (Sticky) Di Sidebar Blog

Sebuah widget yang dimodifikasi sehingga melayang (sticky) dikala di scroll dalam sebuah blog memang bermanfaat untuk mengisi ruang kosong dalam blog tersebut sehingga blog terlihat berisi, apalagi kalau kebetulan blog tersebut mempunyai postingan yang cukup panjang. Selain itu Sticky widget atau widget melayang akan memudahakan pengunjung dalam menelusuri konten didalam blog tanpa harus scroll balik ke bab atas.

Mengetahui Identitas (ID) HTML Widget

Penting untuk diketahui sebelum menciptakan widget nya menjadi melayang ialah kita harus tau bahwa setiap widget HTML/Javascript yang kita buat, masing masing mempunyai ID HTML. Nah ID HTML ini lah yang akan kita gunakan dalam script sehingga menciptakan widgetnya menjadi melayang. Lalu bagaimana cara mengetahui ID HTML Widget? Simak langkah-langkahnya dibawah ini:

Silahkan masuk ke Blogger >> Tatal letak (layout)
Cobalah membuka widget HTML/Javascript yang sudah ada dengan cara klik edit
Dalam pola kasus ini saya akan membuka widget Recent post yang sudah ada
Buatlah tampilan layarnya menjadi full
Di Address kafe paling ujung sebelah kanan kita akan melihat goresan pena Widget ID menyerupai pola gambar dibawah ini

Widget id Recent post saya ialah HTML96, itulah caranya mengetahui widget ID HTML/Javascript. Silahkan ingat widget ID HTML milik agan yang akan dibentuk sticky atau melayang.

Membuat Widget Melayang (Sticky) Dengan 2 Cara

Setelah kita tentukan widget mana yang akan dibentuk melayang dan kita ketahui ID nya, selanjutnya ialah menciptakan tampilan widgetnya melayang dikala halaman di scroll kebawah sehingga ruang kosong didalam blog menjadi terisi dan blog terlihat padat.

Yang dimaksud dengan 2 cara disini ialah kita akan memakai 2 script yang berbeda, silahkan pilih mana yang berdasarkan Agan berhasil

Cara 1

1. Buka dashboard blogger lalu pilih Tema (Theme) >> Edit HTML
2. Dengan memakai Ctrl+F cari aba-aba ]]></b:skin>
3. Simpan aba-aba dibawah ini sempurna diatas kode]]></b:skin>

 .makesticking{background:none!important;position:fixed!important;top:25px;z-index:99;-webkit-transform:translateZ(0);} #HTML96 .widget-content {padding:1;margin:auto;}

4. Kemudian tambahkan script dibawah ini sempurna diatas aba-aba </body>

 <script type='text/javascript'> //<![CDATA[ // Sticky Widget function makemeSticky(e){function t(){var e=s.getBoundingClientRect();e.top<0?(n.className=a+" makesticking",n.style.width=i+"px"):n.className=a}var n=document.getElementById(e),s=document.createElement("div");n.parentNode.insertBefore(s,n);var i=n.offsetWidth,a=n.className+" makesticky";window.addEventListener("scroll",t,!1)}makemeSticky("HTML96"); //]]> </script>

Cara 2

1. Lakukan langkah 1 s.d 3 di Cara 1
2. Copy aba-aba dibawah ini sempurna diatas aba-aba </body>

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

Itulah dua cara untuk menciptakan widget di sidebar blog menjadi melayang (sticky), oh iya jangan lupa untuk mengganti widget id HTML96 diatas dengan widget id milik Agan masing-masing. Semoga berhasil dan terimakasih.