 |
| Demo Images (Blazer Blog) |
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.
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>
<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<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='trighealth' href='http://batam8888.blogspot.com/2012/11/buku.html'>Buku</a></li>
<li><a class='trigfood'
href='http://batam8888.blogspot.com/2012/11/belanja.html'>GROSIR
TAS</a></li>
<li><a class='trighealth'
href='http://batam8888.blogspot.com/2012/10/apa-saja_10.html'>apa
aja</a></li>
</ul>
<br class='clearit'/>
</div>
<div style='clear:both;'/>
</div></div>
