- 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?
COMMENTS :
Don't Spam Here
0 komentar to “ cara mudah membuat menu bar blogger ”
Post a Comment
Bagi sobat-sobat silahkan comment disini, Insya Allah saya comment balik di blog anda dan Saya follow juga. Blog 7ASK adalah Blog Do Follow, Terimakasih atas kunjungan Anda..!