How to make a sticky widget on blogger By Invesroc - invesroc

An attractive appearance on the blog will be the center of attention of visitors and other bloggers. Hence, many bloggers are vying to beautify the appearance of their blogs with cool methods and designs.

The sidebar widget is an important component in the template, usually this widget consists of Popular Posts or the most popular posts, Labels, Archives, Recent Posts, Subscribe boxes, Author profiles and many more. It depends on the template maker itself, what to install on the widget template it makes. Then there are also those that make the widget display float. This floating widget is called a fixed-sticky or sticky widget.

The floating sidebar widget means that if we scroll down on the blog, the widget will still follow up to the specified point. In this tutorial, I will share how to make a floating widget on a blog template and stop at the footer. Let's go straight to the steps.

How to Install a Responsive Sticky Sidebar

1. Login to your blogger, select a theme and select edit HTML. Put the following code above</body>

<script type='text/javascript'>
//<![CDATA[
$(function() {
if ($('#sticky-widget1
').length)
var el = $('#sticky-widget1');
var stickyTop = $('#sticky-widget1').offset().top;
var stickyHeight = $('#sticky-widget1').height();
$(window).scroll(function() {
var limit = $('#footer-wrapper').offset().top - stickyHeight - 20;
var windowTop = $(window).scrollTop();
if (stickyTop < windowTop) {el.css({position: 'fixed',
top: 20})else {el.css('position', 'static');}
if (limit < windowTop) {var diff = limit - windowTop;el.css({top: diff
});}});}});
//]]>
</script>

pay attention to the marked area, replace the code with the sidebar code belonging to your blog template, because each template owner usually gives a different name to each created template.

#sticky-widget1is a widget that will be made sticky / floating
Meanwhile#footer-wrapper is sticky stopping point 

2. Next, make additions to the size of the width or sticky width that will be created. We recommend that you follow the size of your sidebar to make it look neater. for example like the following

#HTML2{width:100%;max-width:276px}

or like this

#sticky-widget1{width:100%;max-width:276px}

the max-width used is the width of the sidebar on your blog template, so adjust the width

Please check carefully the name of the widget that you want to give the sticky effect so that the use of this trick can be successful

3. At the above steps, if you have done everything correctly then sticky will work. However, for a responsive display, you should add the following CSS code:

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

If you already have a code in your template  @media only screen and (max-width:768px){, then just save the code #sticky-widget1{width:100%;max-width:100%}below.


For the results, please look at the Recents Post Sidebar that I use.
That's it for this tutorial on how to make sticky or floating widgets on blogger

Source: http://www.arlinadzgn.com/2015/12/cara.buat.sticky.widget.di.sidebar.blog.html