Membuat Menu berwarna tanpa mengedit HTML

Kode Iklan anda yang ingin ada di sebelah kiri disini

Kode Iklan anda yang ingin ada di sebelah kanan disini

Sairam sobat bloger, hari ini tentu sudah tidak sabar menunggu berita terbaru dari targetbloger yang selalu menyajikan resep tradisional sederhana, simple, tapi bermakna untuk melengkapi blog sobat.

Okay, hari ini saya ingin membagi resep yang tidak banyak orang memilikinya. yakni membuat Menu Horizontal multi color yakni sebuah menu dengan warna berbeda-beda yang bisa membuat tampilan menu ini lebih kretif, unik, dan keren untuk blog sobat. Dalam membuat menu ini saya menggunakan CSS untuk membuat menu jadi berbeda-beda warnanya. Seperti yang saya pake ini. Nah kalo sobat bloger pada tertarik, silahkan siapkan diri dan mari mulai dari langkah awal ini :

Cara Membuat :
1. Login ke blog kamu.
2. Pilih Tata letak > Add Gadget 

3. Pilih kode HTML ato Javascript 

4. Copy Kode di bawah ini.

<style>
#menuwrapperpic{margin:0 auto;padding:0 auto;}
#menuwrapper{width:500px;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:1000;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.trigKismi{padding:8px 20px 8px 20px;border-right:1px solid #B2B2B2;background:#E42B2B;color:#fff;}
#menubar a.trigFakta{padding:8px 20px 8px 20px;border-right:1px solid #B2B2B2;background:#a800ff;color:#A89B9B;}
#menubar a.trigBloger{padding:8px 20px 8px 20px;border-right:1px solid #B2B2B2;background:#00248E;color:#fff}
#menubar a.triginspirasi{padding:8px 20px 8px 20px;border-right:1px solid #B2B2B2;background:#FFFF00;color:#24B200}
#menubar a.trigCermin{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://targetbloger.blogspot.com/'>Home</a></li>
<li><a class='trigkismi' href='http://targetbloger.blogspot.com/search/label/kismi?max-results=5'>kismi</a></li>
<li><a class='trigfakta' href='http://targetbloger.blogspot.com/search/label/fakta?max-results=5'>Fakta</a></li>
<li><a class='trigBloger' href='http://targetbloger.blogspot.com/search/label/bloger?max-results=5'>bloger</a></li>
<li><a class='trigInspirasi' href='http://targetbloger.blogspot.com/search/label/inspirasi?max-results=5'>inspirasi</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.