How To Make Sticky Sidebar Widget In Blogger

XpertShout

Read Also

Make Sticky Sidebar Widget In Blogger, You have to install a simple script in blogger html editor only. Sticky sidebar plugin is important function in blogging world. So, today XpertShout will share powerful sticky sidebar script for bloggers.

How To Make Sticky Sidebar Widget In Blogger
Below i will give you some details about floating sidebar widget. Floating sidebar name shows that how sticky sidebar widget will works.

How To Make Sticky Sidebar Widget In Blogger

I will guide you to make sticky sidebar widget in blogger. But before guiding you, i have to explain some basics for sticky sidebar widgets.

What is Sticky Sidebar Widget

I will explain this via an example. Let, you have a widget of an Adsense ad in sidebar. But when you scroll your website up then for long article, your sidebar Adsense ad widget will be disappear. This process can reduce your adsense ad revenue. That's why bloggers want to install floating sidebar widget on their website.

A widget that is stick with upper header during scrolling up is called sticky widget.
Below i am providing sticky sidebar demo. You can also check this on my site. my Adsense ad widget is sticky. When you scroll up then it will be floating.
How To Make Sticky Sidebar Widget In Blogger
Now i will share sticky sidebar widget script below.

Today, i am going to fulfill the request of all Blogger users, who are struggling to make their sidebar sticky. After doing few experiments and research, i came to know that, the code which has been provided by XpertShout works fine. However, the post lack details so i will provide complete procedure for making a Sticky Sidebar Widget in Blogger.

Sticky sidebar widgets are helpful for highlighting or promoting any particular element of your blog. Floating sidebar widget gets more attention than a regular sidebar widget. So you can use this sticky sidebar widget for blogger, to promote your most important post, affiliate links, advertisement and get 100 times better result than a normal widget.

​​​​​​​I have seen many sticky widgets which are built for blogger, but most of those are not suitable with bloggers. Different type of issues remains for the maximum sticky widget. Even blogger’s sticky widget create issues for responsive blogger templates.

Sticky Sidebar Widget Script

To install sticky sidebar widget properly, you have to follow these steps carefully.
  • Go to Blogger Dashboard > Template > HTML Editor.
  • Search for </body> you can find this at the end of template.
  • Then just paste below script just above or before </body>.
  • Before adding script first clean script on HTML Cleaner then paste before </body>.
<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
<script type='text/javascript'>
//<![CDATA[
$(function() {
  if ($('#HTML1').length) { // Ganti "#sticky-sidebar" dengan ID tertentu
    var el = $('#HTML1');
    var stickyTop = $('#HTML1').offset().top;
    var stickyHeight = $('#HTML1').height();
    $(window).scroll(function() {
      var limit = $('#footer-wrapper').offset().top - stickyHeight - 20; // Jarak berhenti di "#footer-wrapper"
      var windowTop = $(window).scrollTop();
      if (stickyTop < windowTop) {
        el.css({
          position: 'fixed',
          top: 65 // Jarak atau margin sticky dari atas
        });
      } else {
        el.css('position', 'static');
      }
      if (limit < windowTop) {
        var diff = limit - windowTop;
        el.css({
          top: diff
        });
      }
    });
  }
});
//]]>
</script>
 </b:if>

Replace #HTML1 with your widget id. 65 number in script represent height from upper side.
If you want to show sticky widget in mobile then simply replace false with true on first line of script.
Replace footer-wrapper with your footer wrapper id or class to work properly.
  • Add below script in css for widget setting.
<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
#HTML1{width:100%;max-width:300px;text-align:center;}
</b:if>
Replace #HTML1 with your widget id.

Load comments

No comments