Cara sederhana membuat menu berwarna di blog.

Kode Iklan anda yang ingin ada di sebelah kiri disini

Kode Iklan anda yang ingin ada di sebelah kanan disini

Hello sobat bloger, pernah liat menu yang memiliki tampilan warna  warni.? kelihatan lebih menarik bukan ? Nah jika sobat bloger tertarik untuk memasangnya. simak informasi resep di bawah yang sengaja saya racikkan segampang mungkin agar cepat bisa tersaji dan dinikmati (Menu makanan kali ye...) Oke sekarang siapkan diri sobat dan mari kita mulai saja.

Cara Membuat :
1. Login ke blog kamu.
2. Pilih Rancangan 

3. Add Gadget

4. Pilih code Html atau Javascript

5. 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>

Ctt : Trig...... (ganti dengan judul menu sobat)

Targetbloger.blogspot.com ganti dengan alamat Url yang sobat punya. 

Langkah terakhir simpan. dan lihat hasilnya. Happy Bloging ya