Menu Navigasi Horizontal Keren di era 2013

Tweet

Menu Navigasi Horizontal Keren Bag. I

Menu navigasi atau menu tab merupakan jantung dari setiap halaman web atau blog serta juga menyediakan jalan yang lebih cepat bagi pengguna untuk sampai semua halaman penting pada website / blog. Pada Desain Blog proBlogiz kali ini akan membagi koleksi menu navigasi horizontal yang keren buat Anda juga bagaimana cara pemasangan menu navigasi pada blogger. Artikel kumpulan menu navigasi horizontal ini dibagi manjadi 3 bagian, yaitu Koleksi Menu Navigasi Horizontal Keren Bag. I, Bag. II, Bag. III, tidak ada salahnya bila Anda mengikutinya semua bagian artikel tersebut agar memperoleh menu tab yang sesuai dengan selera Anda.

Untuk membuat menu navigasi memang diperlukan pengetahuan yang baik tentang CSS dan HTML ataupun penguasaan tentang coding. Namun seiring waktu semakin banyak desainer yang berbagi tutorial online mereka, peng-coding-an semakin menjadi jauh lebih mudah. Saya juag telah mengkoleksi aneka menu navigasi profesional dan keren serta kode CSS dan HTMLyang saya peroleh dari beberapa situs web design. Anda hanya perlu copy dan paste kodenya dan letakkan pada blog Anda!..... it's easy and simple 

Koleksi Menu Navigasi Horisontal dengan menggunakan kode CSS di bawah ini sebagian besar diciptakan oleh Christopher dan Highdots dan beberapa oleh Ahmedzai . Saya telah memodifikasi beberapa kode agar lebih mudah / kompatibel diterapkan di blogger dan juga membuat agar lebih mudah untuk dipahami. 

Cara Pasang Menu Navigasi pada Blogger

Setelah Anda menentukan pilihan menu navigasi yang paling disukai, ikuti langkah berikut :

1.Masuk Blogger > pilih Tata Letak

2.Klik Add a Gadget or Add a Page element

3.Pilih HTML/JavaScript widget

4.Paste semua kode Menu Navigasi tersebut dalam HTML/JavaScript widget

5.Klik Save

Kemudian drag atau geser HTML/JavaScript widget tersebut dan letakkan tepat dibawah header / judul Blog

tampilan Tata Letak New Blogger

Anda bisa mengubah link-link menu navigasi nantinya sesuai keperluan, dengan cara mengubah / edit bagian kode HTML dibawah ini :

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

Ganti tanda "#" dengan Link Halaman / URL halaman dan ganti juga Page 1, Page 2, Page 3, dst. dengan nama atau judul halaman Anda.

Jika Anda ingin menambah atau mengurangi menu tab, maka dengan mudah bisa ditambah atau di-delet / hapus line html tersebut :

<li><a href="#" ><span>Page n</span></a></li>

Koleksi Menu Navigasi Horizontal Keren Untuk Blogger

Untuk melihat Demo Live atau Preview setiap Menu Navigasi Horizontal dibawah ini, Anda bisa menggunakan tool proBlogiz-Design Preview. Sangat mudah hanya paste-kan code CSS-nya saja pada kolom area css kemudian 

Caranya klik tombol Clear dibawah kolom CSS area, kemudian copy kode CSS Menu Navigasi dan pastekan diarea CSS selanjutnya klik tombol Preview untuk melihat tampilan menu tab.

Menu Navigasi Horizontal # 01

Black Orange ( no image )

<style> #navcontainer { /* none needed */ } ul#navlist { margin: 0; padding: 0; list-style-type: none; white-space: nowrap; } ul#navlist li { 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; } #navlist a, #navlist a:link { margin: 0; padding: 5px 9px 4px 9px; color: #fff; border-right: 1px solid #d1e3db; text-decoration: none; } ul#navlist li#active { color: #95bbae; background-color: #d1e3db; } #navlist a:hover { color: #fff; background-color: #FE9C54; } </style> <div id="navcontainer"> <ul id="navlist"> <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 Navigasi Horizontal # 02
Purple White ( no image )

<style> #navcontainer { float:left; width:100%; background:#fff; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #6659A7; border-top:1px solid #6659A7; } ul#navlist { margin: 0; padding: 0; list-style-type: none; white-space: nowrap; } ul#navlist 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; } #navlist a, #navlist a:link { margin: 0; padding: 5px 9px 4px 9px; color: #fff; border-right: 1px solid #d1e3db; text-decoration: none; } ul#navlist li#active { color: #95bbae; background-color: #d1e3db; } #navlist a:hover { color: #666; background-color: #fff; } </style> <div id="navcontainer"> <ul id="navlist"> <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 Navigasi Horizontal # 03
Boxed ( no image )

