Cara membuat fixed atau sticky widget blogspot tutorial bergambar

Posted by Unknown on

Cara membuat fixed atau sticky widget blogspot tutorial bergambar - Pada tutorial kali ini DB, akan berbagi tutorial mengenai fixed atau sticky widget, kalian bisa lihat widget postingan populer blog ini selalu mengikuti scroll namun tidak pernah melebihi batas, maksudnya disini adalah sticky widget merupakan sebuah cara dimana ketika halaman digulirkan kebawah widget yang kita maksud akan mengikuti kebawah dan akan berhenti sampai batas yang ditentukan dengan demikian widget yang dijadikan sticky tidak akan melewati footer wrapper.

Tutorial ini khusus untuk pengguna web blogspot namun tidak menutup kemungkinan tutorial ini dapat diterapkan untuk web yang lain.

langkah pertama
Login blogspot lalu > klik template > klik edit HTML.
setelah diklik maka tampilan akan berubah menjadi halaman yang penuh dengan code-code.


langkah kedua
sekarang cari code "</body>" didalam area code HTML dengan menggunakan search box.



setelah ditemukan copy kan script page number di atas "</body>".
<script type='text/javascript'>
//<![CDATA[
$(function() {
  if ($('#sticky-sidebar').length) {
    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; 
      var windowTop = $(window).scrollTop();
      if (stickyTop < windowTop) {
        el.css({
          position: 'fixed',
          top: 20
        });
      } else {
        el.css('position', 'static');
      }
      if (limit < windowTop) {
        var diff = limit - windowTop;
        el.css({
          top: diff
        });
      }
    });
  }
});
//]]>
</script>

Keterangan :

  1. if ($('#sticky-sidebar').length) { // Ganti "#sticky-sidebar" dengan ID tertentu
  2. var limit = $('#footer-wrapper').offset().top - stickyHeight - 20; // Jarak berhenti di "#footer-wrapper"
  3. top: 20 // Jarak atau margin sticky dari atas

langkah ketiga
jika semua css dan script page number pada blogspot sudah dimasukan, silahkan klik "simpan template / save template".

Proses pemasangan fixed atau sticky widget telah selesai, namun jika lebar widget malah membesar saat di scroll itu kemungkinan css width nya perlu diatur. contoh blog ini id dari sticky widgetnya adalah "PopularPosts1", kita kembali ke langkah kedua namun kita ganti searchnya dengan "PopularPosts1", biasanya untuk css penempatanya ada diatas "]]></b:skin>". Masukan code berikut ini :
#PopularPost1{width:100%;max-width:280px} //ubah 280px sesuai dengan ukuran widget kalian

 Sekarang kamu bisa cek web blog kamu. jika hasil yang tampil tidak sesuai dengan tutorial ini beritahu DB via comment. Dan jika kamu merasa tutorial ini bermanfaat, bantu DB untuk membagikan tutorial ini.

 Sekarang DB dilengkapi dengan fasilitas download untuk semua tutorial, untuk mendownload tutorial ini tinggal klik gambar download.

Comments

Post a Comment