How to Create a Sticky or Floating Widget in Blogger.

Make a Sticky Widget. What is a sticky widget? This is a floating or fixed widget that will stay on your page if visitor scroll down the page to view more blog content. So, your sticky widget will not disappear on your page when the page is scrolled down. So, the visitor's attention will be focused on your sticky widget. Use this widget to display your own content only, or create clear blog navigation. Don't try to display any ads which prohibit the publisher embed the ads code using the sticky widget. 

The following guidelines only work on Blogger-based web platforms. So, if you want to try applying this guide on the other web-based platform it may not be working properly. This is a simple task you can do by yourself, just choose the desired widget on your blog. The selected widget will be visible all the time on your page during the visitor scrolled your blog page. 

This guide applicable to every widget or element that has an Html ID. If you wish to use this trick on your blog page, you can read more instruction below.

Install a Sticky Widget.

1. Log in to your blog account.
2. Then, Select the blog you want to create a sticky widget in it.
3. Click the layout menu on your blog dashboard.
4. Specify where you want to place a sticky widget on your blog page, you can put the widget at sidebar or at the top of your post. 
5. For example, we will create an HTML or javascript widget that will appear in the sidebar. the HTML code is shown below.

<div style="width:300px;height:250px;border:1px solid #3103fb;"><h2>My Widget</h2></div>

6. If you have successfully created this widget, the widget should look like this.

   

   sticky widget

7. Now, get your HTML ID for the widget. How to do it? See this guide to find a Widget Id
• For example your widget HTML ID is HTML9
8. Then copy and paste the following code into your HTML template. Put this code above the </body> tag,

<script>
// Sticky widget by Bloggersentral.com
// Tutorial at http://www.bloggersentral.com/2013/04/how-to-make-any-widget-sticky.html 
// Free to use or share, but please keep this notice intact.
//<![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> 

9. Then replace YOUR_WIDGET_ID with your own HTML ID, now the code will change with; 
• bs_makeSticky("HTML9");
10. Then, click save theme in your blog edit template.
11. Before click back, make sure to preview the result on your blog page.
12. Finish, good luck to applied a sticky widget on your blog post.

Video Guide.

How to Create a Sticky or Floating Widget in Blogger.

Share this post