A sticky floating widget is a widget which takes a fixed position in your blog. It's position does not depends or change on scrolling the page. It will float to the same position as your scroll up or down the web page.
This type of widgets are very useful and becoming in trends these days. People mostly use this feature in their subscription widget to increase their number of subscribers. You can also use it to show a news, notice or any product about your blog. Some people also use it in their ad to increase their earnings. Its depends on your choice of using this feature.
Note :
1. Google AdSense don't like their ads to be sticky. So they might ban your account.
2. Avoid adding to many floating widgets because it may annoy the users and also make other widgets less effective.
In this post, I will show you how you can make your widgets to be floating or sticky. Follow the steps given below carefully.
This type of widgets are very useful and becoming in trends these days. People mostly use this feature in their subscription widget to increase their number of subscribers. You can also use it to show a news, notice or any product about your blog. Some people also use it in their ad to increase their earnings. Its depends on your choice of using this feature.
Note :
1. Google AdSense don't like their ads to be sticky. So they might ban your account.
2. Avoid adding to many floating widgets because it may annoy the users and also make other widgets less effective.
In this post, I will show you how you can make your widgets to be floating or sticky. Follow the steps given below carefully.
Create Sticky Floating Widgets In Blogger
Step 1 : First, you have to create a simple widget. Go to Layout>>Add a Gadget. Give a name for it. Here, I am using 'Sticky Floating Widget' as a example.
Step 2 : Now, go to Template>>Edit HTML.
Step 3 : Click anywhere inside the codes and using the keys Control+F, open the search box.
Step 4 : Search for </body> and paste the following code just above it.
<script>
/*<![CDATA[*/
// Sticky Plugin
// =============
// Author: Kewal Dubey
(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(){
$("#mblfloater").sticky({topSpacing:0});
});
</script>
Step 5 : Now, search for name of your widget. Here , I am searching for 'Sticky Floating Widget'. Look for the code similar to shown below.
<b:widget id='HTML2' locked='false' title='Sticky Floating Widget' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:includable>
</b:widget>
Step 6 : Replace the above code with the code given below.
<b:widget id='HTML2' locked='false' title='Sticky Floating Widget' type='HTML'>
<b:includable id='main'>
<div id='mblfloater'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div> </div>
</b:includable>
</b:widget>
Step 7 : Save the template and you are done with it.
You have successfully created a floating widget for your blog.
I hope this tutorial helped you to create sticky floating widget for your blog. If you faced any problem in it then feel free to comment your problem below.
