Home
About
Forums
Advertise
Contact
Subscribe to RSS Feed
Add to My Yahoo
Subscribe in NewsGator
Subscribe with Bloglines
Add to Netvibes
Add to GoogleWH Fixed menu for blogger
Posted by Nitesh Kothari at 02 September 2008 | Post views:|
Share this post:
|
|
1 Comments
I am using a fixed menu at left side of my other Blog Free Downloadz since a long time. Today i came across a same menu at Blogfixes.com. So, i thought i should write about it and explain how to customize. Some of the features of Fixed Menu.
- It is a Fixed menu.
- It can be placed anywhere on the blog
- It can be placed horizontally as well as vertically
- It has Mouse Hover Effect
How to add WH Fixed Menu for bloggers
a) CSS Code: Copy and paste the following code between <head> and </head>. Most advisable place would be just before ]]></b:skin> or </b:skin>
.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*/
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*/
How to customize HTML Code
you can change the position of the menu, color, background color, margin, padding and so on.
b) HTML Code: Copy and paste the following code between <body> and </body>.
<div class='fixed_menu'>
<a href='http://YOURBLOG.blogspot.com' title='Home'>
<img src='http://wolverinehacks.googlepages.com/HomeIcon.png'/></a>
<a href='mailto:YOUR EMAIL ADDRESS' title='Mail me'>
<img src='http://wolverinehacks.googlepages.com/EmailIcon.png'/></a>
<a href='http://YOURBLOG.blogspot.com/feeds/posts/default' title='Subscribe to feed - Posts'>
<img src='http://wolverinehacks.googlepages.com/feediconblue.png'/></a>
<a href='http://YOURBLOG.blogspot.com/feeds/comments/default' title='Subscribe to feed - Comments'>
<img src='http://wolverinehacks.googlepages.com/FeedIconorange.png'/></a>
<a href='javascript:scroll(0,0)' title='Scroll to top of this page'>
<img src='http://wolverinehacks.googlepages.com/top.PNG'/></a>
</div>
<a href='http://YOURBLOG.blogspot.com' title='Home'>
<img src='http://wolverinehacks.googlepages.com/HomeIcon.png'/></a>
<a href='mailto:YOUR EMAIL ADDRESS' title='Mail me'>
<img src='http://wolverinehacks.googlepages.com/EmailIcon.png'/></a>
<a href='http://YOURBLOG.blogspot.com/feeds/posts/default' title='Subscribe to feed - Posts'>
<img src='http://wolverinehacks.googlepages.com/feediconblue.png'/></a>
<a href='http://YOURBLOG.blogspot.com/feeds/comments/default' title='Subscribe to feed - Comments'>
<img src='http://wolverinehacks.googlepages.com/FeedIconorange.png'/></a>
<a href='javascript:scroll(0,0)' title='Scroll to top of this page'>
<img src='http://wolverinehacks.googlepages.com/top.PNG'/></a>
</div>
How to customize HTML Code
Download Following images and save it to your server or googlepages.
Now edit links in red to desired links.
Final Words
I hope you understood everything. I am using horizontal fixed menu for Wolverine Hacks Blog. You can check it on top of this page. Soon, i will write how to make a nice horizontal fixed menu for blogger.Any doubts, comments here. So what do you have to say on this?
