Tentang Ilmu Komputer, Android, Panduan Blogging dan Tips di Internet.

Membuat Sticky Widget pada Sidebar Blog

Ada widget menarik untuk  Blog nih sobat, namanya Sticky Widget. Saya dan mungkin sobat Blogger pun sudah sering melihat widget ini, namun saya baru tau nama dari widget ini yaitu Sticky Widget. Ingin tau lebih banyak tentang Sticky Widget dan cara memasangnya? Silakan simak terus artikel ini tentang Membuat Sticky Widget pada Sidebar Blog.

Seperti apa sih Sticky Widget itu? Pengertian simple-nya Sticky Widget itu widget yang menempel. Namun di dalam Blogspot, Sticky Widget adalah widget pada posisi tertentu yang akan selalu mengikuti tampilan monitor walaupun tampilan halaman terus digulir namun akan berhenti pada posisi awal yang telah ditentukan.

Membuat Sticky Widget

Sudah jelaskan bagaimana tampilan Sticky Widget ini? Biasanya Sticky Widget dipasang pada Sidebar bagian bawah. Karena jika dipasang pada sidebar bagian atas, hasilnya akan bertabrakan. Sangat berguna jika dipasang widget-widget sosial seperti rekomendasi situs Google +1, Tombol Like / Like Box Facebook, dll. Dan Sticky Widget ini tidak akan mengganggu pandangan pengunjung Blog sobat, tidak seperti halnya Widget Melayang.

Bagaimana, sobat tertarik untuk memasang Sticky Widget ini pada Blog sobat? Untuk sobat yang ingin memasangnya, silakan simak langkah-langkah yang akan saya jelaskan dengan teliti, karena memang menurut saya pembuatnya agak rumit. OK, kita mulai.

Membuat Sticky Widget pada Sidebar Blog

  • Pertama, pastikan sobat telah memasang widget pada sidebar yang akan dibuat Sticky.
  • Login ke akun Blogger sobat.
  • Masuk pada bagian Template dan klik Edit Template.
  • Dengan tombol ctrl+F, sobat cari kode ]]></b:skin> dan letakan kode berikut diatas kode ]]></b:skin>.

#catcher{
height:930px;
}

#sticky{
width:300px;
height:auto;
}

  • Pada kode berwarna merah, sobat ubah sesuai dengan tinggi widget catcher pada Blog sobat. Widget Catcher adalah widget yang tidak akan dibuat Sticky atau yang berada di atas widget Sticky. Jadi silakan hitung berapa tinggi widget yang tidak akan dibuat sticky.
  • Sobat ubah kode berwarna biru dengan ukuran lebar sidebar/Sticky Widget.
Membuat Sticky Widget pada Sidebar Blog
  • Contohnya terdapat catcher widget yaitu popular posts 300px, label 300px, dan blog archive 300px, dengan jarak antar widget 10px. Jadi sobat harus memberi lapak untuk catcher widget dengan tinggi 300px+10px+300px+10px+300px+10px = 930px.
  • Jika sobat bingung menentukan tinggi catcher widget, silakan dikira-kira saja dahulu, nanti bisa sobat ubah lagi ketika Sticky Widget berhasil dibuat.
  • Jika hasilnya catcher dengan sticky menempel, sobat tambah ukuran catcher-nya. Dan Jika hasilnya catcher dengan sticky terlalu jauh, sobat kurangi ukuran catcher-nya.
  • Langkah berikutnya, dengan tombol ctrl+F sobat cari kode </body> dan letakan kode berikut diatas kode </body>.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
$(document).ready(function() {
        function isScrolledTo(elem) {
            var docViewTop = $(window).scrollTop(); //num of pixels hidden above current screen
            var docViewBottom = docViewTop + $(window).height();
            var elemTop = $(elem).offset().top; //num of pixels above the elem
            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;0px&#39;);
            }
            var stopHeight = catcher.offset().top + catcher.height();
            if ( stopHeight &gt; sticky.offset().top) {
                sticky.css(&#39;position&#39;,&#39;absolute&#39;);
                sticky.css(&#39;top&#39;,stopHeight);
            }
        });
    });
</script>

5. Selanjutnya, bagian ini sedikit membingungkan. Dengan tombol ctrl+F sobat cari kode <div id='sidebar-wrapper'> atau <div id='sidebar'> atau sebagainya. Akan terlihat kode kurang lebih seperti berikut.

      <div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
          <b:widget id='HTML4' locked='false' title='' type='HTML'>
          <b:widget id='HTML1' locked='false' title='Random Posts' type='HTML'>
          <b:widget id='HTML15' locked='false' title='' type='HTML'>
          <b:widget id='PlusFollowers1' locked='false' title='' type='PlusFollowers'>
          <b:widget id='Followers1' locked='false' title='' type='Followers'>
        </b:section>
      </div>

  • Sobat harus paham fungsi dari kode widget id-widget id diatas. Contohnya sobat akan membuat kode berwarna ungu sebagai catcher widget dan kode berwarna hijau sebagai Sticky Widget. Maka sobat harus mengubah kode diatas dengan sedikit menambahlan kode HTML. Perhatikan kode berikut.

      <div id='sidebar-wrapper'>
