Create Horizontal Menu

Do you want to create a horizontal menu .............Please see Demo. Okay go ahead we continue...

• Login to blogger.com
• Select Layout --> Edit HTML
• Check the "Expand Widget Templates" box.
• We recommend backup your template first. Click Download Full Template
  
• Find code ]]></b:skin>
• Then copy script below and put the above code ]]></b:skin>

/* -- Start horizontal MENU -- */
#tabshori {
float:left;
width:100%;
font-size:12px;
border-bottom:1px solid #2763A5; /* Bottom Line */
line-height:normal;
}

#tabshori ul {
margin:0;
padding:10px 10px 0 50px; /*Menu Position */
list-style:none;
}

#tabshori li {
display:inline;
margin:0;
padding:0;
}

#tabshori a {
float:left;
background: url("http://i594.photobucket.com/albums/tt27/infosehatbugar/blackleft.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}

#tabshori a span {
float:left;
display:block;
background: url("http://i594.photobucket.com/albums/tt27/infosehatbugar/blackright.gif") 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;
}
/* -- END horizontal menu -- */

• Next look for the code below

<div id="content-wrapper">

• Copy the script below, and place it above or before the code <div id="content-wrapper">

<div id='tabshori'>
<ul>
<li><a href='http://infosehatbugar.blogspot.com/search/label/Poli%20Interna'><span>Interna</span></a></li>
<li><a href='http://infosehatbugar.blogspot.com/search/label/Poli%20Saraf'><span>Saraf</span></a></li>
<li><a href='http://infosehatbugar.blogspot.com/search/label/Poli%20Jiwa'><span>Jiwa</span></a></li>
<li><a href='http://infosehatbugar.blogspot.com/search/label/Poli%20Kulit'><span>Kulit</span></a></li>
<li><a href='http://infosehatbugar.blogspot.com/search/label/Poli%20Bedah'><span>Bedah</span></a></li>
<li><a href='http://infosehatbugar.blogspot.com/search/label/Poli%20Anak'><span>Anak</span></a></li>
<li><a href='http://infosehatbugar.blogspot.com/search/label/Poli%20Mata'><span>Mata</span></a></li>
<li><a href='http://infosehatbugar.blogspot.com/search/label/Poli%20THT'><span>THT</span></a></li>
<li><a href='http://infosehatbugar.blogspot.com/search/label/Poli%20Kebidanan%20dan%20Kandungan/'><span>Obgin</span></a></li>
<li><a href='http://infosehatbugar.blogspot.com/search/label/Poli%20Gigi'><span>Gigi</span></a></li>
<li><a href='http://infosehatbugar.blogspot.com/search/label/Poli%20Seksologi'><span>Seksologi</span></a></li>
<li><a href='http://infosehatbugar.blogspot.com/search/label/Laboratorium'><span>Lab</span></a></li>
<li><a href='http://infosehatbugar.blogspot.com/search/label/Farmasi'><span>Obat</span></a></li>
<li><a href='http://infosehatbugar.blogspot.com/search/label/Nutrisi%20dan%20Kebugaran/'><span>Nutrisi-Bugar</span></a></li>
<li><a href='http://infosehatbugar.blogspot.com/search/label/Tips%20Sehat%20dan%20Cantik/'><span>Tips</span></a></li>
<li><a href='http://infosehatbugar.blogspot.com/search/label/Journal'><span>Journal</span></a></li>
</ul>
</div>

• Change the links above with your link.
• See the results.
  

Related Posts