PandoraBox: Membuat menu horizontal

Membuat menu horizontal

by Sapto Mexavriand kategori : blog

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://mexacciolumos.blogspot.com"><span>Home</span></a></li>
<li><a href="http://mexacciolumos.blogspot.com"><span>Trik-Tips</span></a></li>
<li><a href="http://http://mexacciolumos.blogspot.com"><span>Free Template </span></a></li>
<li><a href="http://http://mexacciolumos.blogspot.com"><span>Kamus</span></a></li>
<li><a href="http://mexacciolumos.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 dan lihat hasilnya...