9 Style Menu Horizontal

Disamping adalah contoh tentang penambahan menu horizontal, dan ada berbagai fariasi, pilih yang cocok untuk tema anda..

Gunanya menu horizontal ini agar pengunjung lebih mudah mencari artikel / categori tertentu..

yah, daripada ngomong kepanjangan..

ikuti cara dibawah untuk menerapkanya ke blog anda..

1) Sign in akaun blogger

2) Dashboard - Design - Page Element - Add A Gadget - Html / Javascript

3) Copy kode Menu Horizontal di bawah pada ruang Html / Javascript. 

cth:
a rel="nofollow" href="#"-span-Link 1-/span-
a rel="nofollow" href="#"-span-Link 2-/span-
a rel="nofollow" href="#"-span-Link 3-/span-
a rel="nofollow" href="#"-span-Link 4-/span-
a rel="nofollow" href="#"-span-Link 5-/span-
a rel="nofollow" href="#"-span-Link 6-/span-
a rel="nofollow" href="#"-span-Link 7-/span-

# - url untuk setiap menu ( http://notefhn.blogspot.com )
Link 1 - 7 - nama menu yang korang nak letak ( cth home, about me, contact dll)

Terdapat 9 style menu horizontal untuk anda pilih.
Just tinggal copy kode yang disediakan:

                           <style> #tabsI { float:left; width:100%; background:#EFF4FA; 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 { display:inline; margin:0; padding:0; } #tabsI a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj166wr7RFuLimiU-lBbQTmvceDIfsH_8W7cAuZNxy8JIGclCh-cJNCmNHTN69HUL5CDFrQ9erCRQTFQUR6XxcpX436mGhxqioq0vDs_Lb7MVmH1d59cAlpcOYOR2br-j2cvjvxJDc94WM/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/AVvXsEgDuZX1mdBP9vchzE20bsmEXmiX7lknmPSvbWy1hkxuBblrfoY_j7VDpAkP_3lf0p1ew014pjOZmvAwSxpjhe03X-HJpC9srCv6HrOT_eRdpn6WyRXVFltCZzxRg5WgEENRdQsVcIyTAQs/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; } </style> <div id="tabsI"> <ul> <li><a rel="nofollow" href="#"><span>Link 1</span></a></li> <li><a rel="nofollow" href="#"><span>Link 2</span></a></li> <li><a rel="nofollow" href="#"><span>Link 3</span></a></li> <li><a rel="nofollow" href="#"><span>Link 4</span></a></li> <li><a rel="nofollow" href="#"><span>Link 5</span></a></li> <li><a rel="nofollow" href="#"><span>Link 6</span></a></li> <li><a rel="nofollow" href="#"><span>Link 7</span></a></li> </ul> </div>



<style> #tabsF { float:left; width:100%; background:#efefef; 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/AVvXsEhGY2t9SXkJl9pkIL3c0BoJg_KSZZeag4EwR2lw-fIkVR8wqXcwvQISAxz4MKLiDGAzkFeL6CIdJBaXYR38dP5uFwTkNEEqjAGZkVroWQSvMHtAKccPg0wDUXn9syH0vx07xrXrAo12rvQ/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/AVvXsEjpoARvqdofOdWBsIazdfmqbu1L4CIGZKgiiGuQdk6dCxoAsFqnKkVx8v-SpORkZpdUMJ8Z7pkaChaXXmr_bHwEyknWRwgdv96CH0E-aYxqSu-DN1xAjpYogL6yi-GHoqII4JYafnSK9E0/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; } </style> <div id="tabsF"> <ul> <li><a rel="nofollow" href="#"><span>Link 1</span></a></li> <li><a rel="nofollow" href="#"><span>Link 2</span></a></li> <li><a rel="nofollow" href="#"><span>Link 3</span></a></li> <li><a rel="nofollow" href="#"><span>Link 4</span></a></li> <li><a rel="nofollow" href="#"><span>Link 5</span></a></li> <li><a rel="nofollow" href="#"><span>Link 6</span></a></li> <li><a rel="nofollow" href="#"><span>Link 7</span></a></li> </ul> </div>

<style> #tabs6 img { border: none; } #tabs6 { float:left; width:100%; background:#efefef; font: bold 7.5pt Verdana; line-height:normal; 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/AVvXsEgQOQlf24pLYz0olE4or7aXem7Rxifziz__ipsDbnHrycDev_BlFYkjuBWO37H_1x4zM7TRpaT7uKUf3Tc6dPsCEbANhqr6KVpuSmli5nT_mcBS4-epVqWV_1-zT0gdVyj8eyGn29mms2k/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/AVvXsEjvIE2dssN5nnNn7n_s0vzSp63z7WLsg6vK667Lke_FW7h_2xMFpucQx8Q7LIx3gidUn4fZ-dsKM4fegYaW5beetwQDOac9JA4pT6SKZ4BGwCSIvgfVRo6BtN7uQbtKbGfhFIXWeBrbmsY/s1600/tabright6.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #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; } </style> <div id="tabs6"> <ul> <li><a rel="nofollow" href="#"><span>Link 1</span></a></li> <li><a rel="nofollow" href="#"><span>Link 2</span></a></li> <li><a rel="nofollow" href="#"><span>Link 3</span></a></li> <li><a rel="nofollow" href="#"><span>Link 4</span></a></li> <li><a rel="nofollow" href="#"><span>Link 5</span></a></li> <li><a rel="nofollow" href="#"><span>Link 6</span></a></li> <li><a rel="nofollow" href="#"><span>Link 7</span></a></li> </ul> </div>

<style> #navcontainer { background: #f0e7d7; margin: 0 auto; padding: .4em 0 .2em 0; font-family: georgia, serif; text-transform: uppercase; font-size: 14px; } /* to stretch the container div to contain floated list */ #navcontainer:after { content: "."; display: block; line-height: 1px; font-size: 1px; clear: both; } ul#navlist { list-style: none; padding: 0; margin: 0 auto; width: 80%; font-size: 0.8em; } ul#navlist li { display: block; float: left; margin: 0; padding-bottom: 2px; } ul#navlist li a { display: block; width: 100%; padding: 0.5em; border-width: 1px; border-color: #ffe #aaab9c #ccc #fff; border-style: solid; color: #777; text-decoration: none; background: #f7f2ea; } #navcontainer>ul#navlist li a { width: auto; } ul#navlist li#active a { background: #f0e7d7; color: #800000; } ul#navlist li a:hover, ul#navlist li#active a:hover { color: #800000; background: transparent; border-color: #aaab9c #fff #fff #ccc; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a rel="nofollow" href="#"><span>Link 1</span></a></li> <li><a rel="nofollow" href="#"><span>Link 2</span></a></li> <li><a rel="nofollow" href="#"><span>Link 3</span></a></li> <li><a rel="nofollow" href="#"><span>Link 4</span></a></li> <li><a rel="nofollow" href="#"><span>Link 5</span></a></li> <li><a rel="nofollow" href="#"><span>Link 6</span></a></li> <li><a rel="nofollow" href="#"><span>Link 7</span></a></li> </ul> </div> <style> #tabsJ { float:left; width:100%; background:#F4F4F4; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #24618E; } #tabsJ ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsJ li { display:inline; margin:0; padding:0; } #tabsJ a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKGKRY908ls3cMi5FqMS9u1lY2o0_nI_RZILygI1p6M8FZ59DETX1NyKIddogaWKJVmCrhd4K3Mwb8lbjAIqh7TEVuYjtUd4qwmx4O4ZflCzbWYVRaYnF4iA7xtPI1qCK5yDer0h57jGM/s1600/tableftJ.png) no-repeat left top; margin:0; padding:0 0 0 5px; text-decoration:none; } #tabsJ a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQV1O9h6Nu4e5efSHqkKu0FSokgZ1Iz0hQtTyOuIIe8J-D-0SvkGOA3AopbuOhoGxIYISySYUpIIgsbb2fZiLd9p2vrrQhg0gufFkjYuVBRLIpCh6aQLYR4tylG0rz8MSwwb0Egw5kuDc/s1600/tabrightJ.png) no-repeat right top; padding:5px 15px 4px 6px; color:#24618E; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsJ a span {float:none;} /* End IE5-Mac hack */ #tabsJ a:hover span { color:#FFF; } #tabsJ a:hover { background-position:0% -42px; } #tabsJ a:hover span { background-position:100% -42px; } </style> <div id="tabsJ"> <ul> <li><a rel="nofollow" href="#"><span>Link 1</span></a></li> <li><a rel="nofollow" href="#"><span>Link 2</span></a></li> <li><a rel="nofollow" href="#"><span>Link 3</span></a></li> <li><a rel="nofollow" href="#"><span>Link 4</span></a></li> <li><a rel="nofollow" href="#"><span>Link 5</span></a></li> <li><a rel="nofollow" href="#"><span>Link 6</span></a></li> <li><a rel="nofollow" href="#"><span>Link 7</span></a></li> </ul> </div>

