How to Embed Sticky Widget In Blogger (with full code)

Installing sticky widget on blogger

We all have seen the floating widget on different websites and yes it look very cool isn't it ? :)
So today I will Give you the Tutorial to How Add Sticky widget on your blogger blog.

The function of the sticky widget is useful for those who wanted a widget on a blog in order to float following the current page rolled down and will return to its original position when page rolled up.

We go directly to the way it is applied:...

Alternative 1

1. Open Blogger> Click Template> Edit HTML> Copy the code below and apply it just before the </ body>

As an example we made sticky widget with ID # HTML1...

<script type='text/javascript'>
//<![CDATA[
// Sticky Widget
function makemeSticky(e){function t(){var e=s.getBoundingClientRect();e.top<0?(n.className=a+" makesticking",n.style.width=i+"px"):n.className=a}var n=document.getElementById(e),s=document.createElement("div");n.parentNode.insertBefore(s,n);var i=n.offsetWidth,a=n.className+" makesticky";window.addEventListener("scroll",t,!1)}makemeSticky("HTML1");
//]]>
</script>

Decide on the widget ID codes marked.

2. Next, save the following code before ]]></b:skin> or </style>

.makesticking{background:none!important;position:fixed!important;top:25px;z-index:99;-webkit-transform:translateZ(0);}
#HTML1 .widget-content {padding:0;margin:auto;}

Please set the code above to taste.

3. Save the template and see the results.

Alternative 2

1. Or you can also use this code, as an example to be made of sticky widget is a widget with ID #sidecontent

<script type='text/javascript'>
//<![CDATA[
// Sticky Widget
$(function() {
  var top = $('#sidecontent').offset().top - parseFloat($('#sidecontent').css('marginTop').replace(/auto/, 0));
  var footTop = $('#footer').offset().top - parseFloat($('#footer').css('marginTop').replace(/auto/, 0));

  var maxY = footTop - $('#sidecontent').outerHeight();

  $(window).scroll(function(evt) {
    var y = $(this).scrollTop();
    if (y > top) {
      if (y < maxY) {
        $('#sidecontent').addClass('fixed').removeAttr('style');
      } else {
        $('#sidecontent').removeClass('fixed').css({
          position: 'absolute',
          top: (maxY - top) + 'px'
        });
      }
    } else {
      $('#sidecontent').removeClass('fixed');
    }
  });
});
//]]>
</script>

Decide on the widget ID codes marked.

2. Save the code below before ]]></b:skin> or </style>

#sidecontent {
  width: 255px;
  height: 200px;
  margin: auto;
  background: #fc4f3f;
  position: absolute;
}
#sidecontent.fixed {
  position: fixed;
  top: 20px;
}

Add attribute position: absolute; the widget and the widget set position when rotated top: 20px;

3. Save the template and see the results.

So At Last Share Your Blog Link via commenting below in which you have added the sticky widget... :)

Spark It Up

How to Embed Sticky Widget In Blogger (with full code)

4/ 5

Oleh Unknown

Unknown 1:01 AM Comments

Friday, July 10, 2015