Cara Sticky 3 Widget Sidebar di Blogspot/Blogger

Cara Sticky 3 Widget Sidebar di Blogspot/Blogger - Fitur sticky widget ternyata tidak hanya tersedia pada situs yang full customizable seperti wordpress, pada blogspot pun kita dapat membuat sticky widget sidebar. Bukan hanya 1 widget sidebar saja yang dapat di sticky, tapi juga lebih dari 2 widget sidebar. Saya tahu anda sedang mencari cara sticky 3 (tiga) widget sidebar di blogspot / blogger, maka dari itu saya akan memberitahu anda bagaimana caranya.

Sticky widget sidebar sering digunakan pada artikel/post yang sangat panjang dan membuat widget penting tidak terlihat jika di-scroll ke bawah. Kegunaan lain dari sticky wisget sidebar adalah membuat iklan yang terpasang pada sidebar dapat selalu terlihat oleh visitor. Tidak hanya itu, sticky widget sidebar juga dapat digunakan untuk menambah jumlah pageview user. Sticky widget arsip, label, kategori, popular post akan menambah jumlah pageview posting. Widget sidebar akan selalu terlihat oleh visitor anda jika di-sticky. Baiklah sekarang kita mulai membahas bagaimana cara sticky 3 widget sidebar di Blogspot/Blogger.

Cara Sticky 3 (tiga) Widget Sidebar di Blogspot/Blogger

Sebelum memulai edit template ada 4 hal penting yang harus anda perhatikan, karena ada kode dan value yang harus diganti menyesuaikan dengan kode ID tiga widget yang ingin anda sticky. Jarak antar satu widget dengan widget lainnya pun dapat anda atur dan customize sesuka dengan keinginan anda.

1. Menambahkan kode CSS pada Edit HTML Template Blogspot
2. Menambahkan kode JavaScript pada Edit HTML Template Blogspot
3. Merubah kode ID Widget Sidebar pada Edit HTML Template Blogspot
4. Mengubah Jarak Sticky Widget Sidebar pada Edit HTML Template Blogspot

1. Menambahkan kode CSS pada Edit HTML Template Blogspot

• Login ke akun Blogspot/Blogger anda
• Klik Opsi Template > Edit HTML
• Silahkan copy kode CSS di bawah ini dan paste-kan di atas ]]></b:skin>

.sticky1 {
position:fixed;
top:10px;/* jarak widget ke-1 dari atas*/
z-index: 100;
}

.sticky2 {
position:fixed;
top:120px;/* jarak widget ke-2 dari atas*/
z-index: 100;
}

.sticky3 {
position:fixed;
top:230px;/* jarak widget ke-3 dari atas*/
z-index: 100;
}

2. Menambahkan kode JavaScript pada Edit HTML Template Blogspot

Copy dan Paste semua kode ini di atas </body>

<script type='text/javascript'>
$(document).ready(function() {
var stickyWidgetTop = $('#HTML5').offset().top; 
var stickyWidget = function(){
var scrollTop = $(window).scrollTop();     
if (scrollTop > stickyWidgetTop) { 
    $('#HTML5').addClass('sticky1');
} else {
    $('#HTML5').removeClass('sticky1'); 
}
};
stickyWidget();
$(window).scroll(function() {
    stickyWidget();
});
});
</script>

<script type='text/javascript'>
$(document).ready(function() {
var stickyWidgetTop = $('#HTML6').offset().top; 
var stickyWidget = function(){
var scrollTop = $(window).scrollTop();     
if (scrollTop > stickyWidgetTop) { 
    $('#HTML6').addClass('sticky2');
} else {
    $('#HTML6').removeClass('sticky2'); 
}
};
stickyWidget();
$(window).scroll(function() {
    stickyWidget();
});
});
</script>

<script type='text/javascript'>
$(document).ready(function() {
var stickyWidgetTop = $('#HTML7').offset().top; 
var stickyWidget = function(){
var scrollTop = $(window).scrollTop();     
if (scrollTop > stickyWidgetTop) { 
    $('#HTML7').addClass('sticky3');
} else {
    $('#HTML7').removeClass('sticky3'); 
}
};
stickyWidget();
$(window).scroll(function() {
    stickyWidget();
});
});
</script>

3. Merubah kode ID Widget Sidebar pada Edit HTML Template Blogspot

• Perhatikan kode javascript "Kode Sticky 1" terdapat kode ID Widget "HTML5". Ganti ketiga tulisan "HTML5" dengan kode ID Widget Sidebar yang ingin anda sticky.
• Lakukan hal yang sama pada Kode Sticky 2. Perhatikan kode javascript "Kode Sticky 2" terdapat kode ID Widget "HTML6". Ganti ketiga tulisan "HTML6" dengan kode ID Widget Sidebar yang ingin anda sticky.
• Pada Kode Sticky 3 rubah juga tulisan "HTML7" dengan kode ID Widget Sidebar yang akan anda sticky.

4. Mengubah Jarak Sticky Widget Sidebar pada Edit HTML Template Blogspot

• Jarak widget ke-1 dari atas. Perhatikan kode CSS. Ganti nilai dari "jarak widget ke-1 dari atas" tepatnya pada kode top:10px;/* jarak widget ke-1 dari atas*/, silahkan anda ganti nilainya sesuka anda, bisa 10px, 15px, 20px atau berapapun.
• Jarak widget ke-2 dari atas. Perhatikan kode CSS tepatnya pada kode "top:120px;/* jarak widget ke-2 dari atas*/. Rumusnya adalah "jarak widget ke-1 dari atas" + tinggi/width widget + jarak widget ke-1 dan ke-2 + 10px
• Jarak widget ke-3 dari atas. Lihat code CSS, tepatnya pada kode top:230px;/* jarak widget ke-3 dari atas*/. Rumusnya adalah Jarak widget ke-1 dari atas + tinggi/width widget ke-1 + jarak widget ke-1 & ke-2 + tinggi/width widget ke-2 + jarak widget ke-2 dan ke-3 + 10px