Making sticky widget may increase higher conversion rates in your blog, If you are an affiliate marketer and placed an affiliate banner in your blog then you can get more conversions for your affiliate banner by making it sticky.
What is a sticky widget in blogger?
Sticky widget or floating widget in blogger or in other sites are used to fix a widget in a place, for example, You placed a banner Ad in sidebar of your blog. When a visitor come to your blog and read the article he scroll the mouse and your banner Ad goes up and finally disappear from user's eyes. But when you make that Ad banner, Sticky then the banner will not go up when anybody scroll the page. The Ad will remain fix at it's position. It's a great idea isn't it?
Beware
Making Adsense banner sticky in the blog is prohibited, Adsense doesn't allow to make your Adsense banner floating or sticky, So if you do not want to lose your adsense account. You can make other widgets and ad code sticky except Adsense Ads.
How to make a widget Sticky
To Make any widget fix or sticky just go to blogger template and press ctrl+F and find the closing body tag </body> and paste the below code before the </body> Tag.
<script>Here Put the widget ID in Highilited place in above code.
//<![CDATA[
HG_makeSticky("WIDGET_ID"); // enter your widget ID here
function HG_makeSticky(elem) {
var HG_sticky = document.getElementById(elem);
var scrollee = document.createElement("div");
HG_sticky.parentNode.insertBefore(scrollee, HG_sticky);
var width = HG_sticky.offsetWidth;
var iniClass = HG_sticky.className + ' HG_sticky';
window.addEventListener('scroll', HG_sticking, false);
function HG_sticking() {
var rect = scrollee.getBoundingClientRect();
if (rect.top < 0) {
HG_sticky.className = iniClass + ' HG_sticking';
HG_sticky.style.width = width + "px";
} else {
HG_sticky.className = iniClass;
}
}
}
//]]>
</script>
<style>
.HG_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:relative9 !important;}
</style>
How to find widget ID?
Go to blogger Layout and click edit, you have to click edit for the widget you wanna make sticky. A popup opens just look at the link of popup, You will find the widget ID there. See Below picture to understand easily.
