Cara Membuat Sticky Widget Di Sidebar Blog

Kali ini kita akan membuat sticky widget atau widget menempel (lengket) pada sidebar  blog. Sticky widget sering digunakan untuk mengisi kek...

Kali ini kita akan membuat sticky widget atau widget menempel (lengket) pada sidebar  blog. Sticky widget sering digunakan untuk mengisi kekosongan pada sidebar blog. Ketika kita memposting artikel yang cukup panjang ke bawah, tentu saat mendekati akhir postingan bagian sidebar akan terlihat kosong karena widget tidak dapat bergerak atau tidak sticky. Nah untuk itu kita perlu membuat sticky widget di sidebar. Biasanya, sticky di buat untuk widget iklan atau pun sosial media karena lebih penting untuk penghasilan dan SEO. Dibawah saya juga akan menjelaskan bagaimana cara membuat sticky widget menjadi responsive. Sebenarnya untuk membuat fitur sticky menjadi responsive tidaklah rumit, kita hanya perlu mengembalikan css-nya tersebut menjadi statis lagi.

Tutorial Blogger dan Widget Blogger

CSS Sticky Widget

Letakkan kode berikut ini diatas kode ]]></b:skin> yang ada didalam template blog anda.
.sticky {
  position:fixed;
  top:10px;
  z-index: 100;}

Script Sticky Widget

Kemudian cari kode </body> dan letakkan kode berikut diatasnya
<script type='text/javascript'>
$(document).ready(function() {
var stickyWidgetTop = $('#HTML5').offset().top;
var stickyWidget = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyWidgetTop) {
    $('#HTML7').addClass('sticky');
} else {
    $('#HTML7').removeClass('sticky');
}
};
stickyWidget();
$(window).scroll(function() {
    stickyWidget();
});
});
</script>
Kemudian ganti tulisan warna biru dengan id widget urutan paling bawah dari sidebar blog. Untuk tulisan warna merah ganti dengan id widget yg ingin dibuat jadi sticky.

Responsive Sticky Widget

Untuk membuat fitur sticky menjadi responsive kita hanya perlu menambahkan css media query saja. Yang terjadi adalah widget sticky akan kembali seperti default dari template blog anda.

Jadi jika anda belum mengubah template blog menjadi responsive, cara ini akan menjadi percuma. Berikut caranya:
Letakkan kode berikut di atas kode ]]></b:skin>
@media screen and (max-width: 959px){.sticky{position:static!important;width:100%!important;}}
Untuk tulisan warna merah ubah sesuai keinginan anda. Tapi saya rekomendasikan untuk tidak mengubahnya, karena minimum lebar dekstop adalah segitu. Sebenarnya cara diatas ini adalah cara menghilangkan sticky pada tampilan mobile. Karena tampilan ponsel ukurannya lebih kecil daripada dekstop, ini akan membuat fitur sticky akan menutupi sebagian halaman blog anda.

Demikianlah postingan saya mengenai cara membuat sticky widget atau cara membuat widget menempel (lengket) pada sidebar  blog. Semoga artikel ini dapat bermanfaat bagi kita semua.

COMMENTS

Name

Aceh,23,Adsense,8,BBM,3,Biography,1,Bitcoin,4,Blog,21,Blogger,12,Blogging,55,Business,14,Cerita,3,CPNS,1,Delicious,1,Design,1,DeviantART,1,Digg,1,Dollar,3,Dunia,13,Facebook,5,Flickr,1,Friendster,1,Gambar,2,Game,34,Gmail,1,Google+,4,Hosting,1,Inspirasi,2,Instagram,1,Internet,13,Interview,11,Kesehatan,2,LinkedIn,1,Makalah,7,Marketing,12,Meme,8,Money,3,Motivasi,2,MySpace,1,Outlook,1,Path,1,Pendidikan,10,Pengetahuan,4,Pinterest,1,Plugin,5,PNS,1,Reddit,1,Review,4,Seo,53,Smartphone,5,Social Media,38,Sukses,3,Sumatera Barat,16,Sumatera Utara,3,Templates,1,Tips,6,Toko Online,3,Top10,18,Tumblr,1,Tutorial,29,Tutorial Blog,146,Twitter,3,Umum,9,Vimeo,1,VK,1,Weebly,1,WhatsApp,1,Widget,55,Wisata,4,WordPress,14,Yahoo,1,Youtube,3,
ltr
item
Mas Da Bang: Cara Membuat Sticky Widget Di Sidebar Blog
Cara Membuat Sticky Widget Di Sidebar Blog
https://1.bp.blogspot.com/-g7SFRae-iwE/WkplUfEOc1I/AAAAAAAANgw/3NNS1tUSOmY9FxL-_dkKCQVZ-4N0Pql_gCLcBGAs/s1600/Tutorial-Blog.png
https://1.bp.blogspot.com/-g7SFRae-iwE/WkplUfEOc1I/AAAAAAAANgw/3NNS1tUSOmY9FxL-_dkKCQVZ-4N0Pql_gCLcBGAs/s72-c/Tutorial-Blog.png
Mas Da Bang
https://blog.itapuih.com/2018/11/cara-membuat-sticky-widget-di-sidebar.html
https://blog.itapuih.com/
https://blog.itapuih.com/
https://blog.itapuih.com/2018/11/cara-membuat-sticky-widget-di-sidebar.html
true
2732475762120586724
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy