How to Create a Floating Sticky Widget in Blogger

You might want to fix a widget to your blog's sidebar when a visitor scrolls down to view more content. These kind of widgets are more commonly known as Sticky Widgets. Your chosen widget sticks to the top edge of the window while the visitor scrolls down and remains floating there until its original location comes back when the page is scrolled back up. It catches the user's attention and also tends to have a higher click through rate.

how to create sticky widget for blogger

This is applicable to any blog widget or element that has an ID. It is perfect for sticking subscription boxes and social media sharing buttons. You can also create a floating navigation menu which remains fixed to the top of the page while the visitor scrolls down. If you want to make your blog more attractive and increase the click through rates (CTR) of your widgets by making them sticky, just follow the steps to get sticky widgets working with your blog.

How to Make Blogger Widgets Sticky

1. Open your blogger dashboard, go to Template and press the Edit HTML button.

2. Click anywhere inside the code area and press CTRL+F keys to open the search box.

3. Type </body> inside the search box and press Enter to find it.

4. Add the following code just above the </body> tag.

<script>
//<![CDATA[
bs_makeSticky("YOUR_WIDGET_ID"); // 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>

<style>
.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:relative\9 !important;}
</style> 
5. Replace YOUR_WIDGET_ID with the ID of the widget or element you want to make sticky. In order to get the widget id, locate your widget in Layout and click on the Edit link. The widget configuration window will open up. The widget ID is in the URL of the widget configuration window.

how to find widget id in blogger

At the end of the URL, you will find something like this: widgetId=xxxxx. Here xxxxx is your widget ID.

6. Click on the Save Template button to save the changes and start playing with sticky widgets!

Customization

  • You can change the background of the widget while it's sticking by changing the color code background:#f2f2f2. Replace #f2f2f2 with your desired color code.
  • The code also has the feature of box-shadow. You can disable it by changing all values to 0.

Final Words

I have personally used sticky widgets on my blog and have seen a considerable increase in the click through rates (CTR).  Hopefully, this tutorial will help you to add sticky widgets to your blog and make your blog more attractive. If you have any thoughts please do not hesitate to share in the comments section below. 

How to Create a Floating Sticky Widget in Blogger How to Create a Floating Sticky Widget in Blogger Reviewed by Aniket Kumar on 02:35 Rating: 5

No comments:

Feel free, and let me know if you have any query related to the blog post.

Powered by Blogger.