A sticky sidebar in a website is encouraged by every developer, SEO, and revenue oriented bloggers. Blogger websites need sticky blogger widgets that scrolls 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 on how to add the sticky fixed sidebar in blogger website below.
Steps To Add Sticky Fixed Sidebar In Blogger Website
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>7. Change HTML ID with your widget id that you would like to float.
// Sticky widget by www.joecalih.com
// Tutorial at //www.seoclive.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>
8. That's all, now save your template code and test your final results by viewing your website.