Cara Membuat Menu Horizontal dengan CSS

Menu Horizontal untuk Blogger/Blogspot. Seperti menu-menu horizontal sebelumnya, menu horizontal ini masih berkutat dengan CSS dan HTML tanpa Javascript/Jquery, bahkan tanpa menggunakan gambar, berbasis tab individual, dan tidak menggunakan list (HTML unordered list).

langkah pertama :
1. Klik Rancangan .
2. Lalu Klik Perancang template.
3. Kemudian Pilih Advance, Lalu add CSS paling bawah .
4. Selanjutnya kamu copy kan kode di bawah ini ke dalam kotak CSS nya .

Kode CSS :

/* Navigasi tabs Sederhana Starts */
a.burastabs, a.burastabs:link, a.burastabs:visited {display:block; width:102px; height:30px; background:#444444; border:1px solid #ebebeb; margin-top:2px; text-align:center; text-decoration:none; font-family:arial, sans-serif; font-size:12px; font-weight:bold color:#FFFFFF; line-height:25px; overflow:hidden; float:left;}
a.burastabs:hover {color:white; background:#666666;}
#burasbar {width:auto; margin:0 auto;}
/* Navigasi tabs Sederhana Ends */

5. Sedudah Kamu Copykan Lalu Kamu Klik Apply  to blog .

6.Sedusah Selesai Lalu Kamu Klik Rancangan > Elemen Laman .

7. Lalu Kamu Klik Tambah Gadget Dan Pilih HTML/JavaScript.
8. Lalu Kamu Copykan Kode di bawah ini ke HMTL/JavaScript nya. 

Kode HTML :

<!-- Navigasi tabs Sederhana Starts -->
<div id='burasbar'>
<a href="#" class="burastabs">Home</a>
<a href="#" class="burastabs">Software</a>
<a href="#" class="burastabs">Blog Tips</a>
<a href="#" class="burastabs">Games</a>
<a href="#" class="burastabs">Contact</a>
<a href="#" class="burastabs">Sitemap</a>
<a href="#" class="burastabs">Advertise</a>
</div>
<!-- Navigasi tabs Sederhana Ends -->

Sebelumnya copy & edit terlebih dahulu kode HTML di atas. Ganti # dengan URL yg diinginkan. Ganti juga Home, Software, Games dan seterusnya dengan anchor text yg diinginkan. Untuk menambah atau mengurangi tab, copy/tambahkan atau hapus bagian <a href="#" class="burastabs">text</a>