Mungkin sebagian para blogger yang masi newbie masi kebingungan dalam membuat menu tab horisontal, apalagi proses pembuatannya yang menggunakan menu edit HTML pada template yang bisa saja dapat merusak code HTML sebuah template jika terjadi kesalahan dalam proses pengeditan. namun sekarang tidak perlu khawatir lagi akan masalah seperti itu, karna sobat blogger dapat membuat menu horizontal sobat sendiri hanya dengan menambah element javascript/HTML Code pada gadged dibawah navbar blogger sobat. untuk tahapan proses pembuatannya.. sobat blogger bisa baca petunjuk tahapan berikut :

1. Sobat blogger terlebih dahulu silahkan Sign In ke account blogger sobat, kemudian pada Dashboard, klick Tata Letak/Design ==> Elemen halaman/Page Elements.

2. Klick tambah gadged/add a gadged pada kolom element dibawah navbar atau diatas header

3. Pilih HTML/Javascript

4. Copy Code Menu Horizontal yang sobat blogger pilih pada daftar Code HTML menu horizontal dibawah ini,, kedalam Content pada gadged HTML/JavaScript yg sobat tambahkan.

5. Pada bagian Title/Judul bisa sobat kosongkan saja

6. Kemudian klick save/simpan. dan lihatlah hasilnya pada blog sobat...semoga bermanfaat :)

Daftar Code HTML menu Horizontal :

1. Menu Horizontal Satu

HTML Code :

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

2. Menu Horizontal Dua

HTML Code :

<br /> <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/AVvXsEgpueFMMTyMkDLYC-2UYYtaBxYb5m4zvL7mkzrvLsHQsB3fg7Bq1Ta9oGjaL29OBTMGd5c4q8uI15YqZ9yJUF_det7a2zi1ufhuUn_xm0bdZcL24-BM2_Q2Hx1pEA8MTv5sqaZ-cPKwSL4/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/AVvXsEgS8rIUQFh109gmiHSxd54V4FNiNyXJodyv1ALmAo0Y52cDkT3zDv3YFYgBYnrBouPITFpN86QVyllKhisMgYJ41vZLsbV42IdN-nrGNp4_gJWPFJqTpXoKPpc_gn_FpROylSEHzdEbOWY/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>

3. Menu Horizontal Tiga

HTML Code :

<br /> <style> #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/AVvXsEi45TgYo13MHedszUwEEUpqF0YrxNlhF6wjpXZ1HhXJO0c65OIqEtjgFUyYJ6M9UiXodrFcFwMxAT6JjkC79etu7g9Puy1cTnnDh4uPy2km4fi6r0_Nz7ovt938wk1rPQfxUgkogtiJM6Y/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/AVvXsEh4CDWRtphXNhhsmVjzKnzx6cE0BV4_nl89-ZBg-Wz6RB8rPP83OZp2uw1HusaQ0K_MSnYERg-0oQipomFKzzk_26r9vVbVyJv1ZLFr8uLcRdavRf4Q4C7vFNptJME0TXPBJJmgttnhmdo/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; } </style> <div id="tabs"><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>

SeLamat Mencoba.,., senoga Sukses ^_^