Cara Membuat Dan Menjadikan Widget Melayang Di Sidebar Ketika Dilakukan Scroll Pada Laman Blog

Beberapa waktu lalu, dalam artikel yang mengulas tentang dampak yang diakibatkan setelah mengganti template yang digunakan pada sebuah blog ada yang bertanya lebih kurang demikian, “Gan cara bikin flash banner punya agan yang nyangkut ketika ke bawah itu gimana carannya gan?”. Pertanyaan tersebut, tidak lain dan tidak bukan sebenarnya adalah ditujukan untuk menanyakan tentang bagaimana cara yang digunakan untuk menjadikan widget yang terdapat pada sidebar berada pada posisi yang tetap (fixed) ketika diakukan scroll ke atas maupun ke bawah pada laman blog. Dalam hal ini widget yang dimaksud adalah seperti yang ditunjukkan dengan tanda anak panah pada gambar di atas.

Widget yang berada pada posisi tetap dan melayang di sidebar ketika dilakukan scroll seperti ini biasanya disebut pula sebagai sticky. Dimana dalam hal teknik pembuatannya sendiri sebenarnya telah banyak artikel yang memberikan uraian serta ulasan tentang hal tersebut. Akan tetapi untuk menjawab pertanyaan di atas, maka di sini saya akan memberikan uraian atas pertanyaan tersebut sesuai dengan gaya bahasa dan tulisan saya agar nantinya artikel ini tidak dianggap sebagai duplikasi konten atas artikel yang lainnya.

Baiklah, sekarang kita langsung pada pokok bahasan yang utama yaitu tentang cara membuat dan menjadikan widget melayang di sidebar ketika dilakukan scroll pada laman blog, yang mana langkah-langkah pembuatannya adalah sebagai berikut:

 

Pertama, buka editor template dan kemudian sisipkan script berikut ini di atas </body>.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/>
<script>
$(document).ready(function() {
    function isScrolledTo(elem) {
      var docViewTop = $(window).scrollTop(); 
      var docViewBottom = docViewTop + $(window).height();
      var elemTop = $(elem).offset().top; 
      var elemBottom = elemTop + $(elem).height();
      return ((elemTop &lt;= docViewTop));
    }
    var catcher = $(&#39;#catcher&#39;);
    var sticky = $(&#39;#sticky&#39;);
    $(window).scroll(function() {
      if(isScrolledTo(sticky)) {
        sticky.css(&#39;position&#39;,&#39;fixed&#39;);
        sticky.css(&#39;top&#39;,&#39;37px&#39;);
      }
      var stopHeight = catcher.offset().top + catcher.height();
      if ( stopHeight &gt; sticky.offset().top) {
        sticky.css(&#39;position&#39;,&#39;relative&#39;);
        sticky.css(&#39;top&#39;,&#39;auto&#39;);
      }
    });
  });
</script>

 

Kedua, tambahkan ID catcher dan sticky untuk rangkaian kode widget yang terdapat pada sidebar. Dalam hal ini catcher digunakan untuk menandai widget yang ikut berpindah ketika dilakukan scroll dan sticky digunakan untuk menandai widget yang nantinya berada pada posisi tetap ketika dilakukan scroll pada laman. Dimana untuk mempermudah pemahaman dan pengerjaannya, maka perhatikan contoh penempatan kedua ID tersebut dalam rangkaian kode widget yang terdapat pada sidebar di bawah ini.

<aside>

  <div id='catcher'>
    <b:section class='sidebar' id='sidebar-1' showaddelement='yes'>
      <b:widget id='PopularPosts1' locked='false' mobile='yes' title='Artikel Populer' type='PopularPosts'>...</b:widget>
      <b:widget id='PlusBadge1' locked='false' title='Google+ Badge' type='PlusBadge'>...</b:widget>
      <b:widget id='HTML4' locked='false' mobile='yes' title='Postingan Acak' type='HTML'>...</b:widget>
      <b:widget id='FollowByEmail1' locked='false' title='Ikuti Lewat Email' type='FollowByEmail'>...</b:widget>
    </b:section>
  </div>

  <div id='sticky'>
    <b:section class='sidebar' id='sidebar-2' showaddelement='yes'>
      <b:widget id='PlusOne1' locked='false' title='+1 Button' type='PlusOne'>...</b:widget>
      <b:widget id='HTML7' locked='false' mobile='yes' title='' type='HTML'>...</b:widget>
    </b:section>
  </div>

  <div style='clear: both'/>
</aside>

Berdasarkan contoh penempatan catcher dan sticky pada rangkaian kode di atas maka dapat jabarkan sebagai berikut:

Widget yang terdapat dalam area catcher, dalam hal ini adalah widget Artikel Populer (PopularPosts1), Google + Badge (PlusBadge1), Postingan Acak (HTML4), dan Ikuti Lewat Email (FollowByEmail1), merupakan widget yang nantinya akan ikut berpindah tempat ketika dilakukan scroll pada laman.

Sementara itu widget yang terdapat dalam area sticky, dalam hal ini adalah widget PlusOne1 dan HTML7 merupakan widget yang nantinya akan berada pada posisi yang tetap (fixed) ketika dilakukan scroll pada laman.

 

Ketiga, tambahkan CSS berikut ini dalam area skin.

#catcher, #sticky{height:auto;}
#sticky{width:302px;}

Keterangan:

Jika ukuran lebar sticky (dalam hal ini adalah width:302px;) pada CSS di atas belum sesuai dengan ukuran lebar sidebar blog yang Anda kelola, maka silakan dilakukan perubahan seperlunya sesuai dengan ukuran lebar yang sesuai.

 

Keempat, lakukan pratinjau dan kemudian apabila hasilnya telah sesuai dengan yang diharapkan maka simpanlah template Anda.

 

Nah, tidak sulit bukan? Apabila tertarik untuk mengimplementasikan teknik di atas, maka tidak ada salahnya bila mencoba menerapkannya pada blog yang Anda kelola. Akan tetapi satu hal yang perlu diingat sebelum Anda mengimplementasikannya adalah, bahwasanya teknik tersebut tidaklah berlaku pada template standar (bawaan) Blogger dan hanya berlaku pada custom template saja. Sehingga jika Anda menerapkan teknik tersebut pada template bawaan yang telah disediakan oleh Blogger, maka bisa jadi hasilnya tidaklah sesuai dengan yang semestinya.

Semoga berguna, bermanfaat, dan bila dalam penerapannya terjadi kendala atau kesulitan, maka Anda dapat mengajukan pertanyaan terkait dengan kesulitan serta kendala yang Anda alami tersebut dengan cara mengeposkan komentar dalam artikel ini.

Salam.