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

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

hony Garand
// I
// =============
// Author: An

tmprovements by German M. Bravo (Kronuz) and Ruud Kamphuis (ruudk)
// Created: 2/14/2011
// Date: 9/12/2011

/sticky
// Description: Makes an element on the 
// Website: http://labs.anthonygarand.co
mpage stick on the screen as you scroll

ferent.com

(function($) {
var defaults = {
topSpa
// For Blogger by : http://www.makingdi
fcing: 0,
bottomSpacing: 0,
className: 'is-sticky',
center: false
},
$window = $(window),

n() {
var scrollTop = $w
$document = $(document),
sticked = [],
windowHeight = $window.height(),
scroller = functi
oindow.scrollTop(),
documentHeight = $document.height(),
dwh = documentHeight - windowHeight,

r s = sticked[i],
elementTop = s.stickyWrapper.o
extra = (scrollTop > dwh) ? dwh - scrollTop : 0;
for (var i = 0; i < sticked.length; i++) {
v
affset().top,
etse = elementTop - s.topSpacing - extra;
if (scrollTop <= etse) {
if (s.currentTop !== null) {

ar newTop = documentHeight - s.elementHeight - s.topSpacing - s.bottomSpacin
s.stickyElement.css('position', '').css('top', '').removeClass(s.className);
s.currentTop = null;
}
}
else {

vg - scrollTop - extra;
if (newTop < 0) {
newTop = newTop + s.topSpacing;
} else {
newTop = s.topSpacing;
}
if (s.currentTop != newTop) {

windowHeight = $window.height();
};

// should be more efficient than using $windo
s.stickyElement.css('position', 'fixed').css('top', newTop).addClass(s.className);
s.currentTop = newTop;
}
}
}
},
resizer = function() {
w.scroll(scroller) and $window.resize(resizer):
if (window.addEventListener) {

;
}

$.fn.sticky = function(options) {
var o = $.ex
window.addEventListener('scroll', scroller, false);
window.addEventListener('resize', resizer, false);
} else if (window.attachEvent) {
window.attachEvent('onscroll', scroller);
window.attachEvent('onresize', resizer
)tend(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

nt();
stickyWrapper
.css('width', stickyElement.outerWidth())
.css('height', elementHeig
.wrapAll('<div id="' + stickyId + 'StickyWrapper" style="' + centerElement + '"></div>')
.css('width', stickyElement.width());
var elementHeight = stickyElement.outerHeight(),
stickyWrapper = stickyElement.par
eht)
.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(){

icky({topSpacing:0});
});
</script>
$(&quot;#mdstickybar&quot;).s

t

• Now search for ]]></b:skin> tag,
• Copy and paste below css code just above it.

#mdstickybar {

background-color:#ECEEF5;
padding-top:10px;

ant;
padding-bottom:15
width:300px!impor
tpx;
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.

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

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.

• 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'>

f it's non-empty -->
<b:if cond='data:title !
<!-- only display title 
i= &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>

name='quickedit'/>
</b:inclu
<div class='widget-content'>
<data:content/>
</div>
<b:include
 dable>

et>
</b:wid
g

• 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;'>

if>
<div class='widget-content'>
<da
<h2 class='title'><data:title/></h2>
</b
:ta:content/>

</div>

</div>

<b:include name='quickedit'/>
</b:includable>


</b:widget>

Now save your the template and see the result 

Now visitors will see your sticky widget when they scroll. Hope this widget will help you get benefit from your sidebar.

Drop your comments and Question below..