RSS

Thnks Too Visit My Page, Be Enjoy And Stay Cool.

Creat A Horizontal Menu

Hey buddy we'll see you again on this post I will discuss about
how to create a horizontal menu

Many are wondering how to do create a horizontal menu??
I happened to have the same experience that is never used that does not have temp let on the menu bar, and finally I made myself the menu, of course I'm looking at the uncle Google hahaha..

OK we just straight to the topic
This way of making:

First:

first log into blogger then choose the menu layout - edit HTML
and do not forget to check the "Expand Widget Templates" or we back up files if an error occurred. then you find this code: ]]></b:skin&gt; After see the code, you copy the code below and put it over the code:

/*credits : http://trik-tips.blogspot.com */
#tabshori {
float:left;
width:100%;
font-size:13px;
border-bottom:1px solid #2763A5; /* Garis Bawah*/
line-height:normal;
}
#tabshori ul {
margin:0;
padding:10px 10px 0 50px; /*Posisi Menu*/
list-style:none;
}
#tabshori li {
display:inline;
margin:0;
padding:0;
}
#tabshori a {
float:left;
background: url(&quot;http://kendhin.890m.com/menu/blackleft.gif&quot;) no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabshori a span {
float:left;
display:block;
background: url(&quot;http://kendhin.890m.com/menu/blackright.gif&quot;) no-repeat right top;
padding:5px 14px 4px 4px;
color:#fff;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabshori a span {float:none;}
/* End IE5-Mac hack */
#tabshori a:hover {
background-position:0% -42px;
}
#tabshori a:hover span {
background-position:100% -42px;
}

The second step
you copy this code: