A sticky sidebar in a website is encouraged by every developer, SEO, and revenue-oriented bloggers. Blogger websites need sticky blogger widgets that scroll= with them as they read down the website post. A scrolling sidebar just uses jquery code to keep it fixed during scrolling between the header wrapper and footer. The important ideology behind the making of blogger right sidebar scroll with you is to encourage the click-through rate. I have implemented the idea to float my AdSense widget in my blogger sidebar as you scroll down. Let’s learn how to add the sticky fixed sidebar to a blogger website below.
Steps To Make Sidebar Sticky in Blogger.
1. Login to your blogger platform and choose your website.
2. Click on Theme in the right sidebar.
3. Click on Edit HTML.
4. Click anywhere in the code and hold Ctrl+F
5. Search for </body> in the search box
6. Just BEFORE the above code copy and paste the below Jquery code.
<script>
// Sticky widget by joecalih.com
// Tutorial at //joecalih.com/how-to-floatstick-blogger-widgets/
// Free to use or share, but please keep this notice intact.
//<![CDATA[
bs_makeSticky(“HTMLID“); // enter your widget ID here
function bs_makeSticky(elem) {
var bs_sticky = document.getElementById(elem);
var scrollee = document.createElement(“div”);
bs_sticky.parentNode.insertBefore(scrollee, bs_sticky);
var width = bs_sticky.offsetWidth;
var iniClass = bs_sticky.className + ‘ bs_sticky’;
window.addEventListener(‘scroll’, bs_sticking, false);
function bs_sticking() {
var rect = scrollee.getBoundingClientRect();
if (rect.top < 0) {
bs_sticky.className = iniClass + ‘ bs_sticking’;
bs_sticky.style.width = width + “px”;
} else {
bs_sticky.className = iniClass;
}
}
}
//]]>
</script>7. Change the HTML ID with your widget id that you would like to float.
8. That’s all, now save your template code and test your final results by viewing your website.