Cara Mudah Membuat Sticky Widget cantik pada Sidebar Blog

Tutorial Blog: Cara Mudah Membuat Sticky Widget cantik 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 didalam Blogspot Sticky Widget adalah widget pada posisi tertentu yang akan selalu mengikuti tampilan monitor walaupun tampilan halaman terus digulung namun akan berhenti pada posisi awal yang telah ditentukan. Untuk lebih jelasnya, perhatikan gambar berikut.

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 Follow / Follow box Twitter, 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.

Pertama, pastikan sobat telah memasang widget pada sidebar yang akan dibuat Sticky.
1. Login ke akun Blogger sobat.
2. Masuk pada bagian Template dan klik Edit Template.
3. 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, yang berada diatas widget Sticky.

#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. Jika hasilnya catcher dengan sticky terlalu jauh, sobat kurangi ukuran catcher-nya.

#Sobat ubah kode berwarna biru dengan ukuran lebar sidebar/Sticky Widget.

4. 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.

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.

Tambahkan kode berwarna merah tebal pada kode tersebut. Perhatikan perubahan kode pada template milik saya.

6. 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 tidak bingung dengan pembahasan saya kali ini, hehe.

Pembaruan artikel: Artikel ini merupakan versi dari tutorial lama mengenai Cara Mudah Membuat Sticky Widget cantik pada Sidebar Blog. Beberapa langkah dan kode pada tutorial ini dibuat pada era Blogger yang berbeda, sehingga tidak semuanya masih berlaku. Jadi untuk pengaplikasian pada era sekarang belum tentu berjalan seperti ulasan artikel diatas. Namun, anda tetap diperslilahkan mencoba mengaplikasikannya apalagi ada arti nostalgia dengan Sticky Widget cantik pada Sidebar Blog ini.

Discl:

Blog ini berisi Artikel yang merupakan artikel dari Tahun 2013 lalu, namun dalam prakteknya masih dapat digunakan ataupun bisa juga tidak dapat digunakan pada era jaman sekarang Setelah di Perbaharui Kembali. Kalau teman teman blogger penasaran trik dan tips jadul ini, silahkan dicoba.

Khusus Artikel Game dan Aplikasi, untuk link unduhan/download akan saya perbaharui sesuai yang disarankan oleh peraturan T.O.S Google tahun ini. Dan juga bisa saya link-kan pada situs lain (bisa situs resmi atau situs yang menyediakan) yang berhubungan dengan artikel tersebut. Terimakasih.

- Gambar diambil dari mana saja saat itu.

Demikianlah artikel saya tentang "Cara Mudah Membuat Sticky Widget cantik pada Sidebar Blog" Semoga dapat diambil manfaatnya untuk para pengguna blogger semuanya. Akhir kata saya ucapkan terimakasih telah berkunjung ke Saungjiwa Blog ini, semoga teman teman semua dapat berkreasi dengan tutorial yang saya tampilkan. 🙏

Berkomentarlah dengan Sopan, Sara, SPAM akan dihapus...

Translate

Cara Mudah Membuat Sticky Widget cantik pada Sidebar Blog

Tutorial Blog: Cara Mudah Membuat Sticky Widget cantik pada Sidebar Blog

Discl:

Posting Komentar

Formulir Kontak