Cara Membuat Menu Horizontal Warna Warni

Cara Membuat Menu Horizontal Warna Warni » The FIM Site kali ini akan sedikit berbagi info mengenai Cara Membuat Menu Horizontal Warna Warni. Untuk mempercantik menu tampilan horizontal blog Anda maka Anda bisa memberikan sedikit sentuhan warna warni sehingga pengunjung pun tidak akan bosan untuk melihatnya..

Berikut adalah tutorialnya...

Lalu Edit HTML Dan Cari Kode Berikut Ini ]]></b:skin>.
Jika Sudah Ketemu Letakan Kode Di bawah ini

.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/AVvXsEjaXRa7SAd40LhI4HXKGXF7aBY0sip4mEK4leLFBh8Q-OmuCwyFp2xwjFxFvX5ACZxeLnQ53N9PzjyWtviktksjbSzfdxV-OwSIJVn6r34Y1LohqP_AycEOXVzRoqJutHCRuzoHhM-NIbom/s1600/header+pink+patimeh.png)  
      
     repeat-x;  
      
      
      
    height:33px  
      
      
      
    }  
      
      
      
    #homk14 {  
      
      
      
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH_j9er6mhloOQiN_CywAi9lS5Q5nHS7SZf5mgw4j0zUndGXH45P0WQULnl6ejWRawqSjRCTRFOwCSoBSiFKfzNuEJ-G_krq5oZqpro8ypuIyFVdeJUIhgwvnynjKfq7xFEjgYKAxfYz0w/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/AVvXsEjWbGlRiPhznFeT8FPYtXjKPZHU0UsrGqcXtiN2tK5LMp5lyfMMk6y4LD89Kzh9D3LATX4m_1eKqh3B2bwnviy_bi7GdSpiDVF2dF9pAS7MKBM2nVRpuQd1Jr6nO9Ck9WqTOSPPP28E7Tc/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/AVvXsEj0D82MZMBzMkots8ijraRzHfYwQY8Ju1iJJ5gRaNiljkuJXaZXNtmcMZln5tErUfeCA3l6NQv6II1HRqBXXYjn4i2rGAwwEe8rAtWa6qgfbvKZ5_1_SqKzkBwCYGJY6loywzthxhTevSLa/s1600/menukuke2.png);  
      
      
      
    color:#FFF;  
      
      
      
    text-decoration:none  
      
      
      
    }  
      
      
      
    #bb2nav li.red1 a:hover {  
      
      
      
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmhS-Csgls1tgkGMqd6kC0ad8bim45RpzhEO5MtvMdgSRyMLyYvz91OpWwKsofh7rJ-3WswBjGmA2II8RxoCzAjM-lVGYBE0hAfJOrFXtuPCtxJ5KkFtLYXQbEJwOkK5Oc6XJEdE1ygeM/s1600/KUCARA.2.png);  
      
      
      
    color:#FFF;  
      
      
      
    text-decoration:none  
      
      
      
    }  
      
      
      
    #bb2nav li.blue1 a:hover {  
      
      
      
    background:#f69 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZB6ILuFe9RMRI9NK25W_RKMgh_u3Tr2W-0l1gU_NKnDL749C8rP8yweeTxwQgicVZQPdXt_LNdYdM4-ln_EyUvokQmPSKl7lHsHaHqp5o1p1AwhP6YY1-q6XuFz_zVGcQ-R5pd4g_-Nd_/s1600/blue1bar.png.png);  
      
      
      
    color:#222;  
      
      
      
    text-decoration:none  
      
      
      
    }  
      
      
      
    #bb2nav li.coffe a:hover {  
      
      
      
    background:#f69 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwDU3G-tyY2KVgHj_cPAF4VyMO7NI9brYfiU7xOzKTRS3LvXD46z2Od51fo72dDegMltP2aEiHCHxebRtxKfgR4xgL_5VXmit496tXUZxPMvaCCCtIURFDcIWFNNWOWc8y4tLg1X7tNOL3/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/AVvXsEj6bVEtcWhL3sTss1Mjdr7nRR_qmskUgnGRpAJkZ7948ZpR6c0ssG3IFY82M022J8KWTNG3qxEROojgRcidk78wXuq92d8ZX1dQKhEbAQ73WYQRgPYTRyvYMyLuquEYBwJg1l6-qnk3mY8/s1600/Untitled-1.png);  
      
      
      
    color:#fff;  
      
      
      
    text-decoration:none  
      
      
      
    }  
      
      
      
    #bb2nav li.grey3 a:hover {  
      
      
      
    background:#f69 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQBEV9M0VoqM9IDp_fu44pTrpLiwuPgoGrXQfwRNGUm7lUozdZHMHPrd1bKKq0lXvHFW42tyxjnjl8iaXSyX5Zg4R6L1uJpYPgiW8PnlmfevRCvH_M45iK9LZALw5juZ6uQHLTgyRxQShZ/s1600/Menukuke1.png);  
      
      
      
    color:#FFF;  
      
      
      
    text-decoration:none  
      
      
      
    }  
      
      
      
    #bb2nav li.pink a:hover {  
      
      
      
    background:#f69 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6UstRaCoLVuBFAdC-i_SwKk0Z5eIDwuGOy-xMwTC42JOKGFF8NF-XuEH2g8jy78HQ1nQ_6BAiCYaFworM9x_f5Yo36oVaFPEK0XHIw21C_fnjXrffwRsk5UUNuActdmShQXuV3Fa0ZfA/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/AVvXsEhTFe59GHSnmytp4PVs-528TAm9EflD8M2QAn4Dny4EchTuXlr-vust2R7JDdeFrVj703oQO3-ebMG-rEtgxUoCC8625iLvN5M0h-Fm06CssKIbRU1q7pmVQFI_tOlRPrJ3eD17atSFfirb/s1600/andikwin+tutorial.png);  
      
      
      
    color:#fff;  
      
      
      
    text-decoration:none

}

Simpan dan kemudian Anda pergi ke TATA LETAK
Jika sudah Anda tinggal meletakkan kode berikut yang sebelumnya Anda tambah widget dengan HTML/Java Script. Masukkan kode dibawah ini pada elemen tersebut.

<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=''>Arena BOLA</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>

Setelah itu simpan