Penulis: Moch Adnan dipublikasikan: 21 Mei 2022
Cara Membuat Sticky Widget 100% Work Di Blogger
Cara Membuat Sticky Widget 100% Work Di Blogger
Salam blogger... jumpa lagi dengan saya admin Moch Adnan Blog dan pada kali kesempatan ini saya akan coba berbagi tutorial blogger tentang Cara Membuat Sticky Widget Di Blogger yang mana tutorial ini sudah saya terapkan sendiri pada blog ini dan hasilnya 100% working dan bisa menghasilkan tampilan yang bagus pada setiap halaman blog ini.

Menurut saya dengan membuat sebuah widget menjadi Sticky dirasa sangat membantu menyempurnakan penampilan halaman blog, di samping itu pada akhirnya saya juga bisa menonjolkan sesuatu pada pengunjung ketika mereka menscroll kebagian bawah halaman. Tentu untuk pengguna template yang menggunakan sidebar membuat Sticky Widget akan memberi kegunaan lebih pada halaman blog. Yang terpenting adalah jangan sampai widget yang kita buat Sticky ini menjadi timpang tindih dan malah membuat tampilan blog menjadi rusak ketika kita selesai membuatnya.

Sekarang saya coba uraikan saja step by step cara membuatnya demi mempersingkat waktu ya sob, disini saya menggunakan dua buah kode yakni satu kode CSS dan satu lagi berupa kode script

Kode CSS : 
#HTML4 {width:100% ;} {max- width: 300px ; }
Kode Script : 

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

Langkah selanjutnya
  • Login ke blogger, pilih 'Tema' lalu pilih 'Edit HTML' Copy dan pastekan kode CSS di atas tepat sebelum kode ]]></b:skin> Lakukan hal yang sama pada kode Script di atas dan pastekan ke dalam template blog tepat sebelum kode </body>

Keterangan 1 : untuk kode CSS sobat bisa merubah ukuran width: 300px dengan ukuran masing - masing sidebar blog sobat. Dan pada tulisan 'HTML4' silahkan sobat ubah dengan ID widget yang ingin dibuat sticky

Baca juga : Cara Mengetahui ID widget di Blogger

Keterangan 2 : Sementara pada kode Script silahkan sobat ubah tiap-tiap tulisan 'HTML4' dengan ID widget yang ingin dibuat sticky, dan pada tulisan 'HTML5' dapat digantikan dengan id widget yang ada di bagian footer blog sobat hal ini bertujuan untuk memberi batas berhentinya widget Sticky ketika kursor menyentuh bagian bawah blog. {Top:60} dapat sobat ubah juga mengikuti tampilan blog sobat, hal ini bertujuan untuk mengatur batas widget bagian atas blog.


Klik 'Save' dan lihat hasilnya.

Pada pengalaman pertama saya menggunakan cara diatas terjadi sebuah ketidaksesuaian dengan yang saya harapkan, dimana ketika saya membuka blog ini menggunakan perangkat Android nampak ukuran widget tidak bisa menyesuaikan dengan tampilan browser Android. Artinya widget yang dibuat sticky benar-benar tidak responsive ketika saya buka di ponsel.

Saya pun mencoba mengutak-atik dibagian kode CSS, dengan mengganti pengaturan width menjadi auto dan sebagainya namun tidak juga memberikan hasil yang memuaskan. Hingga pada akhirnya saya membabat semua kode CSS tersebut dan hanya menyisakan awalan #HTML4.  atau tambahkan kode berikut 

@media only screen and (max-width:768px){ #ID-Widget {width:100%;max-width:100%} }

Tidak percuma ternyata, usaha terakhir saya membuahkan hasil yang memuaskan juga.
Dan untuk sobat semua yang ingin menmbuatnya saya ucapkan selamat mencoba cara cara ini.