Header Ads

  • Breaking News

    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(){ $(&quot;#mdstickybar&quot;).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'> <!-- only display title if it's non-empty --> <b:if cond='data:title != &quot;&quot;'> <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"> <!-- only display title if it's non-empty --> <b:if cond='data:title != &quot;&quot;'> <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.


    No comments

    Post Top Ad

    Post Bottom Ad