<style> #tabs4 img { border: none; } #tabs4 { float:left; width:100%; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #6B78A9; } #tabs4 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs4 li { display:inline; margin:0; padding:0; } #tabs4 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBzaLjZQnA49_MMD1I6URd7tKS2euSgUJnGK_izPPZ-47EabtWez7LIZmFf2yJTYQPuuPOqtIFIYeoezzzoAXgvnyjoZ54ysCmliONelfZoJXwMksADfZ7vtlnUU1QDKtty8eSGQr7iwk/s1600/tableft4.gif) no-repeat left top; margin:0; padding:0 0 0 7px; text-decoration:none; } #tabs4 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvjJkY3g8l93Z6TeOEgUJ_BM-BCPG7eTV8UT6ioRaamvhyxX0XVoqDZp9Wy8QvrDh_xPj-uH61kWWwdHKl0ghOal2whiT73axbNUEAj9Xhb6Rc8kvf9EcrgYz4euCg9lJonKVLMYKuFp4/s1600/tabright4.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#6B78A9; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs4 a span {float:none;} /* End IE5-Mac hack */ #tabs4 a:hover span { color:#6B78A9; } #tabs4 a:hover { background-position:0% -42px; } #tabs4 a:hover span { background-position:100% -42px; } #tabs4 #current a { background-position:0% -42px; } #tabs4 #current a span { background-position:100% -42px; } </style> <div id="tabs4"> <ul> <li><a rel="nofollow" href="#"><span>Link 1</span></a></li> <li><a rel="nofollow" href="#"><span>Link 2</span></a></li> <li><a rel="nofollow" href="#"><span>Link 3</span></a></li> <li><a rel="nofollow" href="#"><span>Link 4</span></a></li> <li><a rel="nofollow" href="#"><span>Link 5</span></a></li> <li><a rel="nofollow" href="#"><span>Link 6</span></a></li> <li><a rel="nofollow" href="#"><span>Link 7</span></a></li> </ul> </div>

