Cara Membuat Widget Tidak Bergerak Saat Di Scroll "sticky"

          Sticky, atau stiker atau tempelan adalah selector atau elemen atau bagian dari blog dalam posisi tertentu akan tetap (tidak bergerak) bila layar di scroll atau digulung.
          Banyak blog yang ngebahas tentang Sticky, Sticky bisa diterapkan pada semua elemen, misal header, menu, widget pada sidebar, widget pada kolom posting dan lain sebagainya. 

          Pada blog kita bisa memasang lebih dari satu sticky. Misal kita memasang sticky untuk Menu dan sticky untuk widget Arsip Blog dan berikut ini adalah salah satu tutorial cara memasang sticky di blog dan bila tertarik untuk memasang di blog kamu, Kamu bisa mengikuti langkah-langkahnya sebagai berikut. 

Smoga Bermanfaat ;

*Pertama ;

          Pertama-tama masuk ke dasboard blogspot Anda, lalu pilih Template, Edit HTML, Pasang script jquery berikut di atas </head> untuk memudahkan dalam mencarinya tekan CTRL + F

 <script async='async' src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js' type='text/javascript'/>

 

*Kedua ;

         Tentukan elemen atau selector atau bagian mana yang hendak dibuat sticky. Dalam contoh ini yang akan dibuat sticky nya adalah widget "Recommended Link" dengan selector #Label2. atau yang lain sesuka kalian lalu copy script berikut dan letakkan di atas </body>. 

<script type='text/javascript'>$(document).ready(function(){var a=$(&quot;#HTML1&quot;).offset().top;var b=function(){var c=$(window).scrollTop();if(c&gt;a){$(&quot;#HTML1&quot;).addClass(&quot;sticky1&quot;)}else{$(&quot;#HTML1&quot;).removeClass(&quot;sticky1&quot;)}};b();$(window).scroll(function(){b()})});</script>

*Ketiga ;

       kangkah slanjutnya copy CSS sticyky berikut dan letakkan di atas ]]></b:skin>

.sticky1 {

  position:fixed;

  top:0px;

  z-index:10000;

}

     Atau mau dengan tampilan sticky berbeda dengan aslinya bisa ditambah dengan variasi CSS seperti ;

.sticky1 {

  position:fixed;

  top:0px;

  z-index:10000;

  width:250px;

  background: #EDF5EC;

  padding: 10px;

  border: 1px solid #af1641;

  border-radius: 0 0 4px 4px;

}

      Silahkan ganti selector warna merah dengan selector dari widget yang akan dibuat untuk sticky.
Css kode warna hijau adalah kode CSS untuk tampilan sticky.

      Terus jika ingin membuat 2 sticky ? caranya tinggal menambahkan satu script dan satu CSS lagi. Yang diperlukan hanya merubah selector id dan merubah CSS sticky nya.

      Misalnya kita akan menambah satu sticky lagi yaitu pada widget "Arsip Blog" dengan selector #BlogArchive1 maka kita harus memasang script sticky dengan id atau class #BlogArchive1 dan CSS sticky nya adalah .sticky2 sebab .sticky1 telah digunakan pada sticky yang pertama.

       untuk CSS sticky2

.sticky2 {
  position:fixed;
  top:161px;
  margin-top:15px;
  z-index:10000;
  width:250px;
  background: #FEF3DE;
  padding: 10px;
  border: 1px solid #af1641;
  border-radius:4px;} 

       untuk SCRIPT sticky2

<script type='text/javascript'>$(document).ready(function(){var a=$(&quot;#HTML2&quot;).offset().top;var b=function(){var c=$(window).scrollTop();if(c&gt;a){$(&quot;#HTML2&quot;).addClass(&quot;sticky2&quot;)}else{$(&quot;#HTML2&quot;).removeClass(&quot;sticky2&quot;)}};b();$(window).scroll(function(){b()})});</script>

       Untuk peletakan caranya masih sama dengan posisi di atas dan bila semua cara di atas tidak berhasil coba hapus cache browser kamu. Terus bila masih tidak bisa juga kemungkinan post di halamat tersebut terlalu pendek. Dan bila masih belum juga bisa, Sebaiknya kalian cari template yang udah ada stickynya heheheh😫