Sidebar yang Tetap Muncul Saat halaman bllog di 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 sesudah 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 isyarat jQuery ibarat ini. Jika belum ada, pasang di atas isyarat </head>

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

3. Copas isyarat sticky widget berikut ini di atas isyarat </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 yaitu Popular Posts. Anda dapat menggantinya dengan widget lain, ibarat Latest Posts atau Label Widget. Sesuaikan kodenya yang berwarna.

4. Agar tidak muncul di tampilan mobile (HP), tambahkan isyarat berikut ini di atas isyarat ]]></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 dapat dicek di laman W3Schools.

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

Share To:

Endo Sadewa

Post A Comment:

0 comments so far,add yours