Membuat Menu Horizontal

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

Kode

Menu Horizontal 2

CSS

Kode

Menu Horizontal 3

CSS

Kode

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/AVvXsEg2ne3709KrTzvPJQVwenZtMlU0ENVsQGJqV7H4glOQP61Cb-39XXI85gx7YYnlP9aiTzOBcKZYjolXgH9rDw7WH_epXtyhF-GnIoIgqfRLO5i7i_imPrPjeoIcJHmyobyHc95JFxjdCy4/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/AVvXsEgEF27yuTkKPB7hNRnjA8oZ39aovY_oYWutfT687c6LZP_f7n6OV6lC2Zujrvjao5QCFcHDTRgltUHQUeQB1CHoCCPGt3-G5lt9Ko1DQgj0KOfPJSGhYpfwEzNvd3S2T_uLd14pXtp-gDE/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

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/AVvXsEg7Z68yHebbaW1d_BAVZNmggbfpT6uyIWHHnspSUOZOdL1doKlGC7oJQFtWvI4ISc18tJ2rI_B4NZc7Ie3k0ZFEjU8uu-HeaMXPjcFDDHOLpM_m1QLnRq-rAlXT4UQy2BXUNq-BUwrLsao/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/AVvXsEgE3SQRmfGfdjJ3kg_EGoUo9U6Pe27zlxbJ177j2gzfqUMQl8G4YssNg7UUiIL0jVWMlcQRePwhp4olkYFUT9uKFSgyjIg-mORXwhyphenhyphenqrao11iX4UBWQDSTMgGRXGadVaQmn1sT2-ObqLXg/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

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/AVvXsEjeEQBmQowHGrehFC7ZuQJS26hYr_lJYkPW1Ut28uTzlQTkC985X9dv_3wA0YsekldbMPd07-JrP2O0BD609nO3IR7tX4TLlIKhTX9gWBkmgqvjtT6W70-7EvrHyEauLQLfOjStSavQhDY/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/AVvXsEhEue7fjvESH7WDV75_yhg9Vdgq-QOq2-OvtxulXYWVjP4Fi-yjtX9ka2US8kOWEGx6aoSlhwz7uto8hbW-2XrFuB-0ev3RAdQOaTc92oKRHhGuyVnqrmLAFqxosVk2KmdLImbz4MxD-hE/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

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/AVvXsEhOqBrVmwqxpfoZpnzYnoUm8Kzel4plvqXy_DKzZFmCrtO1H3v41L0b396v9RaACZdHP4ydsj-G6lYoAX79Pn7-LRJUuBsdZQInJQ-y8I97dOdh-pMogyaww_rALhwa0Jm5pLbhZQ7RKCE/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/AVvXsEhG_WddG25ufLluCf4UcMk2iKtY6l6BBOgVoLvBSRjiuOkAZTosKUCdJoH1CUdATov-RiHQVQqJ2hmaetQuV42L64PSoi2-LYpWJniIulzZJ1gb_6PMM9lZn0gq35vF0nvP-jeYrARuHss/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

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/AVvXsEjsiAw6n8f6ngZZUZ1wVt9Yan324ylzYIYn9EPs9swMGVX473XwDZ58NyEJL3YShAj_1uSeq_kZc-RJ6wGK3ucL8mo5Ds_vzIZSyYJCwPLrXwSrUVZHEzEdbOMPOvj8L_ucyRNmBtfaHrw/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/AVvXsEgInRupHrjT5ZQQA_KCrQxEqhyxmJccLuUtR3R0h_7GzxcM4npQy_d2VwcapD7RMmShjxMDS9zP9ponYRFkH8vN8JmOxnjLERhlYr0ANv466-fib3RVcwnv0jqmXIT7DZ8MO4vUOYKeKNw/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

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/AVvXsEisxMv_N3Q6lmbkqmffsESqpFUD9xGpmjPFt_GcswujFr5wntZt3kM_Hnx1eWpqOE4uDx2SDFPF5obBjjnfNnieOkFgSjcAPQZx2GxJAf1Hu8N-bwVZGX_zWLqpce9GFtSsmV2WJ7YlmHA/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/AVvXsEhYZ1E02nkSDcHkaK-tiYLxhHWgjrq4qigyMuL7Ojff9kzyxj1T7zLLEdxy6KGuXihdpm2e_4pmlgia7n9zhjVsdTB4IhpNmDfP-dqoyG65a-j04GfzUEZ6UK5pzr-eoRj_0cd8KVj7rts/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

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/AVvXsEiAmSwmsB9B1Fz-_QOdW_rs07U52vwGoffAP6DTghphFfkMqgaTNyygKq2I_KsfWuLMYk8Y9pqHv86QhActSylS4zox7m1byYYAlvmTPfXK2H6JdcIJXGMJLc72TnnMl_b5sP71upoZz7U/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/AVvXsEigfTIdmDW4Dmy8_LzcCIdGQQEbfhbDQ9iuuMO996EQzfsn07tPu4Jr2MlveLKcHyooBf16RWowEd8dwYpVhCiBF52XTAqdZJmTx08jnhg9Rwk0jbOQIZSknww-CQuQj1OXypG7w_ymbKw/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

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://harbudimanggalaputra.blogspot.com" ><span>Harbudi Manggala Putra</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.

Honda Mega Pro FI

Follow Us