Blogger Widgets Blogger Widgets

1

sabica
salamat datang di blog percobaan saya ini, terima kasih atas kujungan anda!

Sabtu, 04 Juni 2011

Menu Horizontal

Membuat Menu Horizontal


percantik donkz blog anda dengan membuat Menu seperti ini:

mari kita mulai .....

-login terlebih dahulu Layout --> Edit HTML, trus beri tanda centang pada Expand
Widget Templates
-cari script seperti ini ]]></b:skin>, nah kalo udah ketemu copy code berikut dan letak diatasnya...
/*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("http://kendhin.890m.com/menu/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://kendhin.890m.com/menu/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;
}

-text yang berwarna merah itu adalah warna menu nya... anda bisa mengganti nya..dengan warna yang lain, kalau anda ingin ganti dengan warna merah script nya jadi seprti ini :
background: url("http://kendhin.890m.com/menu/redleft.gif") no-repeat left top;

background: url("http://kendhin.890m.com/menu/redright.gif") no-repeat right top;

-nah kalau sudah, anda cari script seperti ini
<div id="content-wrapper">

-kalau sudah ketemu copy script ini dan letakkan di atasnya
<div id="tabshori">
<ul>
<li><a href="http://dhedie-tips-triks.blogspot.com"><span>Home</span></a></li>
<li><a href="http://dhedie-tips-triks.blogspot.com"><span>Trik-Tips</span></a></li>
<li><a href="http://dhedie-tips-triks.blogspot.com"><span>Free Template </span></a></li>
<li><a href="http://dhedie-tips-triks.blogspot.com"><span>Kamus</span></a></li>
<li><a href="http://dhedie-tips-triks.blogspot.com"><span>Profile</span></a></li>
</ul>
</div >

-ganti http://dhedie-tips-triks.blogspot.com dengan link akan anda tuju
link tersebut bisa berupa alamat blog anda
-simpan

Tidak ada komentar:

Posting Komentar

  • RSS
  • Delicious
  • Digg
  • Facebook
  • Twitter
  • Linkedin

cari

 
  • Blogroll

    Connect With Us

  • Consectetuer

    Recomended

  • terbanyak dilihat

    Instructions

  • Comments