Make Sticky Widget On SideBar In Blogger Blog

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 scroll to the end that time we will miss reading some important points. The sticky widget will help you to avoid this type of problems.when we use the Sticky widget for the important points or content then it will be fixed in the 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 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

#sticky-sidebar{width:100%;max-width:300px}

or

#HTML1{width:100%;max-width:300px}

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.

<—–How to make sticky widget in sidebar On Blogger Blog—–>

1 comment… add one
  • Titan Apr 28, 2016, 12:43 pm

    Navaneetha, It is very easy to make a Sticky Widgets On the SideBar In Blogger Blog, thanks for the tutorial in a nutshell. Thank you.

Leave a Comment