Memasang Widget Sticky Sidebar pada blog


Pada kesempatan kali ini saya ingin membuat sebuah tutorial bagaimana memasang widget sticky sidebar. Karna pemrograman saya dalam dunia website masih terbilang minim jadi kemarin saya cari artikel tentang sticky widget akhirnya nemu. untuk scriptnya sendiri saya dapet dari website arlina design. saya termotivasi dengan website tersebut yang begitu lengkap menampilkan tentang blog secara Detail. dan harapanya kedepan nantinya saya bisa juga mendesain seperti beliau. Baiklah langsung saja saya akan memberikan tutorialnya.

1. Silahkan anda masuk ke TEMPLATE kemudian pilih EDIT HTML.
2. Setelah masuk ke EDIT HTML  silahkan melakukan pencarian </body>
3. Letakan script berikut diatas tag </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. Setelah itu Tambahkan Kode css berikut dibawah script tadi.
 
<style>
#sticky-sidebar{width:100%;max-width:300px}

@media only screen and (max-width:768px){

#sticky-sidebar{width:100%;max-width:100%}

}

</style> 

5. Rubah #sticky-sidebar   Dengan Widget atau konten yang akan anda buat sticky Dan simpan template.

NOTE :

Simbol pagar ( # ) pada javascript merupakan sebuah id pada div jika anda tidak berhasil dalam memasang widget sticky jangan khawatir. Kami Memiliki Solusinya
1. Buka link blog anda.
2. Arahkan Kursor pada widget yang akan dibuat melayang. Lalu Klik kanan dan Pilih Inspeksi
3. Setelah anda masuk Inspeksi. Cari Satu persatu kode pada elemen sampai ada sebuah elemen yang anda klik memblok sebuah tampilan widget.

4. Jika anda telah menemukan sebuah kode blog saat di klik memblok tampilan widget. anda harus mengcopy id widget tersebut lalu rubah nama id= "sidebar" menjadi #sidebar dan masukan pada url yang berwarna merah pada script.


0 Response to "Memasang Widget Sticky Sidebar pada blog"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel