Iklan

Cara Membuat Sticky Widget Sidebar di Blogger


Cara Membuat Sticky Widget Sidebar di Blogger yang akan saya share kali ini, fungsi sticky ini jika kamu scroll maka bisa mengikuti itulah fungsinya. 

Nah untuk kode yang saya bagikan ini tentu saya sudah pakai pada blog ini yang mana bisa kamu pakai jika ingin template blog kamu berbeda dari yang lain. 


Cara Membuat Sticky Widget di Sidebar Blog


1. Login ke Blogger > Buka Template editor > Tambahkan kode di bawah ini sebelum </body>

<script>
//<![CDATA[
$(function() {
if ($('#sticky-sidebar').length) { // Ganti "#sticky-sidebar" dengan ID tertentu
var el = $('#sticky-sidebar');
var stickyTop = $('#sticky-sidebar').offset().top;
var stickyHeight = $('#sticky-sidebar').height();
$(window).scroll(function() {
var limit = $('#footer-wrapper').offset().top - stickyHeight - 20; // Jarak berhenti di "#footer-wrapper"
var windowTop = $(window).scrollTop();
if (stickyTop < windowTop) {
el.css({
position: 'fixed',
top: 20 // Jarak atau margin sticky dari atas
});
} else {
el.css('position', 'static');
}
if (limit < windowTop) {
var diff = limit - windowTop;
el.css({
top: diff
});
}
});
}
});
//]]>
</script>

Perhatikan kode yang ditandai, ganti kode tersebut dengan ID yang akan dibuat sticky sesuai template yang digunakan

#sticky-sidebar : ID dari konten atau widget yang akan dibuat sticky
#footer-wrapper : Tentukan ID untuk membatasi fungsi sticky

Selanjutnya tambahkan lebar pada konten atau widget yang dibuat sticky dengan CSS. Misalkan di sini saya memberikan 300px untuk lebar sticky, contoh :

#sticky-sidebar{width:100%;max-width:300px}

Atau

#HTML1{width:100%;max-width:300px}

Tentukan lebar sesuai dengan lebar sidebar dari template yang sobat gunakan dan juga jangan lupa untuk mengganti lebar pada media query tertentu, contoh :

@media only screen and (max-width:768px){
#sticky-sidebar{width:100%;max-width:100%}
}

Untuk demo tampilan Sticky Widget, silakan klik tombol di bawah ini :

Demo untuk sticky pada semua konten sidebar


Demo untuk sticky pada widget tertentu


Cukup mudah bukan? Selamat mencoba dan salam sukses.
DONASI VIA PAYPAL Bantu berikan donasi jika artikelnya dirasa bermanfaat. Donasi akan digunakan untuk memperpanjang domain www.sudarblogger.web.id. Terima kasih.

0 Response to "Cara Membuat Sticky Widget Sidebar di Blogger"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel