How To Make Floating Widget on Blogger Template Sidebar

How To Make Floating Widget on Blogger Template Sidebar

12
data:blog.title
sticky sidebar

Floating widget is a great widget, when visitors scroll down to a website then they can see the widget bar is floating to down. I have coded this widget for all kinds of widget that can be able to make float. And more importantly it won't use any hosted JavaScript (.js) file, so it won't  affect your templates loading time. And I have use this code to make floating popular post widget. Let's go to tutorial....


How To Find The Widget ID

Finding your each and every widget ID is very simple. Just log into your Blogger account and visit your blog. Now you can see the QuickEdit icon on bottom left corner of the every widget.

 www.bloggerspice

Now Click On Right Button and Click on Copy Link Location and Paste is in Notepad

bloggerspice.com


The code will be like below--

http://www.blogger.com/rearrange?blogID=8977425861298264234&widgetType=PopularPosts&widgetId=PopularPosts1&action=editWidget&sectionId=sidebartop

Here the widget ID is PopularPosts1 You will find for other widget different ID (e.g. HTML 2, HTML 3, HTML 4)

Step 1 Go to your Blogger Dashboard

Step 2 Click on -> Template -> Edit HTML

Step 3 Now Find this code </body>  by pressing  Ctrl + F

Step 4 Paste the below code  Before/above </body> 


  <script>
// Floating Widget By www.bloggerspice.com
//<![CDATA[
bsfloatingwidget("PopularPosts1"); // enter your widget ID here
function bsfloatingwidget(elem) {
    var bsfloat = document.getElementById(elem);
    var scrollee = document.createElement("div");
    bsfloat.parentNode.insertBefore(scrollee, bsfloat);
    var width = bsfloat.offsetWidth;
    var iniClass = bsfloat.className + ' bsfloat';
    window.addEventListener('scroll', bsfloating, false);
    function bsfloating() {
        var rect = scrollee.getBoundingClientRect();
        if (rect.top < 0) {
            bsfloat.className = iniClass + ' bsfloating';
            bsfloat.style.width = width + "px";
        } else {
            bsfloat.className = iniClass;
        }
    }
}
//]]>
</script>
<style>
.bsfloating {background:#f2f2f2 !important; position:fixed; top:0; z-index:9999; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3);}
</style>


Customization


  • Change PopularPosts1 with widget ID.
  • Change f2f2f2 for floating widget background color
How To Make Floating Widget on Blogger Template Sidebar
4 Stars stars - "How To Make Floating Widget on Blogger Template Sidebar" Floating widget is a great widget, when visitors scroll down to a website then they can see ...

Post a Comment

man i must say i liked this one thanks! a lot.

Hello. i need your help, in personal msg. can you pls help. i will mail you detail after you say yes.k

no problem bro...just write me in details I will try with my best knowledge

i was very thank full to u bro ...!

feel this place like your trusted partner..you are always welcome for any kinds of help

Salam. Juz wanna ask something. How to make the float widget stop before footer section. I juz dont wanna the widget overlap footer section. Thanks you brother.

Walaikumus-salam..Brother Mat I will share soon according to your requirement. I have already got many request similarly yours. Thanks again for commenting.

Thank you! It worked :)

Nice to hear that you are most welcome.

Assalamualaikum,,brother,,, i have a question can u please help me,,i have searched on google but i cannot find the solution,,,i live in chittagong,BD...i have a BLOG http://livemecca.blogspot.com/ please check the left side,,,,,,,,,
HOW CAN I ADD EXTRA WIDGET or COLUMN to the Left side,,,below the red menu,,

Walaikumussalam...Rashed vai I have understood..but if you add an extra sidebar then your vertical menu won't work. And your template is responsive which is good for mobile device also. so adding extra sidebar it won't be a wise decision. However you can use different template. You can check my owned designed template http://www.bloggerspice.com/search/label/Templates..

Thank u brother, for u'r beautifull comment,

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *