Cara Membuat Menu Horisontal colourful

Menu horisontal colourful yang kali saya share adalah seperti gambar di atas.

Sobat boleh ganti warna sesuai keinginan sobat.

Dan berikut ini caranya:

1. Login blog

2. Layout

3. Add gadget html/javascript

4. Letakkan kode berikut dan simpan

<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:#06D0D4;color:#fff}
#menubar a.trigfood{padding:8px 20px 8px 20px;border-right:1px solid #B2B2B2;background:#F6FF52;color:#24B200}
#menubar a.trigtravel{padding:8px 20px 8px 20px;border-right:1px solid #B2B2B2;background:#60FF52;}
</style>
<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a class='trighome' href='http://namablog.blogspot.com/'>Home</a></li>
<li><a class='trighealth' href='#'>Health</a></li>
<li><a class='triglove' href='#'>Love</a></li>
<li><a class='trigfoto' href='#'>Foto</a></li>
<li><a class='trigfood' href='#'>Food</a></li>
<li><a class='trigtravel' href='#'>Travel</a></li>
</ul>
<br class='clearit'/>
</div>
<div style='clear:both;'/>
</div></div>

Selesai dan selamat mencoba.