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

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

Cara Membuat Sticky (Fixed) Sidebar - Tetap Muncul Saat Scroll ke Bawah
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).*

Thanks for reading Cara Membuat Sticky (Fixed) Sidebar - Tetap Muncul Saat Scroll ke Bawah | Labels: Desain Blog
0 Komentar untuk "Cara Membuat Sticky (Fixed) Sidebar - Tetap Muncul Saat Scroll ke Bawah"

1. Komentar spam, menyertakan Link Aktif dan Alamat Blog tidak akan muncul.
2. Tidak semua pertanyaan sempat atau bisa dijawab.
3. Bagi yang mau tanya, sebelum bertanya, silakan cari dulu di Kotak Pencarian di Sidebar.
Thanks for visiting and the comment :)

Contact Form

Name

Email *

Message *