Excess Sticky Widget
The surplus would make the visitor becomes easier to see Sidebar Widget buddies use on your blog, and Sticky Widget is not burdensome or no effect on the weight of your blog, so do not hesitate to use the Sticky Widget.How to Make Sticky Widget On Blog
- Login to your Blogger Dashboard
- Click the Template »Edit HTML
- Find the code ]]> </ b: skin> (to speed up the search press Ctrl + F)
- Enter the code below the above / before the code ]]> </ b: skin>
<! - Sticky -> # mdstickybar {background-color:#ECEEF5;padding-top:10px;width:300px!important;padding-bottom:15px; color:#474747;} <!--sticky-->
- Then find the code </ head> and enter the following code above / before </ head>
<! - Sticky -> <script src = ' / / ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js ' /> <script type='text/javascript'> / * <! [CDATA [* / / / Sticky Plugin / / ============= / / Author: Cross Weblog/ / 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 sticks on the screen as you scroll / / For Blogger by: http://lintasweblog.blogspot.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) { + s.topSpacing newTop = newTop; } 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) centerElement var = "margin-left: auto; margin-right: auto;";stickyId = stickyElement. attr ('id'); stickyElement . wrapAll ('<div stickyId id="' + + +'StickyWrapper" style="''"> centerElement + </ div>') . css ('width', stickyElement.width ()); elementHeight var = 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> <! - sticky ->
The code that I give a different color, it is jQuery, if there is a jQuery blog buddy, better delete one, because if there are two in the jQuery Blog buddy, Sticky Widget will not be able to / managed.
- Further search </ body>
- Enter the code below the above / before </ body>
<Script type='text/javascript'>
$(document).ready(function(){
$("#mdstickybar").sticky({topSpacing:0});
});
</script>
- Save Template
After that we should look for the widget ID we pairs of Sticky widgets, widget ID Enough To search for Buddy entered the Layout »Then find a widget that will mate pairs Sticky» then click Edit in the widget, nah mate Widget ID will be listed on the Url Widget , Url Widget example:
http://www.blogger.com/rearrange?blogID=1787216510986734973&action=editWidget§ionId=sidebar-bawah&widgetType=null&widgetId= HTML2
I gave the color green before, it is a Widget ID
- Then my friend back to Template »Edit HTML
- Then search widget ID friend who had wanted to be Sticky Widget
- Examples of existing widget ID in the Template
<b:widget id='HTML2' locked='false' title='Contact' 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:include name='quickedit'/>
</ b: includable>
</ b: widget>
Above is the original widget code in the template mate, might usually differ slightly, but how to make Sticky Widgets will always work: P
- Then my friend just simply add some code in the code above this widget, the following code ...
<Div id = ' mdstickybar ' >
</ div>
- Enter the code was, in Widgets like this:
<b:widget id='HTML2' locked='false' title='Contact' type='HTML'>
<b:includable id='main'>
<Div id = ' mdstickybar ' >
<! - only display title if it's non-empty ->
<b:if cond='data:title != ""'>
<h2 class='title'> < the data: title /> </ h2>
</ b: if>
<div class='widget-content'>
<data:content/>
</ div>
</ Div>
<b:include name='quickedit'/>
</ b: includable>
</ b: widget>
- Finally, the Save Template.
That's How to Make Sticky Sidebar Widget On Blog . If there is a shortage or a problem with the template Buddy can comment below, or go directly to the Facebook / Twitter me. Actually Siraja Blogger " Kang Ismet "'ve been giving tutorials to Make Sticky Widget on her post, but a lot of bloggers do not succeed / fail in The tutorial, with different reasons, and I am sure this tutorial will work on the blog buddy, So Funny and Always Blogging: D
Post A Comment: