Cara Mudah Membuat Sticky Widget Di Blogger

Cara Mudah Membuat Sticky Widget Di Blogger

Membuat Animasi Multi Level Drop Down menu CSS3. Tampilan blog akan terlihat profesional ketika user mengunjungi blog anda dengan desain... 16.04.00

Membuat Animasi Multi Level Drop Down menu CSS3. Tampilan blog akan terlihat profesional ketika user mengunjungi blog anda dengan desain yang menarik. Hal ini merupakan bagian penting dari informasi bagi mereka yang ingin membuat Sticky Widget di atas posting di halaman utama di blog Blogger. Blog Paling Populer memiliki Sticky Widget ketika pengunjung bergerak naik dan turun. Efeknya ini biasanya diterapkan untuk menu navigasi atau kotak langganan, tapi apa yang membuat kebanyakan orang berpikir adalah bagaimana mereka dapat menambahkan efek ke widget blog mereka. Efek ini akan membuat widget melayang ke bawah ketika pengunjung scroll ke bawah dan tetap di posisi semula ketika pengunjung scroll ke atas dan mencapai posisi widget.

Cara Memasangnya pada blogger
1. Masuk Dashboard Blogger > Template > Edit HTML > tekan CTRL + F dan temukan kode Berikut.

</body>

2. Paste kode berikut di atas </ body> tag dalam template Anda.

Atau jika Anda memilih untuk tidak menyentuh template, Anda hanya bisa taruh di HTML / Javascript (di Blogger) atau Widget teks (di WordPress).

<script>
// Sticky widget by Bloggersentral.com
// Tutorial at http://www.bloggersentral.com/2013/04/how-to-make-any-widget-sticky.html
// Free to use or share, but please keep this notice intact.

//<![CDATA[
bs_makeSticky("YOUR_WIDGET_ID"); // enter your widget ID here
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 {background:#f2f2f2 !important; position:fixed; top:0; z-index:9999; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3);}
</style>

3. Dapatkan ID dari widget atau elemen Anda ingin membuat Widget Sticky dan masukkan dalam baris 6 (menggantikan "YOUR_WIDGET_ID"). Misalnya katakanlah ID widget adalah HTML9, maka kode baris 6 akan menjadi: bs_makeSticky ("HTML9");

4. Simpan

[source]