I recently Installed this cool Sliding Menu Bar on my Blogger today and I want to share to you all on how to install it in your too. Before you install it, feel free to try it on my blog and see how wonderful and useful it is to have on your blog. I must say it has increased my pageviews/visitor after installing it on blog. I highly recommend that you install this Sliding Menu Bar on your Blogger too!
Instructions:
1. Edit your Html Blogger Template and add the code below directly above the </skin> part of your template. If you cant find it just add it above the ]]> part of your Html Blogger Template.
.fixed_menu {
position: fixed; /*set the position type for non IE systems*/
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; } /*Optional : This puts each link in the menu on a new line, remove if you want a horizontal menu*/
* html .fixed_menu {position:absolute;} /*IE only change the position mode of the menu*/
2. Add the code below directly below the <body> part of your Html Blogger Template.
<div class=’fixed_menu’>
<a href=’http://www.blogfixes.com/‘ title=’Home’><img src=’http://blogfixes.googlepages.com/HomeIcon1.png‘/></a>
<a href=’http://www.blogfixes.com/2008/05/author.html‘ title=’Mail me’><img src=’http://blogfixes.googlepages.com/EmailIcon1.png‘/></a>
<a href=’http://www.blogfixes.com/2008/06/free-blogger-templates-complete.html‘><img src=’http://blogfixes.googlepages.com/Templates1.JPG‘/></a>
<a href=’http://www.feedburner.com/fb/a/emailverifySubmit?feedId=2132289&loc=en_US‘ title=’Subscribe to Posts via Email’><img src=’http://blogfixes.googlepages.com/feediconblue1.png‘/></a>
<a href=’http://feeds.feedburner.com/blogfixes‘ title=’Subscribe to Posts via RSS’><img src=’http://blogfixes.googlepages.com/FeedIconorange.png‘/></a>
<a href=’javascript:scroll(0,0)’ title=’Scroll to top of this page’><img src=’http://blogfixes.googlepages.com/top.PNG‘/></a>
</div>
3. Edit the editable parts which are in RED according to your preferences. I have made the Images downloadable so that you can host in on your Googlepages or somewhere else. If you do not host these files on your own, this code may not work because as the number of users that uses these images grow the faster my Googlepages account reach it bandwidth limit. So make sure you host it somewhere else.
Enjoy! Post A comment if you have questions. This sliding menu css code is made possible by Wolverine Hacks! Thanks Mate!
{ 5 comments… read them below or add one }
http://clwolvi.blogspot.com/2008/09/wh-fixed-menu.html
check this post for fixed menu
I LOVE this….thanks…how come I have not seen this being used before? Is it that new?
Question: I like the choice of icons. Any idea where I can find more?
Its good && works but this make the site slow.
I have Tried it out this does not fix for me ??! Am getting this error
<<>>