How To Make Blogger Widgets Sticky That Scrolls Along With The Page

A sticky widgets is a widget that floats when scrolling down.This widgets floats until the user scrolls up to the upper  part of the blog.

By adding a small jQuery script it gives us a great option to make widgets float on the screen on scrolling.

Suppose you have Newsletter widget to collect mail address of you visitors, Then making that particular widget sticky can give you more better result than before.Users will be looked at least once because they are floating on the screen.

No matter what kind of widget it is, It works with all widget without any problem.

1. Go to Blogger Dashboard > Template

2. Edit HTML

3. Press CTRL+F to launch search box

4. Find </head> tag

5. Paste the below given  jQuery code just above the </head>  tag

  <script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js”></script>

6. Now again search for </body> tag

7. Now paste the below given code just above the </body> tag

<script>
/*<![CDATA[*/
// Sticky Plugin
// =============
// Author: Anthony Grand
(function($) {
var defaults = {
topSpacing: 0,
bottomSpacing: 0,
className: ‘is-sticky’,
center: false
},
$window = $(window),
$document = $(document),
sticked = [],
windowHeight = $window.height(),
scroller = function() {
var scrollTop = $window.scrollTop(),
documentHeight = $document.height(),
dwh = documentHeight – windowHeight,
extra = (scrollTop > dwh) ? dwh – scrollTop : 0;
for (var i = 0; i < sticked.length; i++) {
var s = sticked[i],
elementTop = s.stickyWrapper.offset().top,
etse = elementTop – s.topSpacing – extra;
if (scrollTop <= etse) {
if (s.currentTop !== null) {
s.stickyElement.css(‘position’, ”).css(‘top’, ”).removeClass(s.className);
s.currentTop = null;
}
}
else {
var newTop = documentHeight – s.elementHeight – s.topSpacing – s.bottomSpacing – scrollTop – extra;
if (newTop < 0) {
newTop = newTop + s.topSpacing;
} else {
newTop = s.topSpacing;
}
if (s.currentTop != newTop) {
s.stickyElement.css(‘position’, ‘fixed’).css(‘top’, newTop).addClass(s.className);
s.currentTop = newTop;
}
}
}
},
resizer = function() {
windowHeight = $window.height();
};
// should be more efficient than using $window.scroll(scroller) and $window.resize(resizer):
if (window.addEventListener) {
window.addEventListener(‘scroll’, scroller, false);
window.addEventListener(‘resize’, resizer, false);
} else if (window.attachEvent) {
window.attachEvent(‘onscroll’, scroller);
window.attachEvent(‘onresize’, resizer);
}
$.fn.sticky = function(options) {
var o = $.extend(defaults, options);
return this.each(function() {
var stickyElement = $(this);
if (o.center)
var centerElement = “margin-left:auto;margin-right:auto;”;
stickyId = stickyElement.attr(‘id’);
stickyElement
.wrapAll(‘<div id=”‘ + stickyId + ‘StickyWrapper” style=”‘ + centerElement + ‘”></div>’)
.css(‘width’, stickyElement.width());
var elementHeight = stickyElement.outerHeight(),
stickyWrapper = stickyElement.parent();
stickyWrapper
.css(‘width’, stickyElement.outerWidth())
.css(‘height’, elementHeight)
.css(‘clear’, stickyElement.css(‘clear’));
sticked.push({
topSpacing: o.topSpacing,
bottomSpacing: o.bottomSpacing,
stickyElement: stickyElement,
currentTop: null,
stickyWrapper: stickyWrapper,
elementHeight: elementHeight,
className: o.className
});
});
};
})(jQuery);
/*]]>*/
</script>
<script type=’text/javascript’>
$(document).ready(function(){
$(“#sticker”).sticky({topSpacing:0});
});
</script>

Script Credit : Anthony Granad

8. Now search for the sidebar you want to make sticky

For short hand you can use search box to navigate and jump to sidebar by sidebar-wrapper or  sidebar 

9. Now find the particular widget, it look something like this :

<b:widget id=’HTML1′ locked=’false’ title=” type=’HTML’>
<b:includable id=’main’>
<!– only display title if it’s non-empty –>
<b:if cond=’data:title != &quot;&quot;’>
<h4 class=’title’><data:title/></h4>
</b:if>
<div class=’widget-content’>
<data:content/>
</div>

</b:includable>
</b:widget>

10. Next make a small change to the widget format like this

<b:widget id=’HTML1′ locked=’false’ title=” type=’HTML’>
<b:includable id=’main’>
<div id=’sticker’>

<!– only display title if it’s non-empty –>
<b:if cond=’data:title != &quot;&quot;’>
<h4 class=’title’><data:title/></h4>
</b:if>
<div class=’widget-content’>
<data:content/>
</div>
</div>

</b:includable>
</b:widget>

Now click on  Save Template

DONE!!

You can do follow the same step for adding more sticky widgets.

Check : How to add Adsense ads below Post title in blogger

This is how we add sticky widgets to our blogger blog in short hand.This trick is really simple and handy to do so.

My recommendation to you will be use this as sticky widget for Newsletter widget as it can make your subscription list grow like rocket,

About Astro Joseph

Hi, I'm Astro Joseph the founder and CEO of IPEE World and IPEE Network.I started this blog for a passion and it is now empowering millions of readers around the globe.Read more about me at About and Contact page.

Leave a Reply

Your email address will not be published. Required fields are marked *