10 Menu Horizontal Keren untuk Blogger

10 Menu Horizontal Keren. Membuat menu horizontal untuk link pilihan pada blog anda, misalnya link menuju Home atau kategory kategory tertentu. Bagaimana caranya? nah seperti yang saya posting sebelumya, yaitu cara membuat menu horizontal di atas header. Membuat menu horizontal ini sama dengan cara sebelumnya. Berikut ini cara memasang menu horizontal keren ini.

Demo

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/AVvXsEh12Ojb4mGFFPtPHPBcsbkI7BCbooKpuLFIl0Yk1-p9sr6s3e-arvrLCEgIMcB6q_VJGqXzNw4I8972PlgOHUed7roL3Rm_Ru0kjDYpwOpVNObFBgq5EHAzrPeWqAd0fr6Yw1pfOmhm8cI/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/AVvXsEjIRZdFgTKWstJUG-dmeYwqKTalqOlNF32g17RMd2PRXtrRM-7CP9TvGzB3whMxH0idhGQRfQNUOsqF1RsJUoqqlVn9ecQc1cMOrsp0yuPFc9e2NNi5IY_MQ47V6Kkhwt5ooOC4z83EXkg/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/AVvXsEiRYDcNB5BZE2pBa0iOYEZs-Dubuvu_f_dQJFIAXHm9mxlfGX_YDck8pW-3bFAaI6RJIa4bu5HxLh_x8EY-X_m2JXIjot0Y3HC_ynNJtxDUdzpEfvTs5pIfk_1C8KmGhoJroFQv5PqqzHI/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/AVvXsEgu2iYcLwJ8sgBURT-xTiFx8jpGY6iNwPIp-hm0iXdw_Lu7iIiZ4B3w2psANjVEMjo6b_o4uSqb1r2NrCdbHy1XfW6rlLiToB7KdnbvynP9kJ6SMh8c59P3t660d21yctpt06tN3Y0FQ44/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/AVvXsEil8aTNIzHSuA06qm6homo910UkorICy1H_VaJVBS7kpfFIyLRdtpdao0ewOQ0dCeKdvN6e9ZmQK6I5ayGOTzGPtrRXH3sHi4RP8x_avII95vwOlqWDYOqBirGXPsZeTfKPN73DT__Y4PI/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/AVvXsEgWaw7d7Bg0i3_albnbrLnZXXz0e18r3hphTg2Ege0w8uoGWfORdc4vgh1drKyuNvIeO9hMtp0aOI9UAfDutXjbfknecNjO-LPxBoNFt-r9ZS4ugDHI5r77llNTPgrMYDo8dGX8rKhuDrQ/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/AVvXsEg8EezD4zVgkWF7LfLW3hfuGQ-yQq4itejh8gsaXd0YXEhS_S9vwtCuFzWu_7rcwtyLGJGolCDancwbqTaO40sNeWAU_SK022CrF0QAV0Z8Lo2HtV5VOhkOtSW3RoK_5MKnk2rfzxLZ-5E/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/AVvXsEhxMCE-llMHFcmErn4cRIDg1sCgo4WNj5X33hfxsoAzAeI2I3H1m86Aiic-gclDXsxarZ_91auRn1MDplGfZy-Uo8U__A4sLC7wij5A-O4E2jxViJwSAnrsnLLAy9hCqH0JN8KQcrSn0pM/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/AVvXsEiBKgaLb7541EM57tUNHRdMysNPpPVtj07otng08Jx5QCMbZh9TJrN_Zk8QWMTsrKhS3xVM7w-SXaBDqmTIbTBG5GrG4wtttGjPoBEKJ6HeyVKd54v_1arOV3a6qi_-WWMKv2Mw2QuNTRU/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/AVvXsEil0Lh4BjOjBHot6HAMYvINo7r5ZTCNsycy3zevscAOio4kPQNmOWMbRO9oKcycT6SW4EuIT3ipbuyzWanfp1qW8o3JUvIfIP7yO3UF2SPIOSxw1U0geEQQUO-b_Tul0Dqk660YAhk8Epw/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/AVvXsEigz5qT9_ePpsEpsfRkxUn-sf0THqM6eUuUg3drC_9MTgBe8hPzBPmQqV4HgpFXBoxodttmvXjaWIyS5GYH5qIwRlV5czXluSi7WtLIqptlFtNLuMnQG3fHPTpUyZ6ITxt-4tzISW8Vtng/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/AVvXsEiFXzDIMnnuqXctCO3zkSyeZM-ferTgAbLmElGb4M-4P-aYzIQTdkg3oIbA3axosD7NW2WR_jdATtvxRreLgkoIb6VgF6hkhDgQEL6pYMAdkg2qDnHh9IFN8wLilMjpt3sVdbzCwmjiSeE/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/AVvXsEjhO70fbQ5esWS7SdzU0Q70FolUGe4lceV2eaAYtub74y7AcWEy9XP1V0DKRZ4F1tyAAMQNxnF0LOrPaYBg39gTI4nH67JE_3NNCa_M7gzT308FXaS3-Lzd88rMIPtQRk0gtpZj02-vYQQ/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/AVvXsEilhOjQ52o4tkRL4so__bviOcLNyDhKTS4IQ1HwgDphMa13x84I21ihyphenhyphen9J8c0ii9KBIQrPkrfRxAnjCMGSI-nEcmeBnE61ukpAahVbC7ImUUOcVtgGp_3WKCg7GCQqtdRIPENOXkRcRv60/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="http://bamz.us/" ><span>BLog Bamz</span></a></li>

10 Menu horizontal keren di atas terinspirasi dari mbt. Buat yang sudah sukses membuat menu tersebut jangan lupar komentar yah, kalau bingung tanyakan saja pada komentar. Mudah mudahan artikel ini bermanfaat untuk anda semua.

Ditulis Oleh : Unknown ~ Tips dan Trik Blogspot

Sobat sedang membaca artikel tentang 10 Menu Horizontal Keren untuk Blogger. Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya <a href="http://bungkaryo.blogspot.com/2012/03/10-menu-horizontal-keren-untuk-blogger.html" target="_blank">10 Menu Horizontal Keren untuk Blogger</a>

:: Get this widget ! ::

- Reviewer: Unknown - ItemReviewed: 10 Menu Horizontal Keren untuk Blogger