Cara Membuat Stiky Sidebar Atau Sidebar Melayang

Untuk mempercantik tampilan blog, kita bisa menggunakan berbagai widget dengan berbagai bentuk dan fungsi yang menakjubkan. Namun perlu diingat, perhatikan juga size dan waktu loading blog. karena terlalu banyak widget yang diterapkan pada blog akan membebani blog itu sendiri, sehingga blog akan berat dan lama untuk dibuka. 

Pilihlah widget yang benar-benar diperlukan. Usahakan size blog sekitar 100 kb atau kurang. Untuk mengetahui size dan waktu loading blog bisa Anda gunakan Speed Test DI SINI.

Nah kali ini saya akan share Cara Membuat Stiky Sidebar Atau Sidebar Melayang. Dengan cara ini sidebar atau widget yang ada di sidebar akan tetap terlihat atau tetap tampil ketika halaman blog di-scroll ke atas atau ke bawah. Baru-baru ini saya mencoba menerapkannya di Kompi Ajaib dan berhasil. Dan kini akan saya share untuk Anda yang memerlukannya. Cara Membuat Stiky Sidebar Atau Sidebar Melayang ini saya dapat setelah keliling ke sana ke mari untuk mendapatkan scriptnya, dan akhirnya menemukannya di Belajar blogspot.

Cara Membuat Stiky Sidebar Atau Sidebar Melayang ini cukup mudah, silahkan simak tutorial sederhana saya di bawah ini.

Langkah Pertama

Silahkan login ke blog Anda, kemudian pergi ke dashboard dan klik template untuk mengedit HTML, karena kita akan sedikit mengobok-obok kode HTML blog. Untuk berjaga-jaga terjadi kesalahan pengeditan, alangkah baiknya backup dulu template blog Anda dengan cara klik tombol Backup/Restore di sebelah kanan atas. Setelah selesai dibackup, silahkan klik Edit HTML >> Proceed >> Centang kotak kecil pada Expand Widget Template.

Langkah Kedua

Cari kode </head>, gunakan CTRL + F pada keyboard untuk memudahkan pencarian. Setelah ketemu, copy kode di bawah ini dan simpan DI ATAS kode tadi.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> $(function(){var offset=$(&quot;#sidebar-wrapper&quot;).offset();var topPadding=144;$(window).scroll(function(){if($(window).scrollTop()&gt;offset.top){$(&quot;#sidebar-wrapper&quot;).stop().animate({marginTop:$(window).scrollTop()-offset.top+topPadding})}else{$(&quot;#sidebar-wrapper&quot;).stop().animate({marginTop:0})}})}); </script>

Perhatikan kode yang berwarna merah (JQuery), bila kode tersebut sudah ada di template blog Anda maka kode warna merah tersebut tidak perlu digunakan. Kode yang berwarna biru adalah kode css atau ID untuk sidebar, namun kode css atau ID sidebar tiap template berbeda-beda silahkan sesuaikan dengan kode css atau ID sidebar blog Anda.

Kode css atau ID yang berwarna biru di atas untuk memberikan efek stiky pada keseluruhan sidebar blog untuk blog yang memiliki sidebar yang sedikit atau pendek. Namun untuk blog yang memiliki sidebar yang banyak, pilihlah widget sidebar yang benar-benar diperlukan untuk selalu ditampilkan dan simpanlah widget tersebut pada bagian paling bawah sidebar.

Kini ganti kode yang berwarna biru dengan ID widget tersebut. Untuk mendapatkan ID widget cukup mudah, carilah dengan menggunakan CTRL + F pada keyboard dan ketikan title widget tersebut. Biasanya akan seperti di bawah ini.

<b:widget id='HTML4' locked='false' title='Like us and subscribe to get updates!' type='HTML'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:includable>
</b:widget>

Perhatikan kode yang berwarna merah di atas. Itulah kode ID widget yang diperlukan untuk menggantikan kode berwarna biru tadi.

Langkah Ketiga

Save atau simpanlah template blog dan lihat hasilnya... Selesai.

Demikianlah sharing postingan Cara Membuat Stiky Sidebar Atau Sidebar Melayang ini mudah-mudahan dapat dimengerti dan bermanfaat bagi kita semua...

sumber