Scrolling Follow Bar for blogger

Add scrolling bar that always follow you when you scroll up and down the blog...



Step #1: As usual, you must login to blogger with your ID. You go straight to the Layout and choose Edit HTML.

Step #2: Use Ctrl+F and search for this </head> tag.

Step #3: Paste this code before the </head> tag:

<!--syafzpic bar start here-->

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2' type='text/javascript'/>

    <script type='text/javascript'>

        $(function() {

            var offset = $(&quot;#syafzpic-bar&quot;).offset();

            var topPadding = 15;

            $(window).scroll(function() {

                if ($(window).scrollTop() &gt; offset.top) {

                    $(&quot;#syafzpic-bar&quot;).stop().animate({

                        marginTop: $(window).scrollTop() - offset.top + topPadding

                    });

                } else {

                    $(&quot;#syafzpic-bar&quot;).stop().animate({

                        marginTop: 0

                    });

                };

            });

        });

    </script>

<!--syafzpic bar end here-->

Step #4: Use Ctrl+F again to find this ]]></b:skin> tag. Paste this code above the ]]></b:skin> tag:

/************ syafzpic-bar ***********/
#syafzpic-bar ul { background: #eee; padding: 10px; }
li { margin: 0 0 0 20px; }
#syafzpic-bar { width: 190px; float: right; }

Step #5: Save the template.

Step #6: You go to the Page Elements at the Layout and choose Add a Gadget. In the small pop up window, you must click at the HTML/JavaScript. A small pop up window will appear again with it content box.

Step #7: Paste the code below in the content box appeared:

<div id="syafzpic-bar" style="background: #dedede; color:#000000; border: solid 2px #f2f2f2;">
<ul>
    <li><a href='Put Your Link Here'>Put Your Text Here</a></li>
    <li><a href='Put Your Link Here'>Put Your Text Here</a></li>
    <li><a href='Put Your Link Here'>Put Your Text Here</a></li>

    <li><a href='Put Your Link Here'>Put Your Text Here</a></li>

    <li><a href='Put Your Link Here'>Put Your Text Here</a></li>
</ul>       
</div>


Setup instruction:

• Put Your Link Here   =  Put your link at this area
• Put Your Text Here   =  Put your text here
  

 Example:

• Put Your Link Here   =  http://blogging-style.blogspot.com
• Put Your Text Here   =  Blogging Tips and Style
  

Example code with background:

<div id="syafzpic-bar" style="background: #dedede; color:#000000; border: solid 2px #fff000;">
<ul>
    <li><a href='http://www.syafzpic.com'>syafzpic</a></li>
    <li><a href='http://blogging-style.blogspot.com'>Blogging Tips and Style</a></li>
    <li><a href='http://www.blogger.com'>Login</a></li>

    <li><a href='http://www.flickr.com'>Flickr</a></li>

    <li><a href='http://www.twitter.com'>Twitter</a></li>

</ul>       

</div>    

Example code without background:

<div id="syafzpic-bar">
<ul>
    <li><a href='http://www.syafzpic.com'>syafzpic</a></li>
    <li><a href='http://blogging-style.blogspot.com'>Blogging Tips and Style</a></li>
    <li><a href='http://www.blogger.com'>Login</a></li>

    <li><a href='http://www.flickr.com'>Flickr</a></li>

    <li><a href='http://www.twitter.com'>Twitter</a></li>

</ul>       

</div>    

You can also put your chat box code in it.
Example of the follow bar with chat box code:

<div id="syafzpic-bar" style="background: #dedede; color:#000000; border: solid 2px #fff000;">

Put your chat box code in this area

      

</div>  

Step #8: Save it and Done!


Demo  |  Demo with Chat Box

Please leave me a comment... enjoy!

InspiredMagz.com