Cara Membuat Sticky Widget di Sidebar Blogger | Assalamualaikum wr.wb. Tahukah kalian apa yang dimaksud dengan Sticky Widget itu? Sticky yang berarti Lengket dalam kamus bahasa inggris, Widget tentunya kalian sudah tahu dengan ini bagi kalian seorang blogger.
Makara Sticky Widget ini yakni berfungsi untuk menciptakan sebuah widget tertentu menjadi sticky atau melayang dan berjalan mengikuti kursor yang dikala halaman situs digulir ke atas atau kebawah. Dan Penerapan sticky Widget ini biasanya diterapkan pada widget yang dianggap penting, contohnya pada widget recent post (list artikel terbaru), widget like fb, subscribe channel youtube, atau widget lainnya.
Untuk itu Tutorialankha kali ini akan mengembangkan bagaimana Cara Membuat Sticky Widget di Sidebar Blog. Yuk eksklusif saja ikuti tutorial berikut ini, silahkan diperaktekan biar lancar diterapkan di blog kalian.
Cara Membuat Sticky Widget di Sidebar Blog
1. Masuk ke akun Blogger kalian.
2. Pada panel/dashbor navigasi, silahkan pilih Tema lalu klik Edit HTML.
3. Silahkan tambahkan arahan dibawah ini sebelum/diatas arahan </body>.
<b:if cond='data:blog.isMobileRequest == "false"'>
<script type='text/j4vascript'>
//<![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 kalian ganti "HTML1" dengan ID widget yang ingin dijadikan sticky.
- Kode berwarna merah berfungsi untuk menghilangkan efek sticky pada halaman mobile.
- Angka "15" merupakan jarak widget.
Untuk menemukan ID widget, silahkan buka Tata Letak lalu klik widget yang ingin kalian akan dijadikan sticky. pada alamat widget terdapat ID widget.
4. Silahkan tambahkan arahan CSS dibawah ini sebelum atau diatas kode </b:skin>
5. Selanjutnya ganti HTML1 dengan ID widget yanga tadi kalian terapkan sebelumnya
6. simpan dan lihat hasinya.
Demikanlah tutorial singkat mengenai Cara Membuat Sticky Widget di Sidebar Blogger ini biar bermanfaat dan sukses serta menambah wawasan kalian dalam dunia blogger ini. Wassalam..
<script type='text/j4vascript'>
//<![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 kalian ganti "HTML1" dengan ID widget yang ingin dijadikan sticky.
- Kode berwarna merah berfungsi untuk menghilangkan efek sticky pada halaman mobile.
- Angka "15" merupakan jarak widget.
Untuk menemukan ID widget, silahkan buka Tata Letak lalu klik widget yang ingin kalian akan dijadikan sticky. pada alamat widget terdapat ID widget.
4. Silahkan tambahkan arahan CSS dibawah ini sebelum atau diatas kode </b:skin>
#HTML1{width:100%;max-width:300px}
5. Selanjutnya ganti HTML1 dengan ID widget yanga tadi kalian terapkan sebelumnya
6. simpan dan lihat hasinya.
Demikanlah tutorial singkat mengenai Cara Membuat Sticky Widget di Sidebar Blogger ini biar bermanfaat dan sukses serta menambah wawasan kalian dalam dunia blogger ini. Wassalam..
Sumber http://www.tutorialankha.com
