Not Found: 10 Menu Horizontal Untuk Keren Blogger

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> tadi
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

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

Menu Horizontal 3

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/AVvXsEhBqu6_y1RSQkNpvZEZVyKKtpS9TYE0jQzvIeAcFjfnhdGwlKf6UkJr1jns5pos2Uj3GLg9qV4DD9qsPlrbIpzilRmVKlNlILXlwT118P5XNKNkfEij3mr-ZDJo8h-eywkcszhx_tDlNY8/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/AVvXsEhztn9sZIp4PAOXat_NwPU0B8jTUTEKngQfS7u-t0QZ9WZrhwhUN4VAnFlPP_G5YO0yHE6s1HddRoL4_pVB6p3H9L9QNk7RiHsYQirJSO80c0TTaoUrAkW405sKnB1oFUVn-sFJ31abD50/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 4

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

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/AVvXsEiSst04mwMeJFL55i92Fp0ArCCsQWYorZe1Q-JZOOokxLJ0nQ2q6Aze3VbsYTVSdBdEgyeYLyHWMDchMe-UMR6aH7hplVCZ2z856NraJl9_NiHO5NI3bAnIOP9UrC1HuxIKtvEdpas3_cc/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/AVvXsEh-LaZ_PuXxJyLTOKtIvSkhNi7TnQJrg6hEyUmFnurxre-bZ6yZuzsyG__NdAnD40kQJyBXeO5CaJ_UxDX5_pZANPsj3Ap8AmI_TDUxZJwYcSRXmgbErok6xigAcU6EUkJcQJ6JT7EVUJM/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/AVvXsEicWYqVr7UgQpsVovI_-lzb2vDO-eX8GkJuaRaGgRmwBRCaXvppSrhUEBw9GgEOTpd0bWPalPY_1aLZp_WdXW4BIvE7Ty3tmuNkWN8IAXfifJqmRiXXKq4hhJBncfAKbyPhVqeRC-niFIk/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/AVvXsEiMUHOhYaABmmcjYVAOHMfqxuKHKSm3SGlUV5RpxjkVQUsF_8FnwAZPd1IX44FrPwl9GdZNRK5h8OZrH039yTYDlEh7scWpehWI5qzNO7kjKM_hF4ommvEl9AnMRNRyZx3ckKGtBiJQUAs/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/AVvXsEiH8CjGp4CalOJ78YStgV21CWBi1ojhYInpLSu3lOiNngC_vMN8GejakUH5Jmv6nb3C3FuKiQlhQFyHEf6ydIUMXFFV3r1GiVdgWIvT0MmVcR_0_3hP-ZaE7usK7TWkXBk-SL3fS-v3C14/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/AVvXsEgEgPi7_EyQQacgAXjMK9UoVw3cDeU10MwhCFtbYaHno3eSt1AG4n_g_QVMK2fIiOkshARCOuGO3XfsSIskBJQjFsSHIVq-Ny9fKfFFOdFg-jfT4vpVU0G6piyRnS3j10LFrHh3t6jXFIg/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

#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/AVvXsEjmE2DKPd2RkuQFwaUVgXLNuOSBxpybyiRXodcSDIaCkS-RlL2lgy9VnAng6JVC7oKH_hmAgGe8HSeFSUAxyG9aVfoIPGOa8YpdIoY-WmiKUAxn6XgXJGnQ4MiIb-HOO_m8q4lf5md9l0w/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/AVvXsEi8o6p9uAfmGPdmhvUxwopra136CMNz_zUcK6ThpYY8OiefA8T2OvYUu_-k2FDkgRWDrKYJ6xfRSkWaDvY4Q0Zggr5jw3tyTmFnoTVsy_-4niOWyXuG_fSaK-0UQLNfH1GEdxoET1V8-gI/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 9

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/AVvXsEi3ZBCxdLWTZcsuNG6cNfVe_555YEK_K24LtJ4Ep7cXhEcb_gUiV5IZSblZbfYCcoZvcGuon_CCTRNq-CW4w-opRCn5KPLGyutESdawGBmMBucXYy3RsPW5YAXW1JebycsPkzGEy0a06Hs/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/AVvXsEhO3NztMCJsVFvhfdKx_pM-fsr7jCYL21fiE8stJCUhyphenhyphen5cZoOvKqdwRQkOD1aXRJgTvjcVY9f74ixtPLsygs8gK4b9zwce0YmgIWA_Z35oa0HzvTBojEZv6ApLiCDhjMoB5rUeGkWZ2mrs/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 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/AVvXsEi1eDOXEvC64KSFHh3EwgqIFKQanFdGTVsRBvqAIcYMyTEFYB2f2p0QG3Efm-xaOZtfQ7aSjKc5LO-y3OWSzJM4A_1NOEyoyRM4IDWpJmRO1dMuNbBiR2pfW3CFTG9bpfSDQxrKbx0pSDw/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/AVvXsEj4EVTPhMgEyNoIpj0jkH8P34n-AOwdi7uI3xVgEQx3KWPi0K8VuDEGwSFYEEklpQl1Lbg9_Urw-qYFd7HNNmkVZG20E5c1T4O7FY1HXroADfmp1MiKqVrf4lVnQW7_iZddHsJVCVOGLeA/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="#" >Link 1</a></li>
<li><a href="#" >Link 2</a></li>
<li><a href="#" >Link 3</a></li>
<li><a href="#" >Link 4</a></li>
<li><a href="#" >Link 5</a></li>
<li><a href="#" >Link 6</a></li>
<li><a href="#" >Link 7</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://rizkydorkgaskins.blogspot.com/" >Myblog</a></li>

Pages

Kamis, 08 Maret 2012

10 Menu Horizontal Untuk Keren Blogger

Tidak ada komentar:

Posting Komentar