Assalamualaikum, kali ini saya akan kongsikan beberapa code untuk memasang stickey sidebar di blogger tanpa menggunakan JavaScript dan seterusnya membuat loading blogger anda lebih cepat dan mudah di gunakan.
Stickey Sidebar Tanpa JavaScript:
Kenapa tanpa javascript? Bagi blogger pemula saya ingin menasihati untuk mengurangkan penggunaan javascript di blogger untuk mendapatkan page load lebih cepat, kenapa perlu mendapatkan page load cpat? ia nya sangat penting agar para visitor tidak cepat meninggalkan blog anda dan seterusnya menambahkan SEO blog anda, agar senang mendapat page rank satu di dalam google search.
Sebelum saya kongsikan cara ini saya telahpun ujicoba pada template O4U GL Dark, Ianya berfungsi lebih bagus dan senang di gunakan seterusnya loding yang agak cepat berbanding stickey javascript.
Bagai mana cara membuat stickey sidebar hanya dengan css?
Caranya cukup senang, Ini contoh css stickey sidebar yang telah saya pakai pada tempelate O4U GL Dark:
<style type='text/css'>
#sidebar-sticky {
width: 300px;
float: right;
padding: 0;
margin: 0 auto;
position: -webkit-sticky;
position: sticky;
top: 10px;
}
</style>
Anda boleh mengubah code sesuai blog anda, Dan di sini contoh widget sidebar yang saya gunakan untuk stickey sidebar:
<aside itemprop='mainEntity' itemscope='itemscope' itemtype='https://schema.org/WPSideBar'>
<div id='sidebarwarp'>
<div id='sidebar-nonstickey'>
<b:section class='sidebarnon' id=sidebarnon' preferred='yes'/>
</div>
</div>;
</aside>
<div id='sidebar-sticky'>
<b:section class='sticky_sidebar' id='sticky_sidebar' preferred='yes'/>
</div>
Ok bagai mana cara memasangnya ke dalam blogger anda?
Pertama masukan css berikut di blogger anda , di atas /head ataupun di dalam css style anda.
<style type='text/css'>
#sidebar-sticky {
width: 300px;
float: right;
padding: 0;
margin: 0 auto;
position: -webkit-sticky;
position: sticky;
top: 10px;
}
</style>
SElanjutnya kita akan membuat kotak widget baru untuk stickey sidebar, Pasangkan code berikut di
<div id='sidebar-sticky'>
<b:section class='sticky_sidebar' id='sticky_sidebar' preferred='yes'/>
</div>
Selalunya code di atas akan di pasang selepas code </aside> sekiranya anda menggunakan aside di bahagian sidebar, ataupun pasangkan di bahagian penutup sidebar non stickey, sila rujuk code contoh yang saya berikan di atas.
Baikla sampai di sini sahaja posting saya tentang cara membuat sidebar stickey tanpa penggunaan java script di blogger, Sekiranya anda perlukan bantuan silakan tinggalkan comment anda. Wasalam dari saya.
![[Update] O4U Dark Pro Responsive Template](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7Lm4ZGg6lLULBNv6GSLPgCE7x5UYDeDiqG6HZlbsD0hDYZSTt0Si3cnJIT49GTIhnNN-JwNQjlS0ytWPKXbriFwlIQludWtQnl_P6TsOwqCn0GwO3Y8hfrOq_n06wyUHF-WrJDdLa4asR/s1600/Untitled-1.jpg "[Update] O4U Dark Pro Responsive Template")
