Cara Membuat Sticky Sidebar / Sidebar Melayang yang Ringan dan SEO di Blog


Setelah pada artikel sebelumnya saya membahas mengenai Cara Membuat Sticky Widget / Widget Melayang yang Ringan dan SEO di blog. Pada artikel kali ini, saya akan membahas Artikel tentang Cara Membuat Sticky Sidebar / Sidebar Melayang yang Ringan dan SEO di Blog. Sebelum kita masuk ke tutorialnya, ada baiknya kita pahami dulu apa itu Sticky Sidebar dan apa bedanya dengan Sticky Widget? Silahkan baca selengkapnya di bawah ini.

Apa perbedaan antara Sticky Sidebar dan Sticky Widget?
Sticky Widget adalah sebuah kondisi dimana apabila Halaman pada blog di Scroll ke bawah ataupun ke atas, maka salah satu widget yang dipilih akan mengikuti kemana Halaman tersebut bergulir, sedangkan Sticky Sidebar adalah kondisi dimana apabila Halaman pada blog di Scroll ke bawah maupun ke atas, maka Seluruh widget yang ada di sidebar yang kita pilih akan mengikuti kemana halaman tersebut bergulir.

Kelebihan dan Kekurangan

Kelebihan Sticky Widget adalah kita Dapat memilih widget mana saja yang ingin di buat sticky, dan widget mana saja yang tidak dibuat sticky, namun apabila memilih lebih dari 1 widget yang ingin dibuat sticky, maka harus menggunakan lebih dari 1 juga script sticky widget yang dipasang di blog. Sesuai dengan jumlah widget sticky yang ingin di buat.

Kelebihan Sticky Sidebar adalah kita bisa membuat seluruh widget yang ada di sidebar kanan atau kiri untung dibuat Sticky hanya dengan menggunakan satu script Sticky Sidebar saja. Namun kekurangannya adalah, belum tentu seluruh widget yang ada di sidebar bisa ditampung di layar, sehingga apabila ingin menggunakan Sticky sidebar, disarankan hanya membuat tidak lebih dari 3 widget terpasang di sidebar yang ingin dibuat sticky , agar ketiga widget tersebut bisa tampil dan dilihat oleh pengunjung blog Anda.

Tutorial Cara Memasang Sticky Sidebar di Blog.
  1. Pada Dashboard blogger, klik Tema > EDIT HTML
  2. Tempel kode di bawah ini sebelum 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>
  3. Lihat kode yang saya tandai di atas, ganti kode tersebut dengan ID sidebar yang akan di buat sticky atau melayang, ID Sidebar setiap Template berbeda, namun pada umumnya ID tersebut adalah #Sidebar-wrapper. Atau Anda bisa mencari tahu sendiri dengan menggunakan CTRL+F lalu ketik sidebar dan Enter, dan pilih ID yang menurut Anda merupakan ID dari Sidebar yang Anda maksud
    Keterangan :
    Kode #Sticky-sidebar adalah ID dari sidebar yang dibuat melayang sedangkan Kode #Footer-wrapper adalah ID yang berfungsi untuk membatasi fungsi dari Sidebar Sticky. Jadi, pada kode yang ada di atas, sidebar sticky akan berhenti mengikuti Halaman jika sudah dekat dengan Footer.
  4. Sebenarnya, sampai tahap ke tiga di atas, Anda telah berhasil membuat sidebar sticky pada Blog Anda. Namun ternyata masih ada satu kendala lagi, yaitu sidebar akan membesar atau melebar ketika sedang dalam keadaan sticky atau melayang. Untuk mengatasinya, silahkan tambahkan kode di bawah ini di bagian CSS pada blog Anda.
    #sticky-sidebar{width:100%;max-width:300px}
    Keterangan: Ganti kode 300px dengan lebar sidebar yang ada Pada Blog Anda. dan jangan lupa ganti #sticky-sidebar dengan ID sidebar yang akan dibuat Sticky atau Melayang
  5. Untuk Demo tampilan, Anda bisa melihat sidebar yang ada pada Blog saya ini, persis seperti itu sidebar sticky yang akan Anda dapatkan
Mudah bukan Cara Membuat Sticky Sidebar ini? Selamat Mencoba. Dan semoga bermanfaat!
Disqus Comments