Selasa, 03 Juli 2012

Cara Membuat Menu Horizontal Multi Color


By on 15.24

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>
Ganti kata yang dicetak tebal dengan URL yang dituju.
Ganti kata yang dicetak tebal miring dengan kata lainnya.

Simpan dan lihat hasilnya. Jika Anda paham dengan kodenya saya yakin Anda bisa memodifikasi menunya.

Bagi Anda yang mau menyebarluaskan artikel ini dimohon untuk meletakan sumbernya.
blazerracing.blogspot.com

About Syed Faizan Ali

Faizan is a 17 year old young guy who is blessed with the art of Blogging,He love to Blog day in and day out,He is a Website Designer and a Certified Graphics Designer.

6 komentar:

  1. Mkasih gan,,menunya keren bgt..

    BalasHapus
  2. pagi gan slm kenal,,,klo tlg kasih tau dunk gimana caranya bikin menu horizontal yg selalu nempel terus diatas biarpun mouse digerakkan kebawah.contohnya kayak punya agan itu yg menunya ada tulisan blogger,naruto,categories,resep,friends.tlg bagi ilmunya dung,,soalnya saya cari2 dri kemarin ngk ketemu2,,,thnks n salam persahabatan,,ditunggu ya ilmunya,,,

    BalasHapus
  3. Iya nanti saya buatin tapi agak beda yah dengan milik saya.

    BalasHapus
  4. izin dicoba di praktekan di blogku ya gan...salam kenal

    BalasHapus
  5. buka http://www.ravictory.blogspot.com ya :)

    BalasHapus