Cara Membuat Sticky Widget Sidebar di Blog

adscblog

Mungkin Bagi anda Para Blogger sudah tidak asing lagi dengan yang namanya Sticky Widget ini,yang dimana kemampuan sticky in sangat di butuhkan oleh Para Blogger,sticky widget ini sering di gunakan oleh Para blogger di Blog nya dengan berbagai Pariasi,baik itu untuk di gunakan Fanspage di sidebar ataupun Profil Google+ ataupun yang lain nya sesuai dengan kebutuhan mereka

Sticky Widget ini walaupun halaman di scroll ke bagian bawah namun Iwdget yang sudah di pasang Sticky akan tetap saja tampil di bagian sidebar walaupun halaman terus di scroll ke bagian bawah,dengan begitu akan memudahkan para pengunjung untuk selalu melihat widget yang sudah di pasang sticky tersebut

Jika anda sudah paham dengan kegunaan dari Sticky Widget ini,dan kini anda ingin menggunakan Sticky Widget ini di blog anda,bisa anda ikuti tutorial pemasangan Sticky Widget di bawah ini

Cari ID Widget untuk Sticky

Sebelum anda menerapkan Sticky ini di blog kamu,tentu nya kamu haris tau terlebih dahulu kode widget yang akan kamu jadikan Sticky tersebut,jangan sampai kamu kebingungan untuk memasang sticky ini karena tidak tau kode widget nya,untuk mengetahui kode widget yang akan di jadikan sticky ini anda masuk kebagian

1. Masuk ke bagian Layout/Tataletak
2. Setelah itu arahkan Kursor Mosh anda ke bagian tulisan "Edit" sidebar lihat pada gambar
   
   Silahkan anda Arahkan Cursor Mosh anda ke bagian "Edit" lihat bagian panah warna biru,setelah itu silahkan anda lihat hasil nya di bagian panah berwarna Merah misalkan disana terdapat HTML9,Nah itulah kode Widget nya

Menerapkan ID Widget/Sidebar di kode Sticky

Setelah anda mendapatkan Id widget yang akan anda jadikan Sticky widget tersebut,langkah selanjut nya silahkan anda ikuti langkah-langkah di bawah ini

• Silahkan masuk ke Template
• Lalu ke Edit html
• Setelah itu silahkan anda cari kode </body> untuk mempermudah pencarian silahkan anda tekan tombol Ctrl+F secara besamaan,dan setelah ketemu kode </body> tersebut,silahkan anda letakan kode berikut 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>

• Setelah itu silahkan Save template dan lihat hasil nya

Keterangan :
- Untuk bagian sticky-sidebar silahkan anda ganti dengan kode yang di dapat pada bagian langkah pertama tadi
- Sedangkan untuk footer-sticky silahkan anda ganti dengan kode yang ingin anda pasang sticky bagian bawah

Namun jika anda melihat lebar sticky tersebut dengan lebar nya sidebar blog anda,bisa anda tambahkan css Berikut
#sticky-sidebar{width:100%;max-width:300px}
Setelah itu Save Template dan silahkan anda lihat hasil nya di bagian sidebar blog
Nah itulah cara memasangan Sticky di Sidebar/widget Blog,semoga artikel nya bisa membantu dan selamat mencoba

adscblog

Recommendation Apps

ads1

Previous

Posting Lebih Baru

Next

Posting Lama

Posted by Dede Ubed, Published at 29 Juni and have 0 komentar