Cara Membuat Menu Horizontal Multi Color

Cara Membuat :
 
1. Login ke blog kamu.
2. Pilih Rancangan > Add Gadget > Copy Kode di bawah ini.

<style>
#menuwrapperpic{margin:0 auto;padding:0 auto;}
#menuwrapper{width:980px;height:27px;margin:0 auto}
.clearit{clear:both;height:0;line-height:0.0;font-size:0}
#menubar{width:100%}
#menubar,#menubar ul{list-style:none;font-family:Arial, serif;margin:0;padding:0}
#menubar a{display:block;text-decoration:none;font-size:14px;font-weight:700;text-transform:uppercase;color:#333;padding:8px 8px 8px}
#menubar a.trigger{padding:8px 20px 8px 20px;border-right:1px solid #B2B2B2;}
#menubar a.trigcome{padding:8px 18px 8px 20px;}
#menubar li{float:left;position:static;width:auto}
#menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{background-color:#008E00;color:#fff;-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;-moz-box-shadow:0 2px 4px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.6); }

#menubar a.trighome{padding:8px 20px 8px 20px;border-right:1px solid #B2B2B2;background:#ff9900;}
#menubar a.trighealth{padding:8px 20px 8px 20px;border-right:1px solid #B2B2B2;background:#E42B2B;color:#fff;}
#menubar a.triglove{padding:8px 20px 8px 20px;border-right:1px solid #B2B2B2;background:#a800ff;color:#A89B9B;}
#menubar a.trigfoto{padding:8px 20px 8px 20px;border-right:1px solid #B2B2B2;background:#00248E;color:#fff}
#menubar a.trigfood{padding:8px 20px 8px 20px;border-right:1px solid #B2B2B2;background:#FFFF00;color:#24B200}
#menubar a.trigtravel{padding:8px 20px 8px 20px;border-right:1px solid #B2B2B2;background:#008E00;}




</style>

<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a class='trighome' href='http://blazerracing.blogspot.com/'>Home</a></li>
<li><a class='trighealth' href='http://blazerracing.blogspot.com/search/label/tips%20kesehatan?max-results=5'>Health</a></li>
<li><a class='triglove' href='http://blazerracing.blogspot.com/search/label/Love?max-results=5'>Love</a></li>
<li><a class='trigfoto' href='http://blazerracing.blogspot.com/search/label/foto?max-results=5'>Foto</a></li>
<li><a class='trigfood' href='http://blazerracing.blogspot.com/search/label/food?max-results=5'>Food</a></li>
<li><a class='trigtravel' href='http://blazerracing.blogspot.com/search/label/travelling?max-results=5'>Travel</a></li>

</ul>
<br class='clearit'/>
</div>
<div style='clear:both;'/>
</div>

Ganti kata yang dicetak tebal dengan URL yang dituju.
Ganti kata yang dicetak tebal miring dengan kata lainnya.

Simpan dan lihat hasilnya. Jika Anda paham dengan kodenya saya yakin Anda bisa memodifikasi menunya.


sumber: blazerracing.blogspot.com