Monday, November 9, 2015
How to Make Blogger Widgets/Gadgets Sticky(Float)
A post on how to make blogger widgets/gadgets sticky(float). You can make any widget or gadget on your blogger blog sticky, which means it stays in a fixed position and floats at the top of the window as you scroll down. Any widget that is made sticky is visible to your visitors as the scroll up and down and it gets more attention and brings about a higher click through rate. All widgets and gadgets that have an ID on your blog can be made sticky, but this is best suited for blogger widgets like social media follow and subscription buttons, social sharing buttons, the recent post widget etc. Here's how to create a floating “sticky” Sidebar widget in Blogger.
Also Read: How to Add HTML Parse Tool in Blogger
How To Centralise Blogger Title And Description
How to Add Read More Attribution Links to Copied Text in Blogger
How to Create HTML Sitemap In Blogger
View your blog to note the changes. If it didn't work, then you're probably using the wrong widget ID. And try not to do this to the Ads on your blog, it did cross my mind.
Also Read: How to Add HTML Parse Tool in Blogger
How To Centralise Blogger Title And Description
How to Add Read More Attribution Links to Copied Text in Blogger
How to Find The Gadget/Widget ID of Any Blogger Gadget
First, you'll need to get the widget ID. To do this:
- From your Blogger Dashboard,
- Goto Layout.
- In the layout section, Click 'Edit' on the widget or gadget which you want to make sticky.
- Get the Widget's ID by checking the address bar.
How to Create a "Sticky" Floating Sidebar Widget in Blogger
On getting the widget ID,
- Goto your Blogger Template
- Click on 'Edit HTML'
- Search for the tag </body>
- Copy this code and paste 'above' </body>
<script>
// Tutorial at http://www.informationtutorial15.blogspot.com/2015/11/how-make-blogger-widgetsgadgets-Sticky-float.html
// Free to use or share, but please keep this notice intact.
//<![CDATA[
bs_makeSticky("HTML9"); // 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>
<style>
.bs_sticking {background:#f2f2f2 !important; position:fixed !important; top:0; z-index:9999; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3); margin-top: 0; position:relative\9 !important;}
</style>
- Replace the highlighted field ("HTML9")from the code with the ID you copied for the blogger widget/gadget.
- Save your template.
How to Create HTML Sitemap In Blogger
View your blog to note the changes. If it didn't work, then you're probably using the wrong widget ID. And try not to do this to the Ads on your blog, it did cross my mind.