<style> #tabs { font: bold 7.5pt Verdana; } #navcontainer { float:left; margin: 0; padding: 8px 0px; width:100%; background:#575656; font-size:93%; line-height:normal; } ul#navlist { margin: 0; padding: 0; list-style-type: none; white-space: nowrap; } ul#navlist li { float: left; font: bold 7.5pt Verdana; line-height: 14px; margin: 0; padding: 5px 0 5px 0; } #navlist a, #navlist a:link { margin: 0; padding: 10px; color: #fff; border: 4px solid #575656; text-decoration: none; } #navlist a:hover { color: #fff; border: 4px solid #fff; } </style> <div id="navcontainer"> <ul id="navlist"> <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 Navigasi Horizontal # 04
Light Grey ( no image )

<style> #tabs1 { font: bold 7.5pt Verdana; } #tabs9 img { border: none; } #navcontainer { margin: 10px 0 0 30px; padding: 0; height: 20px; } #navcontainer ul { border: 0; margin: 0; padding: 0; list-style-type: none; text-align: center; } #navcontainer ul li { display: block; float: left; text-align: center; padding: 0; margin: 0; } #navcontainer 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; } #navcontainer ul li a:hover { color: #6659A7; background: #eeeeee; } #navcontainer a:active { background: #c60; color: #fff; } #navcontainer li#active a { background: #c60; border: 1px solid #c60; color: #fff; } </style> <div id="navcontainer"> <ul id="navlist"> <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> Sumber Artikel: Kumpulan menu horizontal pada blogspot | Kuansingfoundation.blogspot.com http://kuansingfoundation.blogspot.com/2013/02/kumpulan-menu-horizontal-pada-blogspot.html#ixzz2LLSIwXqC Under Creative Commons License: Attribution Share Alike

 Menu Navigasi Horizontal # 05
Bulleted Top Navigation

<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/AVvXsEgsdK-5a1ZyCn8iMKstVSyM2T7WAYf9yyopSNx8aNRScBt66w7eQUPaZiCV59vlL3iz2QuyYcf_AT2EZ91tB1yveqahGn7fDcbZ6BQAUcBrnD3ekIf2XuFUbEkZGbmGwQPrqwv4pkFJs1g/s1600/Inverted.png) no-repeat top center; border-top: 4px solid #5F6A71; } </style> <div class="container"> <ul id="nav"> <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> Sumber Artikel: Kumpulan menu horizontal pada blogspot | Kuansingfoundation.blogspot.com http://kuansingfoundation.blogspot.com/2013/02/kumpulan-menu-horizontal-pada-blogspot.html#ixzz2LLSUarzs Under Creative Commons License: Attribution Share Alike

Menu Navigasi Horizontal # 06
Orange Blue 

<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/AVvXsEiuitMGhC1eRlEtihALQzl_1-WrZhe37FSD1ucWkx5ccKcKrGNSwzFOI3eSYozYpMIpXUc6MWg-L5eM319W9Ytt6Pji-7QStWk6DvFaGTcx9hcoXo3SpqN2xP6jOUc-7YbDy8E0KILzHeE/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/AVvXsEj69OFU66gMj0ApnlhgizM4_2V7kBINzd8rhv_MsirS1OfaMIFxRkV6sNyIOcA_-TD_do-IgQ1Pv6KN5eigZ_mxLV6shmNcoIeBEY3ZDOk4Zei_kmzcWYLPfQ4I7JjcCZt2-tA0AgxTvGQ/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 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> Sumber Artikel: Kumpulan menu horizontal pada blogspot | Kuansingfoundation.blogspot.com http://kuansingfoundation.blogspot.com/2013/02/kumpulan-menu-horizontal-pada-blogspot.html#ixzz2LLSgfkDZ Under Creative Commons License: Attribution Share Alike

Menu Navigasi Horizontal # 07
Grey Blue

<style> #tabsG { float:left; width:100%; background:#666; font: bold 7.5pt Verdana; line-height:normal; } #tabsG ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsG li { display:inline; margin:0; padding:0; } #tabsG a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuvUiOojT-KhXr6WfFxCNmLh7yB3Kpm5PRx9xO_ZwVRqtq4IrsqFBsJ5CHwYLCUt3UtSC1jL-UhpaWCrVw49KlNR0iits72vOWerlmdySRkSIhUYyxBBXWs4sDgW2_kyb9g19EOU9kZWw/s1600/tableftG.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsG a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3-vUpKVptolXoDoOCf5vaNZGycBjTCDZdBMwhs-zDjRhV-ErzE7VIUGY5QJUVMzFydBBWqKTqntoudq9SRnS5FMIV4GpRhCKFMtZRG3nOBbz3Ij4MMiX_YlRCcGy5W1jKSVsrW6pihlI/s1600/tabrightG.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsG a span {float:none;} /* End IE5-Mac hack */ #tabsG a:hover span { color:#FFF; } #tabsG a:hover { background-position:0% -42px; } #tabsG a:hover span { background-position:100% -42px; } </style> <div id="tabsG"> <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> Sumber Artikel: Kumpulan menu horizontal pada blogspot | Kuansingfoundation.blogspot.com http://kuansingfoundation.blogspot.com/2013/02/kumpulan-menu-horizontal-pada-blogspot.html#ixzz2LLStJsF4 Under Creative Commons License: Attribution Share Alike

