How to make / create "Sticky" Sidebar

Sticky sidebar is not necessary, but again, not that it is not, if you have a blog that goes almost to infinity, then this is the gadget for you and looks nice. To mention what it is, what it's for, what you can add and stuff.

You can add your Subscription Form.
You can add a Facebook Widget
You can add any widget except adsense (advertising) because Google may prohibit your blog if you didn't know or didn't have that information

And again: Always do "back up" of your template because you can restore it if something goes wrong.

Live Demo

How to create what you saw? Let's go step by step

CTRL + F and find </head> tag in blogger
Next code copy and paste just above </head> tag

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'/><script type='text/javascript'> /*<![CDATA[*/ // Sticky Plugin // ============= // Author: Anthony Garand // 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 stick on the screen as you scroll // For Blogger by : http://www.makingdifferent.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) { 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>

This code is the same as above just I put in a box

If you have jQuery plugin, then don't add this line
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'/>

Now search for </body> tag
Copy next code and add just above him.

<script type='text/javascript'> $(document).ready(function(){ $("#mdstickybar").sticky({topSpacing:0}); }); </script>

Now search ]]></b:skin> tag and next line paste just above it

#mdstickybar { background-color:#ECEEF5; padding-top:10px; width:300px!important; padding-bottom:15px; color:#474747; }

Go to layout and choose widget you wish

When you click edit, you will see something like this

Blogger gives you uniqe ID for each widgets so you just find ID and copy number which is at the end of widget/gadget

Now this: Template—>Edit HTML

CTRL + F and find ID which you've got

Take a look how and where to search

Final result would be something like this
<b:widget id='HTML1' locked='false' title='Subscribe' type='HTML'> <b:includable id='main'> <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>

Now copy this code ( bold, above ) <b:includable id=’main’> and add below
<div id="mdstickybar">

Now copy and paste code just below this one code <data:content/>
</div>

Finally is this:

<b:widget id='HTML1' locked='false' title='Subscribe' type='HTML'> <b:includable id='main'> <div id="mdstickybar"> <b:if cond='data:title != ""'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'> <data:content/> </div></div> <b:include name='quickedit'/> </b:includable> </b:widget>

Save template and I really hope that you can manage with this. If there is some problem, let's try to fix it. Happy blogging.

Notifikasi

Mix Blogging

How to make / create "Sticky" Sidebar