Kumpulan menu simple horizontal

Menurut janji svshare pada postingan sebelumnya, ingin ngeshare lagi kelanjutan dari postingan Menu manis horizontal. Paparan singkatnya sudah ada di situ. Nah, sekarang tinggal ngeshare langsung saja deh tanpa beralama – lama, tanpa pajang lebar, dan tanpa menunda – nunda siap – siap sobat svshare. hhe

Follow ya langkah – langkah nya :

1. Pastinya, login dulu ke akun bloggernya sobat
2. Otomatis ke halaman dasbor
3. Pilih tabmenu Rancangan => Pilih Elemen Laman
4. Tambah Gadget (bisa di atas header atau dibawah header)
5. Pilih HTML/JavaScript
6. Copy semua kode tab yang terdapat dalam textarea dibawah, tab menu pilihan sobat itu paste pada kolom konten
Untuk mengganti link, edit pada bagian skrip HTML nya, sebagai berikut :
<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>

Ganti kode (#) dengan URL halaman sobat dan untuk Link 1, Link2, Link3 dan seterusnya dengan title URL halaman sobat jika ingin menambahkan dan bisa menghapus disalah satu baris skrip HTML tersebut.
7. Terakhir simpan dan lihat deh blog nya sobat langsung.
Berikut kode sekaligus gambar nya.
Share navigation menu versi simple part I

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

Share navigation menu versi simple part II

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

Share navigation menu versi simple part III

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

Share navigation menu versi simple part IV

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

Share navigation menu versi simple part V

<style> #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/AVvXsEhkvLeA4uqiORrrgebNzoU4vfz4Lkh72VUc5J1Q6NAauK4jJ_U7iYTrrxvEoAu8hlrxlFh4UrX8Wu8rqULov-mZcKadsJDU1M_yD4OvpI8eAgMUoZoyublciUa-3O8eyNW1Lc7WMFUs1qs/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/AVvXsEhxvpFZXEEOfadRzURcLjsa_lBMl2Sm_gdSE-X0CJ-ffBP6dpRyhlsgSv-3_38dj5fAoPzyK6RQ0JH58MC_iXAxZQ0uhntdPQrzR1eL95NNtnmgmdlvXdqfzTtk2noMRPItN0Q8UvMKudw/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; } </style> <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>

Share navigation menu versi simple part VI

<style> #tabsK { float:left; width:100%; background:#E7E5E2; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #54545C; } #tabsK ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsK li { display:inline; margin:0; padding:0; } #tabsK a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAXOYF81Bv9h_aQa04m3MjJ97xcb3_h0z_m4DtF0uxX7HvJCk5lDgS9m4kMuP64r23bZfBGmzyA1o-PCks6hPk7XLwFf95okel6C79Uk3ozIhccA4hn1x8Gs_EBbOKTHTUe2jjGgHl30k/s1600/tableftK.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsK a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu5L9q8w47AkKR_1eiB0nhdt0RuNVcf4v9pjXZHngd6SoqYGTpl8Gy85YwWiVfRzqM7nuuQbpmr66cRXSHOL6uZZM2MmZ1lWtdLxNTJdEtFppU1XoERFdOMErNF-vrbEumbVxC42qkg2o/s1600/tabrightK.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsK a span {float:none;} /* End IE5-Mac hack */ #tabsK a:hover span { color:#FFF; background-position:100% -42px; } #tabsK a:hover { background-position:0% -42px; } #tabsK a:hover span { background-position:100% -42px; } </style> <div id="tabsK"> <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>

Share navigation menu versi simple part VII

<style> #tabs3 img { border: none; } #tabs3 { float:left; width:100%; background:#E4E6EB; font: bold 7.5pt Verdana; line-height:normal; } #tabs3 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs3 li { display:inline; margin:0; padding:0; } #tabs3 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEsYqCq0oytdrbW7Foo1BNbXVZ7Vl1ySlqAGzIkiHuKwwUn2U7FO7FaXheOPaVMqZu8KJtbubBtLaS2c2DwO9R2umKx7I2w41jhyphenhyphenHZcPZ7rHzoyNhR4Ndg-uAYsdriFCep1S4wfSvxsU0/s1600/tableft3.gif) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs3 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXRRlHmEiMopwR9zSflzXiP2fSuYQjuBz6HSch_MAbjD0o0HF5aNu7QPYRpiq12RUWp3VI8fQpOc-I6XDd8mSD2Wk_o8BoF8El1DtbSfh01a3Gm57-xWRLFsZnja_uzN6kyV20ky_TvNs/s1600/tabright3.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs3 a span {float:none;} /* End IE5-Mac hack */ #tabs3 a:hover span { color:#FFF; } #tabs3 a:hover { background-position:0% -42px; } #tabs3 a:hover span { background-position:100% -42px; } #tabs3 #current a { background-position:0% -42px; } #tabs3 #current a span { background-position:100% -42px; } </style> <div id="tabs3"> <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>

Share navigation menu versi simple part VIII

<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 href="#"><span>Liddddnk 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>Linddddkdd 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>Linddddk 7</span></a></li> </ul> </div>

Share navigation menu versi simple part IX

<style> #tabs1 img { border: none; } #tabs1 { float:left; width:100%; background:#F4F7FB; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #BCD2E6; } #tabs1 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs1 li { display:inline; margin:0; padding:0; } #tabs1 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPTaIr6YCjbULZyZcn19uND5FjZfvD4zYFJnjh3Xg9WKr5Ec3cTNxmPv402k4-AJr3IWpmOhyphenhyphenjtmdkq7ms2PZFtDH4GUBFY7Sn9YgJq0Omf3m3BR-86yPmdw2L5OSngPiKTHVb7UN2H74/s1600/tableft1.gif) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs1 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwJr6t6Cm-YMguo6HQLpSsGFT1QddA7URjETgQVY1b2MQzaLvKzSIcDHmydLtOoQak9c0ovgUSbfF_G7FiWDvEcjXodqlly8gfCFv9jZ1Xxg96gveENQbsqweLuN1f3dAEeB3jz9bvNJY/s1600/tabright1.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#627EB7; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs1 a span {float:none;} /* End IE5-Mac hack */ #tabs a:hover span { color:#627EB7; } #tabs1 a:hover { background-position:0% -42px; } #tabs1 a:hover span { background-position:100% -42px; } #tabs1 #current a { background-position:0% -42px; } #tabs1 #current a span { background-position:100% -42px; } </style> <div id="tabs1"> <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>

Share navigation menu versi simple part X

<style> #tabsB { float:left; width:100%; background:#F4F4F4; font: bold 7.5pt Verdana; line-height:normal; } #tabsB ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsB li { display:inline; margin:0; padding:0; } #tabsB a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpzW1pZ4RLvXioqvPrlseW2C9k-xdhbmdUWcEHmlivA4o1A6FxnqADzWDXaNeG1QAp6bOx4KBB2hiYL9NRo6qOWxz9wFGPoiRMlTuig11JH3zsZTAPHKwIa1duFm2psh2md30eWyJm_ZE/s1600/tableftB.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsB a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisUDnp0Lx_CftJIbpRY4hFMwbTB37W9m-VDFo-Pxj0Nt5ifsLuVMD35kVVMwiWSUgEH3zjajNZPGQzWzJyyaAMzF0Xv6HMaG3i1HJJnWZtKfwpwJDdvGJKqrRy48BzqCrGwwepFBPJ41Y/s1600/tabrightB.png) no-repeat right top; padding:5px 15px 4px 6px; color:#666; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsB a span {float:none;} /* End IE5-Mac hack */ #tabsB a:hover span { color:#000; } #tabsB a:hover { background-position:0% -42px; } #tabsB a:hover span { background-position:100% -42px; } </style> <div id="tabsB"> <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>

Sekian, sharing mengenai Kumpulan menu simple horizontal. Terima Kasih

Perlu Diingattt :
Apabila di arahkan ke halaman :
- shorte.st atau adf.ly, tunggu sejenak 5 detik dan mengklik tombol skip/lewati
- ke ouo, centang anda bukan robot dan tunggu 5 detik lalu get link, kemudian otomatis ke hosting download tersebut. Apabila sobat kesulitan ada panduan cara downloadnya klik >> disini <<

PERHATIAN!!!
- Jika kamu kesulitan mengunjungi halaman adf.ly, bisa atasi dengan cara INI
- Jika ada link mati atau bermasalah, laporkan saja langsung ya ke SINI. Terima Kasih. Enjoy...

Langganan Software Gratis

• Tweet
• Share
• Share
• Share
• Share

About svshare7

Blog ini lahir 5 Januari 2012 yang awalnya dikelola oleh Admin tunggal, kini sudah di kelola oleh beberapa pengurus. Tujuan ngeblog hanya untuk mengisi waktu luang dan hobby, tapi saya bersyukur apabila blog ini bermanfaat bagi teman - teman. Blog ini akan terus menyajikan informasi software, Cusrom Android, Tutorial, Game yang dibagikan secara gratis.

Related Post

• Laser Online Situs Investment 12% profit harian selama 12 hari!!!Halo guys, setelah sekian lama belum update tentang situs penghasil duit. sekarang saya muncul kemb
• Cara Daftar Blog Blogger ke Yahoo atau Bing Seperti sebelumnya sudah di bahas mengenai Cara Mendaftarkan Blog ke Google, tampaknya belum cukup
• Menu manis horizontal Hallo sobat !! Menu ? Ya, menu. . .menurut versi nya svshare, menu itu suatu cara agar bisa memud
• Memasang textarea solid di blog Sesuai permintaan dari sobat Ilham Noed, dia ingin "membuat sejenis teks area di blognya", ok ma