Cara Membuat Sticky (Fixed) Sidebar - Tetap Muncul Saat Scroll ke Bawah

Baca Juga

Cara Membuat Sticky (Fixed) Sidebar - Tetap Muncul Saat Scroll ke Bawah.

Cara Membuat Sticky (Fixed) Sidebar yang Tetap Muncul Saat halaman bllog di-Scroll ke Bawah ini CB share setelah update Template DetikStyle. Lihat Demonya, perhatikan sidebar kiri.

Kodenya diambil dari Blogger Origin. Berikut ini cara memasangngya.

Cara Membuat Sticky (Fixed) Sidebar

1. Klik Tema > klik Edit HTML
2. Pastikan di template blog Anda sudah ada link ke kode jQuery seperti ini. Jika belum ada, pasang di atas kode </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>

3. Copas kode sticky widget berikut ini di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
$(function() {
if ($('#PopularPosts1').length) {
var el = $('#PopularPosts1');
var stickyTop = $('#PopularPosts1').offset().top;
var stickyHeight = $('#PopularPosts1').height();
$(window).scroll(function() {
var limit = $('#footer-wrapper').offset().top - stickyHeight - 20;
var windowTop = $(window).scrollTop();
if (stickyTop < windowTop) {
el.css({
position: 'fixed',
top: 20
});
} else {
el.css('position', 'static');
}
if (limit < windowTop) {
var diff = limit - windowTop;
el.css({
top: diff
});
}
});
}
});
//]]>
</script>

Catatan: pada tutorial ini, widget yang kita jadikan sticky adalah Popular Posts. Anda bisa menggantinya dengan widget lain, seperti Latest Posts atau Label Widget. Sesuaikan kodenya yang berwarna.

4. Agar tidak muncul di tampilan mobile (HP), tambahkan kode berikut ini di atas kode ]]></b:skin>

#PopularPosts1{width:100%;max-width:320px} @media only screen and (min-width:260px) and (max-width:989px){ #PopularPosts1{display: none!important;}}

5. Save! Simpan Template.

Demikian Cara Membuat Sticky (Fixed) Sidebar - Tetap Muncul Saat Scroll ke Bawah. Cara lainnya bisa dicek di laman W3Schools.

Good Luck & Happy Blogging! (www.contohblog.com).*