How to create "Rolling side bar" for blogger ~ Zenplate

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