Cara Membuat Sticky Sidebar Atau Sidebar Melayang

Cara Membuat Sticky Sidebar Atau Sidebar Melayang

Bola Hero Gawai

Cara Membuat Sticky 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 Sticky 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 Sticky Sidebar Atau Sidebar Melayang ini saya dapat setelah keliling ke sana ke mari untuk mendapatkan scriptnya, dan akhirnya menemukannya di Belajar blogspot.

Sticky Sidebar Atau Sidebar Melayang

Cara Membuat Sticky 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 = $("#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 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 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 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 Sticky Sidebar Atau Sidebar Melayang ini mudah-mudahan dapat dimengerti dan bermanfaat bagi kita semua...

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

14 Comments Add Comment

koq scrollx g bisa berhenti ya jalan trus.....hehehe

Balas

bah Terimakasi banyak Kompi Ajaib ^_^

Request Saya Langsung di share

Salam Sukses!

Balas

plz guide me how to creat side bar home page diffrent and post page diffrent

Balas

Maybe you can learn on this http://www.kompiajaib.com/2013/04/membuat-sesuatu-berbeda-di-homepage-dan.html

i hope it's can answer your question...bro

Balas

kode warna biru ada 3,
3 3nya di isi dengan id yg sama apa bagaimana mas ?
blm faham :/

Balas

ya ... harus di isi dengan kode yang sama...

Balas

mas kompi mau nanya , maaf agak melenceng dari topik , gimana cara membuat tite pada alexa dan letak alexa berada di tengah ...?

Balas

Gunakan kode ini agar widget alexa ada di tengah

<div style="text-align:center">

KODE ALEXA

</div>


Untuk titlenya sama seperti biasa tambahkan title ke linknya

<a href=...... title='TITLE DI SINI'>....</a>

Balas

mas kompi code yang kedua diletakin dimana

Balas

Coba refresh halamannya :)

Balas

Sama-sama :) Salam sukses juga.

Balas

Silahkan dicoba mas :)

Balas

Kode yang kedua itu hanya sebagai contoh untuk mengambil ID widgetnya mas :)

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×