Make Sticky Widget On SideBar In Blogger Blog

This tutorial helps you to know about a sticky widget. Sticky Widget is nothing is just fixed content. Many of the designers need a sticky social bar and sticky sidebar and footer widget.

For example, when you scroll down the page every content also scrolls to the end that time we will miss reading some important points. The sticky widget will help you to avoid this type of problem. when we use the Sticky widget for the important points or content then it will be fixed in a particular position. even you scroll the content will never move it will be fixed and viewers can see even they scroll down the pages.

How to make sticky widget in sidebar On Blogger Blog

Step 1: Login to your blogger account ->> Select the Blog If you want to add the Sticky Widget. open template editor, then adds the following code before the <body> tag

<script type='text/javascript'> //<![CDATA[ $(function() { if ($('   # Sticky-sidebar   ') .length) {// Replace "# sticky-sidebar" with a certain ID
     var el = $ ( '   # Sticky-sidebar   ');
     stickyTop var = $ ( '   # Sticky-sidebar   ') .offset (). Top;
     stickyHeight var = $ ( '   # Sticky-sidebar   ') .height ();
     $ (Window) .scroll (function () {
       var limit = $ ( '   # Footer-wrapper   ') .offset (). Top - stickyHeight - 20;  // Distance stopped "# footer-wrapper"
       windowTop var = $ (window) .scrollTop ();
       if (stickyTop <windowTop) {
         el.css ({
           position: 'fixed',
           top: 20 // Distance or margin sticky from above
       } Else {
         el.css ( 'position', 'static');
       if (limit <windowTop) {
         var diff = limit - windowTop;
         el.css ({
           top: diff
 </ Script>

In the above code, replace the highlighted code with the ID according to your sticky template.

Step 2:  Next add the width of the content or widget made sticky with CSS.

For example, here I have used 300px as width




Specify the width according to the template sidebar width. For responsive design change the media query like below

@media only screen and (max-width:768px){ #sticky-sidebar{width:100%;max-width:100%} }

That’s it. We Hope Now you are able to MAKE sticky widget On Sidebar in Blogger Bog.

Meet the Author

0 comments… add one

Leave a Comment