How To Make Floating Widget on Blogger Template Sidebar

How To Make Floating Widget on Blogger Template Sidebar

Comments: 12
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.


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

The code will be like below--

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> 

// Floating Widget By
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 ( < 0) {
            bsfloat.className = iniClass + ' bsfloating';
   = width + "px";
        } else {
            bsfloat.className = iniClass;
.bsfloating {background:#f2f2f2 !important; position:fixed; top:0; z-index:9999; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3);}


  • Change PopularPosts1 with widget ID.
  • Change f2f2f2 for floating widget background color

Related Post

Speak Your Mind

Dilip Yadav says: 4/20/2013

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

Dilip Yadav says: 4/21/2013

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

Mohammad Fazle Rabbi says: 4/21/2013

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

bakker boys says: 6/02/2013

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

Mohammad Fazle Rabbi says: 6/02/2013

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

Mat Tarik says: 7/15/2013

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.

Mohammad Fazle Rabbi says: 7/16/2013

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

Sandy Cheeks says: 2/02/2014

Thank you! It worked :)

Mohammad Fazle Rabbi says: 2/02/2014

Nice to hear that you are most welcome.

Rashedul Islam says: 2/04/2014

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 please check the left side,,,,,,,,,
HOW CAN I ADD EXTRA WIDGET or COLUMN to the Left side,,,below the red menu,,

Mohammad Fazle Rabbi says: 2/05/2014

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

Rashedul Islam says: 2/06/2014

Thank u brother, for u'r beautifull comment,

Facebook Group Community Code ConverterHide Code Converter Show EmoticonHide Emoticon

If you Got questions? Ask ’em below! While we’re here, you might like to leave a comment and let me know if you have any stories or questions.

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


Email *

Message *