Sometimes blogger blog user wishes to add a fixed sticky widget in their blogger site layout or sidebar which floating sidebar when user scrolling mouse. They want to use a floating widget to increase Google Adsense Revenue.
You are an Adsense user, huh? Then you should try it with using simple steps.
In the WordPress site, you can use sticky sidebar WordPress easily! cause many plugins are available to make sidebar fixed. Q2W3 Fixed Widget is more popular in WordPress to use it.
So, let’s see how can you use the sticky widget in blogger blog.
Step 1: First you go to the Blogger Dashboard >> Theme and click on Edit HTML. Find body tag </body> and paste below code before it.
<script>
//<![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:#ffffff !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>
Step 2: Just replace the WIDGET_ID orange code with your Widget ID which Widget you want to make Fixed in sidebar layout. Then click on Save Theme.
How To Find Your Widget ID In Blogger
Step 2: Just copy your Widget ID and use it in the code.
Finally, you view your blog and scrolling mouse then notice your targeted Widget is Fixed and Floating.