Enter your email to subscribe Devaradise. Totally free!

Syakirurahman Green Page Menu Style

Well, Now i will share about page menu style again after i shared two ( and ) some times ago. This page menu fxcm style use green as basic color. so, this page menu will more suitable if your template have green as basic color.

okay. I will not more talking. Lets to follow the steps below to use this page menu to your blog.

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.


<style type=”text/css”>
.MSR_menu {
left:10px;
text-transform:uppercase;
font-size:15px;
position:relative;
margin: 0;
padding: 0;
list-style: none;
height:35px;
background:#159515;
border:solid 1px #000;
}
.MSR_menu li{
background:rgba(0,0,0, 0.1);
display:inline;
margin:0 auto;
float:left;
position:relative;
padding:5px 1px;
text-align:center;
}
.MSR_menu li a {
text-decoration:none;
background:#fff;
color:#000;
font-family:arial, calibri, trebuchet MS;
font-weight:bold;
padding: 7px 28px;
border:solid 1px #000;
}

.MSR_menu li a:hover, .MSR_menu li a:active {
background:#07DC07;
-moz-transition:all 0.4s linear;
-webkit-transition:all 0.4s linear;
-google-ms-transition:all 0.4s linear;
-o-transition:all 0.4s linear;
padding-bottom:14px;
-moz-border-radius:0px 5px 5px 0;
-webkit-border-radius:0px 0px 5px 5px;
border:solid 2px #000;
}

</style>
<ul class=”MSR_menu”>
<li><a href=”#“>menu 1</a></li>
<li><a href=”#“>menu 2</a></li>
<li><a href=”#“>menu 3</a></li>
<li><a href=”#“>menu 4</a></li>
</ul>


This is Demo :

5. modify the red code to your url you like to linked.
8. click save and place it on the top of your layout.
9. finish.

*tips: if you feel this page menu style is not comply with your blog design, i strongly recommend you to don’t use this page menu style.
that’s all, if you have any questions, you can ask it on comment box below, i looking forward for your response.
Happy Blogging 🙂