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



2 komentar:

  1. Great sharing information.
    Nice submission and great profile. Your article very unique and original.
    Thanks to sharing with us.

    frenksy
    Student College Loan Consolidation,Debt Consolidation,Auto Insurance,Health Insurance,Business Credit Card

    BalasHapus
  2. cara menampilkan label gmna bos?

    BalasHapus