Menu Navigasi Horizontal # 08
Rounded 

<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/AVvXsEgDrlxWOnhyYtkaMepkC6xe9RDJrFUa5eSWrfKJueji5KwuF6qiomihUAcN9-2ayR-_HDdOHu-YbhiWHILod9x54lNTd3FT53MfhciX0CfGMye7ZvvUbDqoGtKMWtVXdqqu33dwoyg8jJ4/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/AVvXsEhWqreeicUqSEyApCW5WUIilvj2FhjakFTQZao-7QHG2ANOnIUx9n4FoeGFiOAC-l-uCIrxg5ZK94n4UQzD4itIlqVFFT3BoBp-bBof6xhZWcn-CpTYRKYxhaoscia66u_H8xJdhy6m32k/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 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> Sumber Artikel: Kumpulan menu horizontal pada blogspot | Kuansingfoundation.blogspot.com http://kuansingfoundation.blogspot.com/2013/02/kumpulan-menu-horizontal-pada-blogspot.html#ixzz2LLT5jLOL Under Creative Commons License: Attribution Share Alike

Menu Navigasi Horizontal # 09
ZDnet Emulation ( no image )

<style> #navcontainer { background: #369; border-top: 1px solid #9CC; margin-top: 20px; font: normal normal 11px Verdana, Geneva, Arial, Helvetica, sans-serif; } #navlist { list-style: none outside none; margin: 0; padding: 0; } @media all { #navlist { text-align: center } } #navlist li { bottom: 11px; display: inline; line-height: 1.2em; margin: 0; padding: 0; position: relative; } html>body #navlist li { background: #000; margin: 0 3px 0 0; padding: 4px 0px 4px 0; } #navlist a, #navlist a:link, #navlist a:visited { background: #900; border: 1px solid #FFF; bottom: 2px; color: #FFF; cursor: pointer; display: inline; height: 1em; margin: 0; padding: 3px 5px 3px 5px; position: relative; right: 2px; text-decoration: none; } #navlist a:hover { background: #C00; bottom: 1px; color: #FFF; position: relative; right: 1px; } #navlist a:active { background: #999; bottom: 0px; color: #FFF; position: relative; right: 0px; } #navlist li#active { background: #369; bottom: 13px; display: inline; margin: 0 3px 0 0; padding: 0; position: relative; } html>body #navlist li#active { background: #000; margin: 0 4px 0 4px; } #navlist #active a, #navlist #active a:link, #navlist #active a:visited, #navlist #active a:hover { background: #369; border-bottom: none; border-left: 1px solid #9CC; border-right: 1px solid #9CC; border-top: 1px solid #9CC; bottom: 0; color: #FFF; cursor: text; margin: 0; padding: 2px 5px 0 5px; position: relative; right: 0; } </style> <div id="navcontainer"> <ul id="navlist"> <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> Sumber Artikel: Kumpulan menu horizontal pada blogspot | Kuansingfoundation.blogspot.com http://kuansingfoundation.blogspot.com/2013/02/kumpulan-menu-horizontal-pada-blogspot.html#ixzz2LLTH6XbU Under Creative Commons License: Attribution Share Alike

Menu Navigasi Horizontal # 10
Red Boxed 

<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/AVvXsEiDQHhphedeN62Sh0gqLXYv_ga0TASwqJguEXI7RJ_vK-RX1J5-5mU069nrxSQdi7IbQ9aynALQMX8mFu_6fpG3rnlj0HAY-u6wniauheVI80fmMYyrnP0F5TR_cRInZHjXb6z6k2vD1Es/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/AVvXsEh0WjDwOU0nxb4H9Ym5quHy6th55GDS8ZvEBRIPpzW60MJluOqA4S8VJI6pNZ_cuyxDMXIKAb7AIWHpXnaCfWFgNd6UN5Wewp7LukVut_I2BmThwnWesu5upUZk-E-RK3CVACiaM67QMd0/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 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> Sumber Artikel: Kumpulan menu horizontal pada blogspot | Kuansingfoundation.blogspot.com http://kuansingfoundation.blogspot.com/2013/02/kumpulan-menu-horizontal-pada-blogspot.html#ixzz2LLTSrWWB Under Creative Commons License: Attribution Share Alike

Koleksi Menu Navigasi Horizontal Keren selanjutnya dapat Anda lihat pada artikel Koleksi Menu Navigasi Horizontal Keren Bagian Dua, klik ini: