kumpulan : Cara Membuat Menu Horizontal Multi Color

Cara Membuat Menu Horizontal Multi Color

Blazer Blog, Tutorial Blog - Menu Horizontal multi color adalah sebuah menu dengan warna berbeda-beda yang bisa membuat tampilan menu ini lebih kretif, unik, dan keren untuk blog Anda. Membuat menu ini saya menggunakan CSS untuk membuat menu jadi berbeda-beda warnanya.

Demo Images (Blazer Blog)

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>

kode ku yg sudah jadi batam88

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

<li><a class='trighome' href='http://batam8888.blogspot.com/2012/10/bimbel.html'>Bimbel</a></li>

<li><a class='trighealth' href='http://batam8888.blogspot.com/2012/11/ser.html'>Servis Comp</a></li>

<li><a class='triglove' href='http://batam8888.blogspot.com/2012/11/software.html'>Software</a></li>

<li><a class='trigfoto' href='http://batam8888.blogspot.com/2012/10/tutorial-cd-interaktif.html#more/'>Tutorial CD</a></li>

<li><a class='trigfood' href='http://batam8888.blogspot.com/2012/11/belanja.html'>GROSIR TAS</a></li>

</ul>

</div>

</div></div>