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:

<div id="tabshori">

<ul>

<li><a href="http://www.scubbytips.blogspot.com"><span>Home</span></a></li>

<li><a href="http://www.scubbytips.blogspot.com"><span>Trik-Tips</span></a></li>

<li><a href="http://www.scubbytips.blogspot.com"><span>Free Template </span></a></li>

<li><a href="http://www.scubbytips.blogspot.com"><span>Kamus</span></a></li>

<li><a href="http://www.scubbytips.blogspot.com"><span>Profile</span></a></li>

</ul>

</div >

After you copy the code, then you find the following code: <div id="content-wrapper"> and you put the script above code:
Last save and see the results on your blog
Note:
For the script that I give the red color on the second script, you replace it with a link you want to go: