Add A Floating Widget In Blogger Sidebar ~ Blogging Crave

There are certain widgets in your blogger sidebar which you would like to highlight so that it catches the readers attention.You would try out different ways to customize it.However nothing can match if it is made to float. Wouldn't it be cool to see a floating sidebar widget.The restrictions are also defined so the widget does not cross its borders.

FEATURES

Creative use of jQuery and Javascript
Flexible coding to accommodate any amount of widgets and any type of coding
Catches the readers eye ...hence prompting them to click on it
Is limited to the sidebar ,hence does not overflow

PROCEDURE

Login to blogger and Navigate to Template
Then Edit Html and search for </head>
Paste this code before it

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

Ignore this step if you have already added jQuery in your template
Now Save the template
Now go to Layout and Add a Gadget > Html / Javascript
Paste this code in it

<script type="text/javascript">
//<![CDATA[
(function($) {
var defaults = {
topSpacing: 0,
bottomSpacing: 0,
className: 'is-sticky',
wrapperClassName: 'sticky-wrapper'
},
$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.stickyElement.parent().removeClass(s.className);
s.currentTop = null;
}
}
else {
var newTop = documentHeight - s.stickyElement.outerHeight()
- 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.stickyElement.parent().addClass(s.className);
s.currentTop = newTop;
}
}
}
},
resizer = function() {
windowHeight = $window.height();
},
methods = {
init: function(options) {
var o = $.extend(defaults, options);
return this.each(function() {
var stickyElement = $(this);
stickyId = stickyElement.attr('id');
wrapper = $('<div></div>')
.attr('id', stickyId + '-sticky-wrapper')
.addClass(o.wrapperClassName);
stickyElement.wrapAll(wrapper);
var stickyWrapper = stickyElement.parent();
stickyWrapper.css('height', stickyElement.outerHeight());
sticked.push({
topSpacing: o.topSpacing,
bottomSpacing: o.bottomSpacing,
stickyElement: stickyElement,
currentTop: null,
stickyWrapper: stickyWrapper,
className: o.className
});
});
},
update: scroller
};
// 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(method) {
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method ) {
return methods.init.apply( this, arguments );
} else {
$.error('Method ' + method + ' does not exist on jQuery.sticky');
}
};
$(function() {
setTimeout(scroller, 0);
});
})(jQuery);
//]]>
</script>
<script>
$(document).ready(function(){
$("#rbtSocialFloat").sticky({topSpacing:0});
$("#topside_box").sticky({topSpacing:6});
});
</script>
<div class="sticky-wrapper" id="topside_box-sticky-wrapper" style="height: 222px;text-align:center;"><div id="topside_box-sticky-wrapper" class="sticky-wrapper" style="height: 112px;"><div class="" id="topside_box" style="">
YOUR WIDGET CODE HERE
</div></div></div>

Replace the YOUR WIDGET CODE HERE with your own code.
Save the gadget and you should be good to go

GENERAL FAQ'S

Q1. The Widget does not work .What should I do ?

Ans: Try removing the code we copied above </head>.The jQuery script could be conflicting with each other

Q2. What widgets can I include ?

Ans: Almost any widget can be included in it.It depends on your creativity

Q3. Will Adsense / advertisements work in the code ?

Ans: The coding has been designed to accommodate adsense and other advertisements.

If you have any doubts regarding this widget do comment below.Also if you would like to appreciate our work please do send in your thoughts.We just love reading your comments :) PEACE

About Admin

Syed Zaver Abbas is SEO expert in pakistan. he is web designer, web developer, software developer and graphics designer that means he is multi talented. he is also learning more about computer science.