Enter your email to subscribe Devaradise. Totally free!

How to Make Page Menu for Blog Manually with Ribbon Style

you search the page menu style for your blogs? or maybe you want to learn how to make page menu manually by yourself? . okay, bloggers.. this time i will give you a tutorial about how to make page menu for your blog manually with ribbon style, 100 % by Css and html. it is horizontal page menuthat usually applied at top part of blogs. this page menu style have been applying on my other blog. www.blogberbagi.com (indonesia blog). i think it is interesting.

page menu with ribbon style
and, just recomendation from me. learn Css code more by modify the code of this page menu style. modify the width, background color, and other of this page menu in order to comply with your blog design/ template. if you don’t know anything about css or html code, just read the previous post in blog design category on this blog and learn about it.
okay.. lets follow the step below to make page menu with ribbon style.
1. log in to your dashboard
2. go to layout/design menu
3. add gadget with HTML/javascript type.

4. then copy the code below and paste on HTML/javascript gadget.

<div class=’menu’>
<a href='(your menu URL) e.g > http://bloggerask.com’><span>Home</span></a>
<a href='(your menu URL)’><span>About</span></a>
<a href='(your menu URL)’><span>Galery</span></a>
<a href='(your menu URL) ‘><span>Contact Me</span></a>
</div>
<style type=”text/css”>
.menu {
width:1000px;
position:relative;
margin: 5px auto;
}
.menu:after, .menu:before {
position:relative;
margin:5px auto 15px auto;
content: “”;
float:left;
width:170px;
border:1.5em solid rgba(0, 159, 0, 0.8 );}
.menu:after {
border-right-color:transparent;}
.menu:before {
border-left-color:transparent;
}
.menu a:link, .menu a:visited {
color:yellow;
text-decoration:Block;
float:left;
font-family:Arial;
font-size:16px;
height:3.15em;
overflow:hidden;
}
.menu span {
background:rgba(0, 159, 0, 0.8 );
display:inline-block;
line-height:3em;
padding:0 1em;
margin-top:0.5em;
position:relative;
-webkit-transition: background, margin 0.2s;
-google-ms-transition: background, margin 0.2s;
-moz-transition: background, margin 0.2s;
-o-transition: background-color, margin-top 0.2s;
transition: background, margin 0.2s;
}
.menu a:hover span {
background:rgba(0, 159, 234, 0.5 );
margin-top:0;
}
.menu span:before {
content: “”;
position:absolute;
top:3em;
left:0;
border-right:0.5em solid #9B8651;
border-bottom:0.5em solid rgba(0, 159, 234, 0.3 );
}
.menu span:after {
content: “”;
position:absolute;
top:3em;
right:0;
border-left:0.5em solid #9B8651;
border-bottom:0.5em solid rgba(0, 159, 234, 0.3 );}
</style>
*the width of this page menu probably is not comply with the width of your blog. you can modify the code with red font as you need for the width this menu. and, remember ! the more number of your blog page menus, the greater the width.
5. save it, and finish 🙂
*this step is just for blogger/blogspot only. if you use other than blogger/blogspot, you can still adjust.
Okay, that’s it.. if you have any questions, just ask on the comment box 🙂 good luck and happy blogging 🙂

Leave a Reply