Cara Membuat Sticky Widget di Sidebar Blog – Tips SEO Design

By On Tuesday, October 11th, 2016 Categories : Internet

PalingPopuler.Com mengabarkan tentang Cara Membuat Sticky Widget di Sidebar Blog – Tips SEO Design.

Cara Membuat Sticky Widget di Sidebar Blog Dengan Mudah

Bagi sobat yg telah terbiasa melihat stycky menu navigasi, pastinya akan kelihatan keren dan elegan. tengok saja SL Style Magz.

Template SEO killer tersebut telah mempunyai fitur stycky menu naviagsi. Ketika discrol ke bawah, menu navigasinya akan tetap kelihatan 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 jadi 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 maupun margin sticky dari atas }); } else { el.css(‘position’, ‘static’); } if (limit < windowTop) { var diff = limit – windowTop; el.css({ top: diff }); } }); } }); //]]> </script>

4. Ganti kode yg telah aku beri warna biru dengan kode yg ID sidebar yg 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



Cara Membuat Sticky Widget di Sidebar Blog – Tips SEO Design
sumber : forumblogindo.com

Cara Membuat Sticky Widget di Sidebar Blog – Tips SEO Design | Paling Populer | 4.5