<style> .container { width: 500px; padding: 0 0 5px 0; margin: 3px 0 10px 0; background: #fff; } #nav { margin: 0; padding: 0; border-top: 3px solid #5F6A71; } #nav li { margin: 0; padding: 0; display: inline; list-style-type: none; } #nav a:link, #nav a:visited { float: left; font: bold 7.5pt verdana; line-height: 14px; padding: 9px; text-decoration: none; color: #708491; } #nav a:link.active, #nav a:visited.active, #nav a:hover { color: #666; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNP6ToDMrDQr3faxG78AlvYgjnmTu7lg0ol73FdRA-rj5CY7TYOa4X4lqoQiiBqoiHsu5TPVo_HR1Fz4Z-025ADtqmnRqgsMVgVLYhbPS7Hm39VvEUmsm_rlRrEtxK-KF_0y4O86poXh4/s1600/Inverted.png) no-repeat top center; border-top: 4px solid #5F6A71; } </style> <div class="container"> <ul id="nav"> <li><a rel="nofollow" href="#"><span>Link 1</span></a></li> <li><a rel="nofollow" href="#"><span>Link 2</span></a></li> <li><a rel="nofollow" href="#"><span>Link 3</span></a></li> <li><a rel="nofollow" href="#"><span>Link 4</span></a></li> <li><a rel="nofollow" href="#"><span>Link 5</span></a></li> <li><a rel="nofollow" href="#"><span>Link 6</span></a></li> <li><a rel="nofollow" href="#"><span>Link 7</span></a></li> </ul> </div>

<style> #tabsE { float:left; width:100%; background:#000; font: bold 7.5pt Verdana; line-height:normal; } #tabsE ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsE li { display:inline; margin:0; padding:0; } #tabsE a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHbcKlIGaVigwg7LOMrALa5A3QWWFKFH9_DzgYBhMGRGt7WbWHkA84q-w19v4VaBfy8c5DjB-p3TOO1HxQTiQgE4LCEPQyMpXBaIKr4bcDrqWR8IGXpz1PWLrXUYHl-ZpE2To7Jf-oFsQ/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/AVvXsEjTulkF-01uXtdSioKUKUPWGXGMok4e96JwkXssUTQKPn_KpkkLXZbdD-cp2YLkfmRntcIpXQO2vp9mBWkmBg8FEog6_wUuIKIn4kdfhdXNjFUqFMOWGEzCMitkgPbKg0iE4vnDnlFAHEw/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; } </style> <div id="tabsE"> <ul> <li><a rel="nofollow" href="#"><span>Link 1</span></a></li> <li><a rel="nofollow" href="#"><span>Link 2</span></a></li> <li><a rel="nofollow" href="#"><span>Link 3</span></a></li> <li><a rel="nofollow" href="#"><span>Link 4</span></a></li> <li><a rel="nofollow" href="#"><span>Link 5</span></a></li> <li><a rel="nofollow" href="#"><span>Link 6</span></a></li> <li><a rel="nofollow" href="#"><span>Link 7</span></a></li> </ul> </div>

<style> #tabsD { float:left; width:100%; background:#FCF3F8; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #F4B7D6; } #tabsD ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsD li { display:inline; margin:0; padding:0; } #tabsD a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMnNW1VxGufqvqSMl3U2eQyGTESaUWVzBYTVfH8emXlbDT29JoKcgbdNieK4aalp1WkPMkCldhP6EyngAa3ikpe21tT1OkdTnjFplzJ5v2a79Kb_eBA7xaafl-cH1eXXTxtUatGHD9GwY/s1600/tableftD.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsD a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4yFgk1gD7qSyxqdY_RAdouDOpHY0W0ruZsai-_u5ese2Jf5zdN7D1En2zXw1cZ6NXjUwKG57mSdZDwatOGI5kGuzkjRGohGh5WnIU1a5YFofpqfQamr6WCi2_MwZLOTAwaWf39qeMOco/s1600/tabrightD.png) no-repeat right top; padding:5px 15px 4px 6px; color:#C7377D; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsD a span {float:none;} /* End IE5-Mac hack */ #tabsD a:hover span { color:#C7377D; } #tabsD a:hover { background-position:0% -42px; } #tabsD a:hover span { background-position:100% -42px; } </style> <div id="tabsD"> <ul> <li><a rel="nofollow" href="#"><span>Link 1</span></a></li> <li><a rel="nofollow" href="#"><span>Link 2</span></a></li> <li><a rel="nofollow" href="#"><span>Link 3</span></a></li> <li><a rel="nofollow" href="#"><span>Link 4</span></a></li> <li><a rel="nofollow" href="#"><span>Link 5</span></a></li> <li><a rel="nofollow" href="#"><span>Link 6</span></a></li> <li><a rel="nofollow" href="#"><span>Link 7</span></a></li> </ul> </div>

4) Selesai klik save dan lihat hasilnya.
    Selamat mencoba! and Like..