Add A Floating Sidebar On Blogger

How to alter your sidebar to a floating bar?. This  tutorial explains, how to alter your existing sidebar inwards to floating bar. This technique tin hold upward applied to a unmarried widget instead of whole sidebar, hence that widget exclusively floats along amongst scrolling.

This tin hold upward achieved past times adding a Javascript code to your blog. First cheque whether yous bring included jQuery inwards your spider web log template. This tin hold upward done past times going Blog template > Edit HTML > Proceed. Then search for this code

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'/>

If it is there, in addition to hence fine. Otherwise add together the higher upward code simply below the below code past times finding using Cntrl+F in addition to search.

]]></b:skin>

Then search whatsoever 1 of below codes. In default templates

<div class='column-right-outer'>

Or inwards well-nigh of the custom blogger templates(warning!: If yous can't detect it out, your id is different)

<div id='sidebar-wrapper'>

Just re-create the below code in addition to glue it higher upward the higher upward code.

<script type="text/javascript">         $(function() {             var get-go = $(".column-right-outer").offset();             var topPadding = 15;             $(window).scroll(function() {                 if ($(window).scrollTop() > offset.top) {                     $(".column-right-outer").stop().animate({                         marginTop: $(window).scrollTop() - offset.top + topPadding                     });                 } else {                     $(".column-right-outer").stop().animate({                         marginTop: 0                     });                 };             });         });     </script>

Replace the light-green colored text amongst your corresponding value(if yous are using other templates). For custom templates, the value tin hold upward anything similar sidebar-wrapper, for example. If it is id="somevalue", supersede light-green colored code amongst #somevalue in addition to if it is class='somevalue', in addition to hence supersede amongst .somevalue.
If yous desire to animate whatsoever other widget, detect its Id or class in addition to supersede it amongst light-green colored text. If yous bring whatsoever doubt, allow me know.

Share this post