Cara Membuat Menu Horizontal Warna Warni

 DEMO

  Cara Membuat Menu Horizontal Warna-Warni - Hallo Sahabat Facewoman Hari Ini Saya Akan Memposting Artikel Tentang Widget Blog,Yah, Apa Lagi Kalau Bukan Tentang Cara Membuat Menu Horizontal Warna Warni ,Postingan Saya Kali Ini Adalah Untuk Anda Yang Sering Bertanya Ke Email Saya bagaimana Cara Membuat Menu Warna - Warni.

 Karena Kalian Semua Setia Dan Slallu Mengunjungi Blog Saya, Maka Saya Akan Memberi Trick Ini KePada Anda Yang Membutuhkan. Maaf Sebelumnya Saya Engga Ngasih Tau Trick Ini ke Anda Semua Sahabat, Karena Saya Lupa Dengan CSS'y Hehhehe :D.

 Ini Dia Kita Simak Langsung Saja Cara- Caranya :D

1. Pertama - Tama Tentu Masuk Ke Blogger Anda
2. Lalu Edit HTML Dan Cari Kode Berikut Ini ]]></b:skin>.
Jika Sudah Ketemu Letakan Kode Di bawah ini Diatas Kode :

.menupic{background:#fff;width:970px;margin:0 auto;}



#homk{



background:url() repeat-x;



height:32px



}



#homk1,#homk7,#homk25 {



background:url() repeat-x;



height:32px



}



#homk2 {



background: #192f92;



background-image: -moz-linear-gradient(top, #d68523 0%, #ffc518 66%);



background-image: -webkit-linear-gradient(top, #d68523 0%, #ffc518 66%);



background-image: -o-linear-gradient(top, #d68523 0%, #ffc518 66%);



background-image: -ms-linear-gradient(top, #d68523 0%, #ffc518 66%);



background-image: linear-gradient(top, #d68523 0%, #ffc518 66%);



background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #d68523), color-stop(0.66, #ffc518));



-moz-box-shadow: 3px 3px 4px #aaaaaa;



-webkit-box-shadow: 3px 3px 4px #aaaaaa;



box-shadow: 3px 3px 4px #aaaaaa;



height:33px



}



#homk9 {



background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLVU8fjO8oDvBo46mfiT34wjGOkW3SV0KhAb_NKU-wyZVaMbqcJ_bt7jkNbP0HC9AXMdX0Le3MAgYZl-IKzcc9wX-DqKzpVzct9gqaDsYPcMDrr-FTG9pOb7vezIEr9nMNna9AExVa-N1c/s1600/header+pink+patimeh.png)

 repeat-x;



height:33px



}



#homk14 {



background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8MKE20W0vbldJA74fuv4t4g8EHl1w5RN9BciijWS-8H-Wk2YjAirAhepr4zV2NLY1t4tnk5IdSYNh0r0BCXj4boNE8fEkSRL6Ujn4VhsSMc5bquCEQZTI3o2qjzVVQUAhIdkQyeZ-hYw9/s1600/food-facewoman.gif) repeat-x;



height:33px



}



#menuwrapper2 {



width:970px;



height:30px;



margin:0 auto



}



.clearit {



clear:both;



height:0;



line-height:0.0;



font-size:4px



}



#menunavigasihorisontal {



background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP-ResW_wRqkS7gVQc85kSbBkTligAjJ6iAVJiphktS5u8ucgcUqqLmRlqPkUHxpQVpFwEOtGSUo5jpTe2QnibyHfESPPGRZFkaPqBeZgjOKmv_jsxRRuUD12I8ACxaGa_MIV3daWL6KE/s1600/KUCARA.1.jpg);



width:970px;



border-top:0 solid #999;



border-bottom:1px solid #FFF;



color:#fff;



height:32px;



overflow:hidden;



-moz-border-radius-topleft:8px;



-moz-border-radius-topright:8px;



margin:0 auto



}



#menunavigasihorisontal li a {



border-right:1px float:left;



display:block;



font-weight:970;



text-decoration:none;



color:#fff;



margin:0;



padding:8px 7px



}



#menunavigasihorisontal ul {



padding-left:0px;



font:bold 15px Arial;



color:#F7F7F7;



text-shadow:#999 2px 0px 1px ;



text-transform:none;



list-style-type:none;



letter-spacing:.01em;



margin:0



}



#bb2nav {



width:100%



}



#bb2nav,#bb2nav ul {



list-style:none;



font-size:bold 12px;



margin:0;



padding:0



}



#bb2nav a {



border-right:0 solid #fff;



border-left:1px solid #fff;



float:left;



display:block;



font-weight:700;



text-decoration:none;



color:#fff;



margin:0;



padding:8px 7px



}



#bb2nav li {



float:left;



position:static;



width:auto



}



#bb2nav li.red a:hover {



background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjorPJz0J8BS6dRvo2JNJd1ocNdTX4lphco25n6-06XulNo6BM2we00vmOrldJia1oie8YygoLkKd4SNUmIjkPiRW9hj4rGISAX3x1-btLAtdsDsvSn8aLsRaoytgTNDl7ecdYPhzctkiOS/s1600/menukuke2.png);



color:#FFF;



text-decoration:none



}



#bb2nav li.red1 a:hover {



