You are here » Home » Blogging » How to Create “Sticky” Sidebar Widget in Blogger Using jQuery

How to Create “Sticky” Sidebar Widget in Blogger Using jQuery

by Nitin Maheta

1
I have seen at more and more website, they created sticky sidebar on their blog/websites, then today I’m here with how to create “Sticky” sidebar widget in blogger using  jQuery .

Also Read : – Fixed Stickybar With Auto Scrolling Recent Posts Widget for Blogger

People visit your blog to read the posts, Not to see the widgets. Most of the time they open the post, scroll & read the content and left. When they are at the bottom of the post your sidebar was out of their screen. And you don’t get any benefit from it. I know you put many widgets there!

One of the best way to get benefit from your widgets is make one of your widget STICKY that scroll with user.

For example you want more subscribers then just make your Subscription Form sticky.

Note : - Don’t try to stick your Google adsense ads for getting more clicks on it, your A/C can be ban or blocked by this reason.
  • You can stick your Subscription form to get more subscriber.
  • You can stick Facebook/Google Plus Widget for more Like.
  • You can stick Popular post to decrease bounce rate.
  • You can stick any offers to generate Revenue.

Live Demo !

How to create sticky sidebar in blogger?

Go to blogger–>Template—>Edit HTML
CTRL + F to find </head> tag in your blogs HTML
Copy and paste below code just above it.

Also Read : – Modifications in New Blogger Template Editor

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'/>
<script type='text/javascript'>
/*<![CDATA[*/
// Sticky Plugin
// =============
// Author: Anthony Garand
// Improvements by German M. Bravo (Kronuz) and Ruud Kamphuis (ruudk)
// Created: 2/14/2011
// Date: 9/12/2011
// Website: http://labs.anthonygarand.com/sticky
// Description: Makes an element on the page stick on the screen as you scroll
// For Blogger by : http://www.makingdifferent.com

(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>
  • Remove above red colored line if  your blog have already jQuery plugin.
  • Next search for </body> tag,
  • Copy and paste below code just above it.
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;#mdstickybar&quot;).sticky({topSpacing:0});
});
</script>
  • Now search for ]]></b:skin> tag,
  • Copy and paste below css code just above it.
#mdstickybar {
background-color:#ECEEF5;
padding-top:10px;
width:300px!important;
padding-bottom:15px;
color:#474747;
}

You can change your widgets background color, width, text color by editing into above css code.

  • Lastly save your template and lets try to stick any widget…
  • Go to Layout–>Choose which widget you want to stick—>Click on edit.

Edit

  • After appearing widget page, copy the widget ID from the top address bar.

Copy

Blogger give automatically one uniqe ID for per widget, thats you copied ID of your widget which you want to stick .

  • Now go to Template—>Edit HTML
  • Press CTRL + F search/find box will appear, paste your widget ID and hit enter to search your widget in the template.

Search

  • Open folded code by clicking on black arrow
  • Your widgets full code will look like this :
<b:widget id='HTML1' locked='false' title='Subscribe' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
  • Copy and paste below code just above <b:includable id=’main’>
<div id="mdstickybar">
  • Now copy and paste below code just after <data:content/>
</div>
  • Finally your code will look like this :
<b:widget id='HTML1' locked='false' title='Subscribe' type='HTML'>
<b:includable id='main'>
<div id="mdstickybar">
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Now save your the template and see the result :D
Now visitors will see your sticky widget when they scroll. Hope this widget will help you get benefit from your sidebar.