Get Scrollable Sticky Footer Adsense ads on Blogger

I have been searching a lot for sticky gadget which can be used in responsive blogger templates. I needed a script that lock the gadget while scrolling. So that the user can watch the same gadget as he/she scrolls down the post page. Fortunately i was able to find one, which is very easy to implement. Here i am sharing it with you.

sticky

The below code is CSS and you need to add the code before the skin tag. You can find the skin tag using CTRL+F for the word “]]></b:skin>”.

.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:relative9 !important;}

The following code is the script. This sticky script will make your gadget stick like glue in the layout page. You can use any gadget in the blogger layout page for sticking. For that you need to replace the red color “HTML 1” which is the ID of the HTML to your HTML ID.

<script>
// Sticky widget by Bloggersentral.com and Shipmethis.com
// Tutorial at http://www.bloggersentral.com/2013/04/how-to-make-any-widget-sticky.html & https://www.shipmethis.com/2014/06/sticky.html
// Free to use or share, but please keep this notice intact.
//<![CDATA[
bs_makeSticky(“HTML 1“); // 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>

You find the HTML ID by two methods.

One is going to blogger template and searching for the word “b:widget id”. So that you will get all gadgets installed in the blogger template.

Second is by going to any of the post page in the browser. Right click on the gadget and click on “Inspect Element”. So that you will get the gadget ID.

Then save the template. Reload your post page and scroll down the page and see the magic.

If you want this codes to add to any gadget in the layout page with out editing the template, you can cop the following code and paste it to the HTML/JAVA SCRIPT gadget space in blogger.

// Sticky widget by Bloggersentral.com and Shipmethis.com
// Tutorial at http://www.bloggersentral.com/2013/04/how-to-make-any-widget-sticky.html & https://www.shipmethis.com/2014/06/sticky.html
// Free to use or share, but please keep this notice intact.
//<![CDATA[

bs_makeSticky(“HTML 1“); // 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>

The script will stick the gadget in the top bar while scrolling. You can add ad sense gadgets using this method. So that you can redirect attention of visitors to this gadget. As the gadget get more attention, the revenue rises. This script will work in normal blogger templates also. I got this script from http://www.bloggersentral.com/2013/04/how-to-make-any-widget-sticky.html.

Thanks for reading share this post if you like it.

Kindly Share AheadShip Me This