Cara Menciptakan Sticky Widget Responsive Di Sidebar Blog

Cara Pasang dan Membuat Sticky Widget Responsive di Sidebar Blog

Sebenarnya, blog ini pernah memposting cara menciptakan Sticky Widget tetap melayang hingga di bab Footer, tanpa memakai JavaScript.

Tanpa memakai JavaScript lho, ya!

Masalahnya, artikel tersebut saya hapus karena sudah banyak yang melaksanakan Copy Paste. Padahal, gak simpel mempelajarinya.

Kesalahan fatalnya, saya lupa menyimpan instruksi tersebut di Notepad. Jadinya agak susah ketika mau mencoba memasangnya lagi dengan tutorial yang pernah saya buat.

Big thanks to kangghani yang sudah mengembangkan tutorial simple dan simpel cara menciptakan Sticky Widget Responsive tetap melayang di Sidebar blog hingga di bab Footer template.

Baca Juga: Cara Membuat Widget Muncul Ditempat Tertentu di Blog

Sebagai media dokumentasi, alasannya yaitu saya juga lagi menjalankan proyek blogging baru, dan alasannya yaitu gak mungkin juga bolak balik ke blog kangghani, jadi artikel kangghani tersebut saya tulis ulang.

Cara Membuat Sticky Widget Responsive di Sidebar Blog

Sticky Widget ini intinya sudah Responsive dan telah mengikuti usulan pemasangan Sticky Widget yang benar itu menyerupai apa.

1. Login to Blogger
2. Theme > Edit HTML
3. Copy instruksi ini:

<script type='text/javascript'>
//<![CDATA[
$(function() {
if ($('#HTML1993').length) { // Ganti "#sticky-sidebar" dengan ID tertentu
var el = $('#HTML1993');
var stickyTop = $('#HTML1993').offset().top;
var stickyHeight = $('#HTML1993').height();
$(window).scroll(function() {
var limit = $('#footer').offset().top - stickyHeight - 20; // Jarak berhenti di "#footer"
var windowTop = $(window).scrollTop();
var lebar = $(window).width();
if ((stickyTop < windowTop)&&(lebar > 759)) {
el.css({
position: 'fixed',
width: '300px' // Atur dan sesuaikan dengan ukuran sidebar blog anda
top: 20 // Jarak atau margin sticky dari atas
});
} else {
el.css('position', 'static');
}
if (limit < windowTop) {
var diff = limit - windowTop;
el.css({
top: diff
});
}
});
}
});
//]]>
</script>

4. Simpan di atas instruksi </body> atau &lt;!--</body>--&gt;&lt;/body&gt;

Jangan lupa, tambahkan instruksi CSS di bawah ini di deretan-deretan instruksi CSS untuk Sidebar di template blogger:

#HTML1993{width:100%;max-width:260px;margin:0;}

Baca Juga: Cara Mempercepat Loading Blog menyerupai AMP Blogger Templates

Perhatian: baca panduan di bawah ini dulu sebelum menciptakan dan memasang Sticky Widget di Sidebar blog.

Ubah atau ganti ID widget 1993 di atas dengan ID dari Widget yang Anda targetkan. Contohnya, apabila ID widget yang ingin di melayangkan yaitu instruksi ini:

<b:widget id='HTML3' locked='false' title='' type='HTML' version='1'>...</b:widget>

Maka, ubah HTML1993 pada JavaScript di atas dengan ID widget yang ditargetkan untuk dilayangkan, yaitu HTML3. Sehingga karenanya akan menyerupai di bawah ini:

if ($('#HTML3').length) { // Ganti "#sticky-sidebar" dengan ID tertentu
var el = $('#HTML3');
var stickyTop = $('#HTML3').offset().top;
var stickyHeight = $('#HTML3').height();

Ubah juga HTML1993 pada CSS Responsive di atas dengan ID widget yang telah ditentukan. Sehingga menjadi:

#HTML3{width:100%;max-width:260px;margin:0;}

Jangan lupa, Guys... ubah juga kode #footer pada JavaScript diatas dengan lokasi daerah berhentinya widget, entah itu di Related Posts, widget komentar atau di Footer template.

Hasil secara keseluruhan, yang berhasil saya implementasikan ke dalam HTML Sang SEO Premium blogger template yang saya gunakan dikala ini yaitu instruksi dibawah ini:

<script type='text/javascript'>
//<![CDATA[
$(function() {
if ($('#HTML1993').length) { // Ganti "#sticky-sidebar" dengan ID tertentu
var el = $('#HTML1993');
var stickyTop = $('#HTML1993').offset().top;
var stickyHeight = $('#HTML1993').height();
$(window).scroll(function() {
var limit = $('#footer-wrapper').offset().top - stickyHeight - 20; // Jarak berhenti di "#footer"
var windowTop = $(window).scrollTop();
var lebar = $(window).width();
if ((stickyTop < windowTop)&&(lebar > 759)) {
el.css({
position: 'fixed',
width: '300px' // Atur dan sesuaikan dengan ukuran sidebar blog anda
top: 20 // Jarak atau margin sticky dari atas
});
} else {
el.css('position', 'static');
}
if (limit < windowTop) {
var diff = limit - windowTop;
el.css({
top: diff
});
}
});
}
});
//]]>
</script>

Dan instruksi CSS Responsive-nya adalah:

#HTML3{width:100%;max-width:300px;margin:0;}

Note: Ubah ukuran Max-Width diatas dengan ukuran Sidebar dari blog Anda, Sang SEO yaitu 300px.

Template ini, Sang SEO blogger template, memakai instruksi footer-wrapper untuk pengaturan CSS dan ID-nya.

Baca Juga: Cara Mengatasi Google+ Badge tidak muncul di Blog

Perlu diketahui, semoga Sticky Widget di Sidebar blog tidak menutupi widget lainnya di Sidebar, pastikan widget yang akan dimelayangkan berada dibagian paling bawah.

Tutorial cara pemasangan Sticky Widget ini juga berlaku untuk widget iklan Google AdSense.

Kode di atas sudah saya tambahkan ukuran lebar atau Width agar "Responsive" ketika melayang ketika di Scroll ke halaman bawah melalui layar desktop komputer atau laptop, sila disesuaikan... - 22 Feb 2018.

Itu beliau Cara Pasang Sticky Widget Responsive di Sidebar Blog. Thanks, Kangghani dan semoga berguna.

Berbagi :