Cara Membuat Sticky Widget di Sidebar Blog - Panduan Blog
Cara Membuat Sticky Widget di Sidebar Blog

Tutorial Cara Membuat Sticky Widget di Sidebar Blogger. Sticky Widget berfungsi untuk membuat widget tertentu menjadi sticky atau melayang dan berjalan mengikuti kursor ketika halaman situs digulir ke atas atau kebawah. biasanya sticky widget ini diterapkan pada widget yang penting misalnya pada widget recent post (list artikel terbaru), widget yang berisi iklan, atau widget lainnya.

Cara Membuat Sticky Widget di Sidebar Blog


1. Masuk ke Blogger.

2. Pada panel navigasi, silahkan pilih Tema kemudian klik Edit HTML.

3. Silahkan tambahkan kode dibawah ini sebelum kode </body>.

<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
<script type='text/javascript'>
//<![CDATA[
// Sticky widget
$(function(){if($("#HTML1").length){var o=$("#HTML1"),t=$("#HTML1").offset().top,i=$("#HTML1").height();$(window).scroll(function(){var s=$("#comments").offset().top-i-20,f=$(window).scrollTop();if(f>t?o.css({position:"fixed",top:15}):o.css("position","static"),f>s){var n=s-f;o.css({top:n})}})}});
//]]>
</script>
</b:if>

Keterangan


- Silahkan ganti "HTML1" dengan ID widget yang ingin dijadikan sticky.
- Kode berwarna ungu berfungsi untuk menghilangkan efek sticky pada perangkat mobile.
- Angka "15" digunakan untuk memberikan jarak widget.
- #comments untuk memberhentikan widget sticky. Silahkan sesuaikan dengan template blog kamu.

Untuk menemukan ID widget, silahkan buka Tata Letak kemudian klik edit pada widget yang akan dijadikan sticky. Untuk lebih lengkapnya perhatikan gambar dibawah ini.

Cara Membuat Sticky Widget di Sidebar Blog

4. Silahkan tambahkan kode CSS dibawah ini sebelum kode </b:skin>.

#HTML1{width:100%;max-width:300px}

Keterangan

- Silahkan ganti "HTML1" dengan ID widget yang tadi.
- Kamu bisa mengatur panjang widget dengan mengubah ukuran width.

5. Jika sudah selesai, silahkan klik Simpan Tema, kemudian lihat hasilnya.

Pada tahap ini kamu sudah selesai membuat widget kamu menjadi sticky atau melayang. Pastikan kamu tidak menempatkan iklan dari Google AdSense karena menurut kebijakan penempatan iklan, penayang tidak dibolehkan untuk membuat iklan adsense menjadi melayang. Hal ini tentu sangat beresiko yang bisa menyebabkan akun adsense dibanned selamanya.

Silahkan gunakan Sticky Widget untuk widget yang menurut kamu penting untuk dilihat oleh pengunjung. Saya sarankan memasang widget recent post atau widget artikel terbaru agar pengunjung dapat menemukan artikel lainnya dan meningkatkan kunjungan.

Baca juga: Cara Membuat Widget Recent Post di Sidebar Blogger

Sekian pembahasan mengenai Cara Membuat Sticky Widget di Sidebar Blog semoga bermanfaat. Apabila ada hal yang ingin ditanyakan, silahkan bertanya melalui kolom komentar dibawah ini, terima kasih dan semoga berhasil.
Panduan Blog

Cara Membuat Sticky Widget di Sidebar Blog

Cara Membuat Sticky Widget di Sidebar Blog

Tutorial Cara Membuat Sticky Widget di Sidebar Blogger. Sticky Widget berfungsi untuk membuat widget tertentu menjadi sticky atau melayang dan berjalan mengikuti kursor ketika halaman situs digulir ke atas atau kebawah. biasanya sticky widget ini diterapkan pada widget yang penting misalnya pada widget recent post (list artikel terbaru), widget yang berisi iklan, atau widget lainnya.

Cara Membuat Sticky Widget di Sidebar Blog


1. Masuk ke Blogger.

2. Pada panel navigasi, silahkan pilih Tema kemudian klik Edit HTML.

3. Silahkan tambahkan kode dibawah ini sebelum kode </body>.

<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
<script type='text/javascript'>
//<![CDATA[
// Sticky widget
$(function(){if($("#HTML1").length){var o=$("#HTML1"),t=$("#HTML1").offset().top,i=$("#HTML1").height();$(window).scroll(function(){var s=$("#comments").offset().top-i-20,f=$(window).scrollTop();if(f>t?o.css({position:"fixed",top:15}):o.css("position","static"),f>s){var n=s-f;o.css({top:n})}})}});
//]]>
</script>
</b:if>

Keterangan


- Silahkan ganti "HTML1" dengan ID widget yang ingin dijadikan sticky.
- Kode berwarna ungu berfungsi untuk menghilangkan efek sticky pada perangkat mobile.
- Angka "15" digunakan untuk memberikan jarak widget.
- #comments untuk memberhentikan widget sticky. Silahkan sesuaikan dengan template blog kamu.

Untuk menemukan ID widget, silahkan buka Tata Letak kemudian klik edit pada widget yang akan dijadikan sticky. Untuk lebih lengkapnya perhatikan gambar dibawah ini.

Cara Membuat Sticky Widget di Sidebar Blog

4. Silahkan tambahkan kode CSS dibawah ini sebelum kode </b:skin>.

#HTML1{width:100%;max-width:300px}

Keterangan

- Silahkan ganti "HTML1" dengan ID widget yang tadi.
- Kamu bisa mengatur panjang widget dengan mengubah ukuran width.

5. Jika sudah selesai, silahkan klik Simpan Tema, kemudian lihat hasilnya.

Pada tahap ini kamu sudah selesai membuat widget kamu menjadi sticky atau melayang. Pastikan kamu tidak menempatkan iklan dari Google AdSense karena menurut kebijakan penempatan iklan, penayang tidak dibolehkan untuk membuat iklan adsense menjadi melayang. Hal ini tentu sangat beresiko yang bisa menyebabkan akun adsense dibanned selamanya.

Silahkan gunakan Sticky Widget untuk widget yang menurut kamu penting untuk dilihat oleh pengunjung. Saya sarankan memasang widget recent post atau widget artikel terbaru agar pengunjung dapat menemukan artikel lainnya dan meningkatkan kunjungan.

Baca juga: Cara Membuat Widget Recent Post di Sidebar Blogger

Sekian pembahasan mengenai Cara Membuat Sticky Widget di Sidebar Blog semoga bermanfaat. Apabila ada hal yang ingin ditanyakan, silahkan bertanya melalui kolom komentar dibawah ini, terima kasih dan semoga berhasil.
Load comments

Subscribe Our Newsletter