<div id='catcher'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
          <b:widget id='HTML4' locked='false' title='' type='HTML'>
          <b:widget id='HTML1' locked='false' title='Random Posts' type='HTML'>
        </b:section>
</div> 
<div id='sticky'>
        <b:section class='sidebar1' id='sidebar1' preferred='yes'>
          <b:widget id='HTML15' locked='false' title='' type='HTML'>
          <b:widget id='PlusFollowers1' locked='false' title='' type='PlusFollowers'>
          <b:widget id='Followers1' locked='false' title='' type='Followers'>
        </b:section>
</div>
      </div>

  • Tambahkan kode berwarna merah pada kode tersebut. Perhatikan perubahan kode yang terjadi.
  • Setelah selesi, klik Simpan Template.
Ok. lihat hasilnya. Pada bagian Tata Letak, Widget yang dibuat Sticky bisa ditambah. Namun jika sobat menambahkan widget yang dibuat catcher, tambah pula ukuran tinggi bagian catcher. Semoga sobat berhasil dan tidak bingung dengan pembahasan saya kali ini.

Artikel terkait : Membuat Sticky Widget pada Sidebar Blog

Artikel Blog Regi Brader Lainnya :

15 komentar:

  1. Gan, kok saya hilang mulu sih ?
    Kan saya udah ikutin cara agan, trus saya Save Template.
    Tapi pas saya kembali, ada tulisan
    "Anda memiliki perubahan yang belum disimpan dan akan hilang",
    trus saya klik OK.
    Tapi pas saya lihat blog, widget yang saya sticky kan sudah bisa, tapi pas saya buka beranda blog, dan buka blog saya lagi, stickynya sudah hilang.
    Tolong pencerahannya ya gan...!!

    ReplyDelete
  2. Mungkin "Anda memiliki perubahan yang belum disimpan dan akan hilang", berarti pengaturan belum berhasil disimpan..
    Coba, ketika sobat mengedit template, jangan sambil membuka opsi Tata Letak pada Tab (pada browser) lain. Soalnya saya pernah mengalami kegagalan seperti ini, dan disebabkan kasus tersebut...

    ReplyDelete
  3. Replies
    1. Susahnya di bagian mana?
      Memang sob, untuk yang pertama kali mencoba memasang sticky widget dengan cara ini mungkin akan agak bingung. Sobat harus benar-benar mengerti dahulu langkah-langkah yang saya jelaskan. Maaf jika penjelasan dari saya kurang mudah untuk dimengerti. Terus berusaha dan mencoba yah sob...

      Delete
  4. halo mas, salam kenal:). Saya sudah coba dan senang akhirnya berhasil, namun letak widget stickynya tidak sejajar dengan widget yang lainnya sehingga kurang rapi. Mohon pencerahannya mas. Makasih.

    ReplyDelete
    Replies
    1. Setelah tadi saya mengunjungi website sobat, saya lihat ukuran sidebar-nya yang lebih kecil. Silakan ubah ukuran lebar sticky widget sesuai dengan ukuran lebar sidebar.

      Delete
  5. Makasih mas pencerahannya, saya mau coba dulu :)

    ReplyDelete
  6. mantap gan, kunjungi juga blog ane ya http://prediksibola888.blogspot.com/

    ReplyDelete
  7. Sangat memudahkan, yang seperti ini yang banyak dicari,,,,,

    ReplyDelete
  8. kok warna background widget malah berubah warna sob?

    ReplyDelete
    Replies
    1. kalo punya saya backroung sticky widget saja yang berubah sob, sobat background seluruh widget?

      Delete
  9. mantap nih gan. bokmark dulu

    sempatkan mampir juga ya gan di http://www.kliniktekno.com

    ReplyDelete
  10. mantap work gan cek disini..
    http://cum2him.blogspot.com/

    makasih ya..

    ReplyDelete
  11. Maaf gan boleh tanya. Ko sticky Widget di Blog saya LUBER gitu ya ? jadi engga sesuai dengan Ukuran SIDEBARnya. Ada solusi gan ? Coba cek blog saya .. Contoh Makalah

    ReplyDelete

Copyright © 2013-2016 Blog Regi Brader - All Right Reserved