Cara Membuat Sticky Widget di Sidebar Blog - Tips SEO Design

Cara Membuat Sticky Widget di Sidebar Blog Dengan Mudah

Bagi sobat yang sudah terbiasa melihat stycky menu navigasi, pastinya akan terlihat keren dan elegan. tengok saja SL Style Magz.

Template SEO killer tersebut sudah mempunyai fitur stycky menu naviagsi. Ketika discrol ke bawah, menu navigasinya akan tetap terlihat dan pastinya masih responsive design.

Namun tips SEO killer kali ini, lebih tepatnya tips design blog, fitur sticky akan disematkan pada sidebar blog. Tidak sekedar membuat blog menjadi semakin menarik, namun dengan keberadaan fitur sticky pada sidebar blog akan membuat pembaca semakin mengetahui secara nyata guna menelusuri secara mudah terhadap blog kita.

Cara Membuat Sticky Widget di Sidebar Blog - Tips SEO Design

Jika ingin membuat sidebar tertentu dengan pola sticky seperti pada tips kali ini, silakan ikuti langkah-langkahnya berikut ini:

1. Masuk akun blogger
2. Pilih template > mode html
3. Copas kode di bawah ini tepat di atas kode </body>
<script type='text/javascript'> //<![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>
4. Ganti kode yang sudah saya beri warna biru dengan kode yang ID sidebar yang akan dibuat sticky
5. Tambahkan kode di bawah ini di CSS menu:
#sticky-sidebar{width:100%;max-width:300px}@media only screen and (max-width:768px){ #sticky-sidebar{width:100%;max-width:100%} }
6. Save template

Demikian tips SEO design blog kali ini, khususnya Cara Membuat Sticky Widget di Sidebar Blog. Semoga bermanfaat, salam.

Source:
http://www.arlinadzgn.com/2015/12/cara.membuat.sticky.widget.di.sidebar.blog.html

0 Response to "Cara Membuat Sticky Widget di Sidebar Blog - Tips SEO Design"

Post a Comment

Silakan masukkan komentar Sobat di sini!

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Hosting Unlimited Indonesia