Cara Membuat Sticky Widget Sidebar Melayang saat di Scroll kemanapun

Assalamualaikum..

Cara Membuat Sticky Widget Sidebar Melayang saat di Scroll kemanapun - Sticky widget adalah Widget yang dalam posisi tertentu akan slalu mengikuti posisi monitor, meskipun halamannya terus di scroll sampai kebawah namun akan berhenti di posisi awal yang telah di tentukan.

Nah, kali ini saya akan memosting bagaimana caranya agar widget tersebut bisa melayang atau menempel pada monitor saat halaman blg di d.scroll sampai ke bawah. Caranya mudah sob, sobat cuma butuh ketelitian dan jangan sampai salah tempat ya sob.

Berikut langkah-langkahnya sob:
1. Buka blog sobat.
2. Klik Template
3. Kemudian klik Edit HTML
4. Cari kode </body>, kemudian copy kode script untuk sticky di bawah ini dan pastekan di atas kode </body>.

 <script type='text/javascript'>
      $(document).ready(function(){
    $("#on-top").sticky({topSpacing:0});
      });
    </script>
<script src='https://googledrive.com/host/0B0Dd8XYrtgdDQS03RzFLSmx6RVE/sticky.js' type='text/javascript'></script>

5.  Setelah itu gunakan kode script di bawah ini pada widget sidebar sobat.

<div id="on-top">code widget yang ingin di beri posisi sticky</div>

CONTOH: Berikut contoh saya akan menggunakan widget popular post, label, dan profil agar bisa melayang:

<div id="on-top"><b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Label1' locked='false' title='Categories' type='Label'>
    <b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
    <b:if cond='data:display == &quot;list&quot;'>
      <ul>
      <b:loop values='data:labels' var='label'>
        <li>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </li>
      </b:loop>
      </ul>
    <b:else/>
      <b:loop values='data:labels' var='label'>
        <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </span>
      </b:loop>
    </b:if>
    <b:include name='quickedit'/>
  </div>
</b:includable>
  </b:widget>
</b:section>
</div></div>

Selamat mencoba sob, semoga bermanfaat bagi sobat.
Terimakasih sudah berkunjung.

Wassalamu'alaikum..