background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuRdQkfkwFBY8hLChGq-m2y1JjyVGszEHi20L2L1qf9AZAbZICFygRSlx95ywIV9dJKRmzJ2644D0SJ3ZWoJ_sge2Yb-Bc04PrnV31p34A2ACw-KBWcQSlye_zOn0NuEToJB8Mb96Dl7w/s1600/KUCARA.2.png);



color:#FFF;



text-decoration:none



}



#bb2nav li.blue1 a:hover {



background:#f69 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivwU4C4hHvpzxQQUA3ZyKIuxZUkmXik4igu0jnkiyicmajWZWOUH0keweVmEQUVG7dCkrlhhRgA0waxZn_opnD2mtytCPnghbpzeDLox2dqnBN2pixqrdEVM14N-Txzy_-bZdL-ZlwXmOv/s1600/blue1bar.png.png);



color:#222;



text-decoration:none



}



#bb2nav li.coffe a:hover {



background:#f69 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigA9EZIQMpfrCWdLiblJY_AsKz81Ih4MBYCIA8otSzlUJoRh3O2PKJMpDsa9kVuUFIoguyuXAPNk8Uxz3rZT1W7bSKugA4TfDQy-HjK6wyTPYaYDg_WoNmea9RVLRBqaxfx9ite9CMwOOS/s1600/coffebar.png.png);



color:#FFF;



text-decoration:none



}



#bb2nav li.green a:hover {



background:#00cc00;



color:#FFF;



text-decoration:none



}



#bb2nav li.brown a:hover {



background:#f69 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBlVSitj1qFRserQAC0p-DKqh3Y5gcY2rrNJ0AwFH6H3egxyhWaiWUl7IkdwdhRZw5XopDc59K73ecTyEDp0hsLNEhyuBl_YHTwyokeMbvFu3xPMj6oLteu60oqxkJi9HzXunUsVeQAgs/s1600/Untitled-1.png);



color:#fff;



text-decoration:none



}



#bb2nav li.grey3 a:hover {



background:#f69 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf4iGyXMU3vPsrpdYXzZ5hNnwWo2hGL1exfd9eAfww8RtRTriNhPOLxBEERSJXsq-hUrq3i0VTUthi-icMiEuF-JjRxcyCO1q1tcHeC5gpJq-znkpNNMM74FqcJ5TMo_PxV6imZVmbdSue/s1600/Menukuke1.png);



color:#FFF;



text-decoration:none



}



#bb2nav li.pink a:hover {



background:#f69 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcXFZ2CPA3ZEl6w1W_8uQ5hYWGaTYPw_v-MVYGlA8lSSGVawY04bLjQw8nRbeldZ0E93lvCh7iK9hYXlcyWRrU9x4offvvjFSb8BKB9KIOan7g15Dg9qgJKfDhE8_Ea-VMUv5DJobiOUg/s1600/navlov.png);



color:#FFF;



text-decoration:none



}



#bb2nav li.orange a:hover {



background:#006699;



color:#FFF;



text-decoration:none



}



#bb2nav li.orange1 a:hover {



background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeO6TsJ-CefavpC-goya5QBflsv1RbHIFgeWaK3fTtNOyq5vQe48MKmQYrnSAo9q4nPo6NWtmN1LOlNdNnPzcuYP3lvWWG5lmzZ6vElvaDT19ZH8eJBvdAkLlsebXx_3P9cvP4xapujWVM/s1600/andikwin+tutorial.png);



color:#fff;



text-decoration:none

}

3.Setelah Itu Save Simpan.

 Langkah Selanjutnya Adalah Klik " ELMEN HALAMAN > TAMBAH WIDGET > Pilih HTML/JAVA SCRIPT,

Lalu Copas Kode Di Bawah Ini Tepat Di Kolom HTML/JAVA SCRIPT :

<div id='menunavigasihorisontal'>

<div id='menuwrapper2'>

<ul id='bb2nav'>

<li class='orange1'>

<div id='homk1'><a class='tooltip' href='#' rel='nofollow' title=''>HOME</a></div></li>

<li class='red'><a class='tooltip' href='#' rel='nofollow' title=''>BASKET</a></li>

<li class='coffe'><a class='tooltip' href='#' rel='nofollow' title=''>MOTOGP</a></li>

<li class='blue1'>

<a class='tooltip' href='#' rel='nofollow' title=''>SEPAK BOLA</a></li>

<li class='coffe'><a class='tooltip' href='#' rel='nofollow' title=''>SPORT LAIN</a></li>

<li class='grey3'><div id='homk14'><a class='tooltip' href='#' rel='nofollow' target='_blank' title='Situs Berita Sepak Bola Persita '>Arena Persita</a></div></li>

<li class='grey3'><div id='homk25'><a class='tooltip' href='#' rel='nofollow' target='_blank' title='Koleksi Video'>VIDEO</a></div></li>

<li class='red'><a class='tooltip' href='#' rel='nofollow' title=''>FORMULA 1</a></li>

<li class='red'><a class='tooltip' href='#' rel='nofollow' title=''>MOMENTUM</a></li>

<li class='red'><a class='tooltip' href='#' rel='nofollow' title='Buku Tamu Fajar'>BUKU TAMU</a></li>

</ul>

<br class='clearit'/>

</div>

<div style='clear:both;'/>

</div>

Mudah Bukan Semua Ituu ??? Semoga Trik Saya Bermanfaat ( Fajar "AP" )

 === TERIMAKASIH ===