Membuat Menu Horizontal

Kamu ingin buat menu horisontal............. seperti ini nih contohnya. Oke yuk kita lanjutkan...

• Login ke blogger
• Pilih Layout --> Edit HTML
• Centang pada kotak "Expand Widget Templates".
• Sebaiknya backup template-mu terlebih dahulu. klik Download Full Template
  
• Selanjutnya cari kode ]]></b:skin>
• Kemudian copy script dibawah ini dan taruh diatasnya kode ]]></b:skin>

/* -- Awal MENU HORISONTAL -- */
#tabshori {
float:left;
width:100%;
font-size:12px;
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("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;
}
/* -- AKHIR MENU HORISONTAL -- */

• Selanjutnya cari kode dibawah ini

<div id="content-wrapper">

• Copy script dibawah ini, dan letakkan diatas atau sebelum kode <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>

• Ganti link diatas dengan link yang kamu tuju.
• Lihat hasilnya.
  

Related Posts