Tuesday, January 5, 2010

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!

4 comments:

Admin on January 7, 2010 at 5:58 PM said...

oke deh mantappp nihh broo.......nice post !

Admin on January 7, 2010 at 6:36 PM said...

show your popularity blog at www.popurl.us
ure pagerank 2 broo.....

Syarhan on January 9, 2010 at 2:42 AM said...

thanks for the info bro...

Anonymous said...

Mantaph.. bingung sendiri mw nerapin yg mana...

Post a Comment

 

Blogger Tips and Style Copyright © 2009 Community is Designed by Free Blogger Template