Archive Pages Design$type=blogging$count=10

How To Make Gadget Sticky/Float In Blogger

GET GOOGLE ADSENSE APPROVAL TRICK...

Sticky gadget blogger, jquery tricks blogger, make a div float, javascript tricks blogger, 101helper blogging tricks, make a widget floating or sticky in blogger

Make-a-gadget-sticky-in-blogger-101helper

Making a gadget sticky or floating means to make it fixed in a position when page is scrolled down and it is possible with javascript. Gadgets are made sticky to provide visitors a good user experience such as a menu which floats with user so now he doesn't need to scroll up again and again to navigate through your blog. Similarly more gadgets are also made sticky such as ads or email subscription widget to get more clicks on ads and to get more subscribers respectively. You can see a live demo of making a gadget sticky on right side of this page(Recommended Articles). I have made it sticky to help visitors reach all of my content. Similarly you can also do it by following this post. So if you want to make any of your widget sticky then follow below steps.

 Don't Miss: 
How To Make A Gadget Sticky Or Float In Blogger:

Step 1: Go to blogger dashboard and navigate to layout.

Step 2: Add a gadget or edit an existing gadget which you want to make sticky.

Step 3: Copy its ID as shown in below image:

how-to-get-id-of-a-gadget-in-blogger


Step 4: Go to template and search for </body> by using Ctrl+F.

Step 5: Copy below code and paste it just above </body>.
<style>.sticker {background:#F5F5F5;position:fixed; top:0px; z-index:99;}</style>
<script>
//<![CDATA[
bs_makeSticky("HTML6"); 
function bs_makeSticky(elem) {
    var sticky = document.getElementById(elem);
    var scrollee = document.createElement("div");
    sticky.parentNode.insertBefore(scrollee, sticky);
    var width = sticky.offsetWidth;
    var iniClass = sticky.className + ' sticky';
    window.addEventListener('scroll', sticker, false);
    function sticker() {
        var rect = scrollee.getBoundingClientRect();
        if (rect.top < 0) {
            sticky.className = iniClass + ' sticker';
            sticky.style.width = width + "px";
        } else {
            sticky.className = iniClass;
        }
    }
}
//]]>
</script>

how-to-make-gadgets-sticky-float-in-blogger

Step 6: Replace HTML6 with your gadget's ID which you found in step 3.

Step 7: Click on save template and you are done. 

Customization:

(1). To change background color or your floating widget replace #F5F5F5 with desired color code.

You Might Also Like: How To Get Code Of A Color, Color Code Generator.

(2). To Change the height of your floating widget(height from top) make changes in top:0px;

I hope you like this post and it was helpful to you. Follow and subscribe to our newsletter or stay in touch with us via social networks to get latest updates about blogger tricks. Thanks for visiting 101helper.blogspot.com. Share this post with others and help me spread my blog.

Search Tags: Sticky gadget blogger, jquery tricks blogger, make a div float, javascript tricks blogger, 101helper blogging tricks, make a widget floating or sticky in blogger.

COMMENTS

BLOGGER: 4
Loading...
Beginner to blogging Bing webmaster tools tutorials blogger adsense Blogger menus Blogger Seo(Search Engine Optimization Blogger templates Blogger templates / themes Blogger Tips And Tricks Blogger Widgets And Gadgets Domains / Blogger earn money blogging Facebook widgets in blogger Google rich snippets blogger Google Webmaster Tools tutorials Mobile Blogging Related posts widget blogger social buttons blogger Yandex webmaster tools tutorials
false
ltr
item
101Helper | Blogger tips,tricks,widgets,menus,seo,earn money: How To Make Gadget Sticky/Float In Blogger
How To Make Gadget Sticky/Float In Blogger
Sticky gadget blogger, jquery tricks blogger, make a div float, javascript tricks blogger, 101helper blogging tricks, make a widget floating or sticky in blogger
https://1.bp.blogspot.com/-kTV9b1d7Pd8/VffnYhg6MrI/AAAAAAAADi0/8FNmyLWiYzM/s320/Make-a-gadget-sticky-in-blogger-101helper.jpg
https://1.bp.blogspot.com/-kTV9b1d7Pd8/VffnYhg6MrI/AAAAAAAADi0/8FNmyLWiYzM/s72-c/Make-a-gadget-sticky-in-blogger-101helper.jpg
101Helper | Blogger tips,tricks,widgets,menus,seo,earn money
https://101helper.blogspot.com/2015/09/how-to-make-gadget-stickyfloat-blogger.html
https://101helper.blogspot.com/
https://101helper.blogspot.com/
https://101helper.blogspot.com/2015/09/how-to-make-gadget-stickyfloat-blogger.html
true
3767912102518445221
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago