Cara Membuat Menu Horizontal

• Login ke blog anda > Design > Edit HTML ( tidak perlu centang Expand Widget templates )
• Cari Kode ]]></b:skin>  ( Gunakan CTRL + F untuk mempermudah pencarian )
• Copy Css dari menu yang anda pilih di bawah ini dan paste tepat diatas kode ]]></b:skin>
• Langkah selanjutnya cari kode <div id='header'> atau <div id='header-wrapper'>
• Jika sudah ditemukan, Copy kode menu yang anda pilih dan paste tepat di atas kode <div id='header'> atau <div id='header-wrapper'>

Menu Horizontal 1

Css
#horizontal1 { /* none needed */ } ul#navlist1 { margin: 0; padding: 0; list-style-type: none; white-space: nowrap; } ul#navlist1 li { list-style:none;float: left; font-family: verdana, arial, sans-serif; font-size: 9px; font-weight: bold; margin: 0; padding: 5px 0 4px 0; background-color: #666; border-top: 1px solid #e0ede9; border-bottom: 1px solid #e0ede9; } #navlist1 a, #navlist1 a:link { margin: 0; padding: 5px 9px 4px 9px; color: #fff; border-right: 1px solid #d1e3db; text-decoration: none; } ul#navlist1 lh#active { color: #95bbae; background-color: #d1e3db; } #navlist1 a:hover { color: #fff; background-color: #FE9C54; }
Kode
<div id='horizontal1'> <ul id='navlist1'> <li><a href='#'><span>Link 1</span></a></li> <li><a href='#'><span>Link 2</span></a></li> <li><a href='#'><span>Link 3</span></a></li> <li><a href='#'><span>Link 4</span></a></li> <li><a href='#'><span>Link 5</span></a></li> <li><a href='#'><span>Link 6</span></a></li> <li><a href='#'><span>Link 7</span></a></li> </ul> </div>

Menu Horizontal 2

CSS
#horizontal2 { float:left; width:100%; background:#fff; font: bold 6.5pt Verdana; line-height:normal; border-bottom:1px solid #6659A7; border-top:1px solid #6659A7; } ul#navlist2 { margin: 0; padding: 0; list-style-type: none; white-space: nowrap; } ul#navlist2 li { float: left; font-family: verdana, arial, sans-serif; font-size: 9px; font-weight: bold; margin: 0; padding: 5px 0 4px 0; background-color: #6659A7; border-top: 1px solid #e0ede9; border-bottom: 1px solid #e0ede9; } #navlist2 a, #navlist2 a:link { margin: 0; padding: 5px 9px 4px 9px; color: #fff; border-right: 1px solid #d1e3db; text-decoration: none; } ul#navlist2 li#active { color: #95bbae; background-color: #d1e3db; } #navlist2 a:hover { color: #666; background-color: #fff; }
Kode
<div id='horizontal2'><ul id='navlist2'><li><a href='#'><span>Link 1</span></a></li> <li><a href='#'><span>Link 2</span></a></li> <li><a href='#'><span>Link 3</span></a></li> <li><a href='#'><span>Link 4</span></a></li> <li><a href='#'><span>Link 5</span></a></li> <li><a href='#'><span>Link 6</span></a></li> <li><a href='#'><span>Link 7</span></a></li> </ul></div>

Menu Horizontal 3

CSS
#horizontal3 {height: 20px; } #horizontal3 ul { border: 0; margin: 0; padding: 0; list-style: none; text-align: center; } #horizontal3 ul li { display: block; float: left; text-align: center; padding: 0; margin: 0; } #horizontal3 ul li a { background: #fff; width: 78px; height: 18px; border-top: 1px solid #ddd; border-left: 1px solid #ddd; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; padding: 0; margin: 0 0 5px 0; color: #666; text-decoration: none; display: block; text-align: center; font: normal 10px/18px verdana; } #horizontal3 ul li a:hover { color: #6659A7; background: #eeeeee; } #navcontainer a:active { background: #c60; color: #fff; } #horizontal3 li#active a { background: #c60; border: 1px solid #c60; color: #fff; }
Kode
<div id='horizontal3'><ul id='horizontal3'><li><a href='#'><span>Link 1</span></a></li> <li><a href='#'><span>Link 2</span></a></li> <li><a href='#'><span>Link 3</span></a></li> <li><a href='#'><span>Link 4</span></a></li> <li><a href='#'><span>Link 5</span></a></li> <li><a href='#'><span>Link 6</span></a></li> <li><a href='#'><span>Link 7</span></a></li> </ul></div>

Menu Horizontal 4

CSS
#tabs { float:left; width:100%; background:#BBD9EE; font: bold 7.5pt Verdana; line-height:normal; } #tabs ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs li { display:inline; margin:0; padding:0; } #tabs a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-tEtZdckNzdHWjUxOYeI7H33WkV_ei-UKbFTSujkWfWGyNBeu14myCl5jmlVrMpQiAC9FXhoFeWXBQcaEjhV0Cy5CJKqAx93X__2zr6B66GYXKcV9j0xgpcFtHMCOj4q5z4WKDfWJoz8/s1600/tableft.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwC4NkkhuYYcorC130gzjCor1zzGmZFbD1NuO-QfUqgTQMrIA4AFzlNtWvhVIoYKABHSW44Cu1rIpyC_s0dyGwp4nf5RX4NoJN7JJp5T64IGHZl1jaPsp2RuSzA4o9E10SmIs2uhW9o-s/s1600/tabright.png) no-repeat right top; padding:5px 15px 4px 6px; color:#666; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs a span {float:none;} /* End IE5-Mac hack */ #tabs a:hover span { color:#FF9834; } #tabs a:hover { background-position:0% -42px; } #tabs a:hover span { background-position:100% -42px; }
Kode
<div id='tabs'><ul><li><a href='#'><span>Link 1</span></a></li> <li><a href='#'><span>Link 2</span></a></li> <li><a href='#'><span>Link 3</span></a></li> <li><a href='#'><span>Link 4</span></a></li> <li><a href='#'><span>Link 5</span></a></li> <li><a href='#'><span>Link 6</span>$26lt;/a></li> <li><a href='#'><span>Link 7</span></a></li> </ul></div>

Menu Horizontal 5

CSS
#tabsI { float:left; width:100%;font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #DD740B; } #tabsI ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsI li { margin:0; padding:0; } #tabsI a { float:left;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbmTov35xHZxoszyF8_Vw1DxlIr6dbHYTlbTIcsRp3cxXUh6hLFAXbc9nTvhR86U0XY5V_uca5ZGnPm_CK_5_mb54jQEoLYUnVDt2pmQTAQNT-pSxYK7yULwXEhnwmnhOTro4LFi3FecQ/s1600/tableftI.png) no-repeat left top; margin:0; padding:0 0 0 5px; text-decoration:none; } #tabsI a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrm9GsnR_vELZt7gDXYOU25rA9Wd_CMlcFB1dlwTJYfeSse4cz2cly1YDBdsan74V0QO73zpzjS9Xp7warNsAq27FHNzhJjM4kS8jDGS-g2gDkEJyjz8VdXzG5MInXQYdL6mfPYch1QoI/s1600/tabrightI.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsI a span {float:none;} /* End IE5-Mac hack */ #tabsI a:hover span { color:#FFF; } #tabsI a:hover { background-position:0% -42px; } #tabsI a:hover span { background-position:100% -42px; }
Kode
<div id='tabsI'><ul><li><a href='#'><span>Link 1</span></a></li> <li><a href='#'><span>Link 2</span></a></li> <li><a href='#'><span>Link 3</span></a></li$26gt; <li><a href='#'><span>Link 4</span></a></li> <li><a href='#'><span>Link 5</span></a></li> <li><a href='#'><span>Link 6</span></a></li> <li><a href='#'><span>Link 7</span></a></li> </ul></div>

Menu Horizontal 6

CSS
#tabsF { float:left; width:100%; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #666; } #tabsF ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsF li { display:inline; margin:0; padding:0; } #tabsF a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVsPH7XUf2z0tOIw8FhMAbK8bnybsrYHPy2uV7LE9xsZ7MnLgFoNCK-ag9S2TIKK5whwRy4iz5A7zWtVk2TW0aeniVxcRKybpziQtn-raJrohuaIaeMT-1U1b-LzqgMiNYl1If8v2Y_E8/s1600/tableftF.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsF a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDG9wQ4Hpyg1FBX4IknT0WTxMYnbL6rah9GnZctCR6sdoBefYajetF5wwGFYNgO50U6ZnaLAFtO0FvcL88QRTUH0vvHQL-sZd916Qp2lYX6CSFMrjrZ1fNRNspLAynKleGkn16ULnYRyM/s1600/tabrightF.png) no-repeat right top; padding:5px 15px 4px 6px; color:#666; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsF a span {float:none;} /* End IE5-Mac hack */ #tabsF a:hover span { color:#FFF; } #tabsF a:hover { background-position:0% -42px; } #tabsF a:hover span { background-position:100% -42px; }
Kode
<div id='tabsF'><ul><li><a href='#'><span>Link 1</span></a>+</li> <li><a href='#'><span>Link 2</span></a></li> <li><a href='#'><span>Link 3</span></a></li> <li><a href='#'><span>Link 4</span></a></li> <li><a href='#'><span>Link 5</span></a></li> <li><a href='#'><span>Link 6</span></a></li> <li><a href='#'><span>Link 7</span></a></li> </ul></div>

Menu Horizontal 7

CSS
#tabsE { float:left; width:100%; background:#000; font: bold 7.5pt Verdana; line-height:normal; } #tabsE ul { margin:0; list-style:none; } #tabsE li { display:inline; margin:0; padding:0; } #tabsE a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia2UYx1qT8g14td12q1xRa0mVgo-p5Rf-gwIIIth4PaFaEigo33V8IbjHsiQRYQshCMMXm045-7ObLlbR1DJrgB_riyj5_gwtFnzEp6kLRkV7gZAVjallmqyq-v4rR_K8eyEZZvnGDASs/s1600/tableftE.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsE a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIULiqCweLpH2ZOcnxRUIJT4nioTXoyVqbO6W7lEQmsL6boanJqjeo9QwfOrNjlLQGOQYRTY9Z40-cadsjdz1JmF-dZSyxA2nVyar-Gdo6mbUSxvgx5iiUMgEjY8B7l3XLohu0_XV2UJg/s1600/tabrightE.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsE a span {float:none;} /* End IE5-Mac hack */ #tabsE a:hover span { color:#FFF; } #tabsE a:hover { background-position:0% -42px; } #tabsE a:hover span { background-position:100% -42px; }
Kode
<div id='tabsE'><ul><li><a href='#'><span>Link 1</span></a></li> <li><a href='#'><span>Link 2</span></a></li> <li><a href='#'><span>Link 3</span></a></li> <li><a href='#'><span>Link 4</span></a></li> <li><a href='#'><span>Link 5</span></a></li> <li><a href='#'><span>Link 6</span></a></li> <li><a href='#'><span>Link 7</span></a></li> </ul></div>

Menu Horizontal 8

CSS
#tabs12 img { border: none; } #tabs12 { float:left; width:100%; background:#F9F7F3; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #C2BDAE; } #tabs12 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs12 li { display:inline; margin:0; padding:0; } #tabs12 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhedFnKoW6gaHHQlPMan7_1AGsePrLjzMzkMUTFULgFcSNRwPyHiNY47ecvWBxA5BQ_ZXG7SuJjG6lfdPvKSLqAoIkEOO2_OFm-baLDKM521-Wsn2-wMpT47Nb0zAd-MJDlM7RdnPRu3Po/s1600/tableft12.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs12 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTmocsIca2ei-NL6UucidbbhRGK6PafkzalAKpr5Atqwa2dU9cwoJlz8cEG7Bxi6wsZ-Nky4CWbLnxZXbHkL8KqPlGn_OSOwaFJsiUdzXhMpuEaYmRdN9ZZk5uENSeeinqNQsMbDPLL1k/s1600/tabright12.png) no-repeat right top; padding:5px 15px 4px 6px; color:#E4D6CD; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs12 a span {float:none;} /* End IE5-Mac hack */ #tabs12 a:hover span { color:#FFF; } #tabs12 a:hover { background-position:0% -42px; } #tabs12 a:hover span { background-position:100% -42px; } #tabs12 #current a { background-position:0% -42px; } #tabs12 #current a span { background-position:100% -42px; }
Kode
<div id='tabs12'><ul><li><a href='#'><span>Link 1</span></a></li> <li><a href='#'><span>Link 2</span></a></li> <li><a href='#'><span>Link 3</span></a></li> <li><a href='#'><span>Link 4</span></a></li> <li><a href='#'><span>Link 5</span></a></li> <li><a href='#'><span>Link 6</span></a></li> <li><a href='#'><span>Link 7</span></a></li> </ul></div>

Menu Horizontal 9

CSS
#tabs6 img { border: none; } #tabs6 { float:left; width:100%; background:#efefef; font: bold 7.5pt Verdana; line-height$3Anormal; border-bottom:1px solid #666; } #tabs6 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs6 li { display:inline; margin:0; padding:0; } #tabs6 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6s3WndvguENFtu8p_5u3UaN20eUOwIOlO2X4IM03-akTB5PXWr-KZ-YOFo8H7ZE6wpBuivbwm9d6557NFCAKUllpAD7a_unmzT6eZYuxWZTrVmUcP3ilAujuao2qXO7JdqJBPJwJB8dE/s1600/tableft6.gif) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs6 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVPF-hmn-JkEchbyeMX0ZMWOe58xo4E77muhpJTc_ZBHmBrSfe43UYi2vjZ4YGbQE_i_fpXoGS5z4lBAreq7v_KxcEvm4FKo1Vo499Q6BmYIq__O5dSTi5NLvs1Ur-oGlYEwtLUDh1lvk/s1600/tabright6.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Lac \*/ #tabs6 a span {float:none;} /* End IE5-Mac hack */ #tabs6 a:hover span { color:#FFF; } #tabs6 a:hover { background-position:0% -42px; } #tabs6 a:hover span { background-position:100% -42px; } #tabs6 #current a { background-position:0% -42px; } #tabs6 #current a span { background-position:100% -42px; }
Kode
<div id='tabs6'><ul><li><a href='#'><span>Link 1</span></a></li> <li><a href='#'><span>Link 2</span></a></li> <li><a href='#'><span>Link 3</span></a></li> <li><a href='#'><span>Link 4</span></a></li> <li><a href='#'><span>Link 5</span></a></li> <li><a href='#'><span>Link 6</span></a></li> <li><a href='#'><span>Link 7</span></a></li> </ul></div>

Menu Horizontal 10

CSS
#tabsH { float:left; width:100%; background:#000; font: bold 7.5pt Verdana; line-height:normal; } #tabsH ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsH li { display:inline; margin:0; padding:0; } #tabsH a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHoSGpuNPRXlA30lFupDaw3bCihyphenhyphenrzWrOjkjJKFgmwLOzDBH3gHXafXW15B9BUZkRvV0izvBBQJmwVMqI1PyhX5ISytW6q2lYqgNMtMzLnunB6Z16LRKRIFN4RMG1CS8kaQ7fEpXOWqZo/s1600/tableftH.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsH a span { float:left;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdTvm09-ukbgVyK0h9g6fqwST7a9KdqWyZvY-CL3X-0ZVjcpCOFHHTvZZ5sd_ObMTL4cP_YT8wJgtfHLZjjxMYCTkM9_2vj1gaIIOaSQhHCXRd8P6KJaFyNva_FVPMcHZubPyb4ehZkKI/s1600/tabrightH.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsH a span {float:none;} /* End IE5-Mac hack */ #tabsH a:hover span { color:#FFF; } #tabsH a:hover { background-position:0% -42px; } #tabsH a:hover span { background-position:100% -42px; }
Kode
<div id='tabsH'><ul><li><a href='#'><span>Link 1</span></a></li> <li><a href='#'><span>Link 2</span></a></li> <li><a href='#'><span>Link 3</span></a></li> <li><a href='#'><span>Link 4</span></a></li> <li><a href='#'><span>Link 5</span></a></li> <li><a href='#'><span>Link 6</span></a></li> <li><a href='#'><span>Link 7</span></a></li> </ul></div>

Catatan:

<li><a href="#" ><span>Link 1</span></a></li>
<li><a href="#" ><span>Link 2</span></a></li>
<li><a href="#" ><span>Link 3</span></a></li>
<li><a href="#" ><span>Link 4</span></a></li>
<li><a href="#" ><span>Link 4</span></a></li>
<li><a href="#" ><span>Link 6</span></a></li>
<li><a href="#" ><span>Link 7</span></a></li>

Tanda pagar (#) silahkan ganti sesuai link yang anda inginkan, dan untuk yang saya warnai biru adalah text menu dari link yang anda buat. contoh : <li><a href="www.hadi040896permana.blogspot.com/search/label/komputer" ><span>Komputer</span></a></li>

http://www.bamz.us/

Related Post: