2009/02/26

How to create "Rolling side bar" for blogger

Have you ever seen this kind of bar? Some times it is very useful for visitor to subcribe,bookmark or contact you....easily.
So today I will lead you how to create this rolling side bar ( you can see it by this image):



Ready ? Go!!!!!!!!!!!!!!!

1st go to blogger.com, and log in---->Layout--->and choose Edit HTML ( still not stick Expand widget Templates yet).

And dont forget to back up your template for crash case by click "Download full template".

Ok now press Ctrl F and find this tag ]]></b:skin> and add this whole code below before it:
.fixed_menu {
position: fixed;
top: 140px;
left: 0px;
width: auto;
margin: 0 0px 0px 0px;
background: #ffffff;
opacity:.900;
filter: alpha(opacity=90);
padding: 7px 5px 5px 5px;
-moz-border-radius-topright: 10px;
-moz-border-radius-topleft: 0px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 0px;
}
.fixed_menu a:hover img {
position: relative;
top: 2px;
left: 2px;
border-top: 1px solid #b3b3b3;
border-left: 1px solid #b3b3b3;
border-bottom: 2px solid #999999;
border-right: 2px solid #999999;
}
.fixed_menu a { display: block; }
* html .fixed_menu {position:absolute;}


Finish ? oh god thats very easy just copy and paste, that's all!

Oh right next find the tag <body> and add this whole code below after it.
<div class='fixed_menu'>
<a href='http://zenplate.blogspot.com/' title='Home'><img src='http://i259.photobucket.com/albums/hh283/boy_proDX/home.png'/></a>
<a href='http://boyprodx.blogspot.com/2008/01/lin-h.html' title='Contact'><img src='http://i259.photobucket.com/albums/hh283/boy_proDX/mail_generic.png'/></a>
<a href='http://www.feedburner.com/fb/a/emailverifySubmit?feedId=1753328' title='Receive post by RSS'><img src='http://i259.photobucket.com/albums/hh283/boy_proDX/rss_pill_blue_32.png'/></a>
<a href='http://feeds.feedburner.com/zenplate' title='RSS'><img src='http://i259.photobucket.com/albums/hh283/boy_proDX/rss_pill_orange_32.png'/></a>
<a href='javascript:scroll(0,0)' title='Up to header'><img src='http://i259.photobucket.com/albums/hh283/boy_proDX/up.png'/></a>
</div>


Note:
Change the red code into yours ( your feed url, your homepage and the icons url to appear on your blog).
Good luck to you, please contact me if any problem

I have another tip to add a bar beneath a blog , click here to view.
Thank you very much


Website :boyprodx.blogspot.com

6 comments:

Otskey said...

Good Info!

Thanks!!

TechnoBricol said...

Tres bien.Je reviendrais

Amira said...

cool ;DD

Gnanz said...

wow nice

Goldsoul said...

interesting, thanks :)

mezzoe blog said...

great..and cool :)
thanks zenplate.

Post a Comment

Thanks for reading , if you have any problem please leave me a comment here I will help you by my best.Please note that you put the friendly words tohelp each other to improving and developing these tips to be better,or the best way for you to track my blog is subscribing my Feed.You are always welcome on Zenplate.
Best regard
Zen

 
.