Cara Membuat Widget Sticky di Sidebar Blog Terbaru
Cara Membuat Sidebar Sticky di Blog - Sampai sekarang ini sudah banyak blogger yang menggunakan widget sticky untuk di pasang pada sidebar blognya.
Sticky widget ini juga sebenarnya bisa dipasangkan pada header blog, contohnya mungkin kamu pernah melihat header pada blog yang menggunakannya melayang.
Pada kesempatan kali ini ZalrizBlog akan membagikan tutorial tentang cara membuat sidebar sticky di blogspot.
Sebenarnya apa sih tujuan memasang script widget sticky di blogspot ini? Banyak sih sebenarnya, mungkin paling bisa dikatakan adalah agar tampilan blog/website lebih terlihat rapi
Manfaat Memasang Widget Sticky di Blog
- Blog terlihat rapi
- Sidebar blog akan mengikuti ke bawah atau ke atas jika di scroll
- Iklan pada widget sidebar terlihat profesional
- Biasanya banyak terjadi klik iklan, dll
Biasanya tidak hanya iklan saja yang diletakkan pada sidebar sticky ini, blogger atau pemilik website meletakkan postingan populer, kategori, newslatter dan lain sebagainya
Nah gimana sob masih bingung seperti apa widet sticky itu? Lalu bagaimana sih cara memasang sidebar sticky di blog ini? Yuk sob simak penjelasannya di bawah ini
Cara Membuat Sidebar Sticky
Cara membuat widget sidebar sticky ini tidak sangat sulit kok sob, kamu cukup copy kode script yang akan admin bagikan kemudian meletakkannya di edit template HTML pada blog.
Langkah Memasang Sticky Widget
- Masuk ke Blogger
- Pilih Tema
- Edit HTML
- Cari widget yang akan dijadikan Sticky yang berada di sidebar
- Copy kode id widget tersebut
Memasang Script Widget Sticky Sidebar
- Buka Blogger
- Pilih Tema ⇨ edit HTML
- Pasang script di bawah ini sebelum </body> ganti #HTML4 dengan id widget kamu yang akan dijadikan Sticky, ganti #disqus_thread dengan id widget kamu agar ketika discroll berhenti di widget tersebut
<b:if cond='data:blog.isMobileRequest == "false"'>
<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=$("#disqus_thread").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>
Memasang CSS Sticky Widget
Selanjutnya adalah memasang kode CSS agar tampilannya tidak berantakan dan responsive untuk pengguna mobile, pasang kode CSS berikut tepat di atas kode ]]></b:skin>
@media only screen and (max-width:320px)#HTML4{width:100%;max-width:100%}}
Ganti ukuran 320px sesuai dengan ukuran sidebar blog kamu, ganti #HTML4 dengan id widget yang dijadikat Sticky
Akhir Kata
Itulah cara membuat sidebar sticky di blogspot yang dapat ZalrizBlog bagikan semoga bermanfaat jangan lupa berkomentar jika tidak mengerti, terima kasih.