Cara Membuat Sticky Sidebar Atau Sidebar Melayang

Untuk mempercantik tampilan blog, kita mampu menggunakan banyak sekali widget dengan banyak sekali bentuk dan fungsi yang menakjubkan. Namun perlu diingat, perhatikan juga size dan waktu loading blog. alasannya yakni 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 mampu Anda gunakan Speed Test DI SINI.

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

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

Langkah Pertama

Silahkan login ke blog Anda, kemudian pergi ke dashboard dan klik template untuk mengedit HTML, alasannya yakni kita akan sedikit mengobok-obok aba-aba 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 aba-aba </head>, gunakan CTRL + F pada keyboard untuk memudahkan pencarian. Setelah ketemu, copy aba-aba di bawah ini dan simpan DI ATAS aba-aba 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 = $("#sidebar6-wrapper").offset();
     var topPadding = 0;
     $(window).scroll(function () {
         if ($(window).scrollTop() &gt; offset.top) {
             $("#sidebar6-wrapper").stop().animate({
                 marginTop: $(window).scrollTop() - offset.top + topPadding
             })
         } else {
             $("#sidebar6-wrapper").stop().animate({
                 marginTop: 0
             })
         }
     })
 });
 </script>
 

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

Kode css atau ID yang berwarna biru di atas untuk menunjukkan efek sticky 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 diharapkan untuk selalu ditampilkan dan simpanlah widget tersebut pada bab paling bawah sidebar.

Kini ganti aba-aba yang berwarna biru dengan ID widget tersebut. Untuk menerima ID widget cukup mudah, carilah dengan menggunakan CTRL + F pada keyboard dan ketikan title widget tersebut. Biasanya akan ibarat 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 aba-aba yang berwarna merah di atas. Itulah aba-aba ID widget yang diharapkan untuk menggantikan aba-aba berwarna biru tadi.

Langkah Ketiga

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

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