Remember: This industrial plant pretty good alongside all kinds of widgets acquaint inwards your sidebar. It is non necessary that a somebody tin alone utilisation if for e-mail subscription boxes. You tin utilisation it for advertisement of your items, galleries, popular posts, Instagram photos, in addition to basically everything that y'all want for.
Step#1: Adding a New Widget:
The First affair y'all take to practise is to add together a novel widget inwards your sidebar hence that afterward on y'all tin larn inwards sticky. Go to Blogger.com >> Layout >> Add a Gadget >> Add HTML/JavaScript >> in addition to shout out the widget every bit “My Sticky Gadget”. Now writing anything inwards the HTML torso in addition to i time everything is downwardly press “Save” clitoris located at the halt of the page.Step#2: Installing a “Sticky” Plugin:
Now after properly adding a novel widget inwards your blog, it’s fourth dimension for about serious work. This fourth dimension become to Template >> Edit HTML >> in addition to search for the ending </body> tag in addition to only to a higher house it glue the next JavaScript code.<script>
/*<![CDATA[*/
// Sticky Plugin
// =============
// Author: Syed Faizan Ali
(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 second = 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 move to a greater extent than efficient than using $window.scroll(scroller) in addition to $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);
render 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#3: Creating a Widget “Sticky” inwards Blogger:
After adding the JavaScript code, y'all pick out to search for the shout out of your widget. Since, nosotros pick out named it every bit "My Sticky Gadget". Therefore, inwards the template coding search for "My Sticky Gadget". To move able to search correctly it is essential that y'all must utilisation the built-in search box provided past times the Blogger template editor.Note: To enable the search box click anywhere inwards the template editor in addition to press "CTRL+F". Now on finding "My Sticky Gadget" y'all volition able to run into a code similar to the the next one.
<b:widget id='HTML32' locked='false' title='My Sticky Gadget' type='HTML'>
<b:includable id='main'>
<!-- alone display championship 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>
Now after finding the code every bit mentioned above, only supplant it completely alongside the next coding.
<b:widget id='HTML32' locked='false' title='My Sticky Gadget' type='HTML'>
<b:includable id='main'>
<div id='mblfloater'>
<!-- alone display championship 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>
Remember: The ID of your widget should move unique. For example, if y'all are using id='HTML32' in whatsoever of your widget in addition to hence y'all cannot utilisation the same ID for others.
All done: Once everything is done, press the "Save Template" clitoris to goal the process.
Sticky floating sidebar widgets tin convey a lot of increment inwards your sign ups. They assist inwards increasing user engagement. You tin likewise utilisation multiple floating widgets inwards sidebar. However, this deed powerfulness annoy your visitors. Make certain y'all pick out a balanced design, hence that it don't annoy your users
We promise that this article pick out helped y'all inwards creating a Sticky floating sidebar widget inwards your Blogger website. This plugin is robust plenty to move used inwards whatsoever chemical component division of your sites. Let us know what y'all mean value inwards the below comments.
No comments:
Post a Comment