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 arahan tersebut di Notepad. Jadinya agak susah ketika mau mencoba memasangnya lagi dengan tutorial yang pernah saya buat.

Big thanks to kangghani yang sudah menyebarkan 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 saya juga lagi menjalankan proyek blogging baru, dan alasannya 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 tawaran pemasangan Sticky Widget yang benar itu ibarat apa.

1. Login to Blogger
2. Theme > Edit HTML
3. Copy arahan 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 arahan </body> atau &lt;!--</body>--&gt;&lt;/body&gt;

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

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

Baca Juga: Cara Mempercepat Loading Blog ibarat 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 arahan 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 kesudahannya akan ibarat 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 kawasan 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 ketika ini yaitu arahan 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 arahan 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 arahan footer-wrapper untuk pengaturan CSS dan ID-nya.

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

Perlu diketahui, biar 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.

Sumber https://tipsseokiller.blogspot.com/

Bagikan Artikel ini