Cara membuat Menu Label menjadi Menu Header Horizontal pada Blog

Panduan membuat menu horizontal blogger

1. Login ke dashboard blogger
2. Klik menu Design/Rancangan (Klik menu Tata Letak = untuk blogger tampilan baru menunya ada di sebelah kiri)
3. Klik Add Gadget / Tambah Gadget.
4. Pilih/klik opsi HTML/Javascript
5. Kemudian masukkan kode menu horizontal berikut
   
   <style> /*---------------------------------------------------------------------------------*/ /* CATEGORY MENU */ /*---------------------------------------------------------------------------------*/ #cat-menu { background:none; height:35px;} /* category navigation */ .nav { background:#f5f5f5;width:100%;z-index:99; float:left; margin:5px 0 10px 0; padding:0px; list-style:none; height:35px;} .nav a { position:relative; color:#555; display:block; z-index:100; text-decoration:none; } .nav li { float:left; width:auto; border-right:1px solid #d9d9d9; } .nav li a { font:bold 11px/15px Arial,serif; padding:10px 12px; text-decoration:none; text-transform:uppercase; } .nav li a:hover{ background:#333; color:#fff; text-decoration:underline;}</style> <div id='cat-menu'> <ul class='sf-menu nav' id='cat-nav'> <li><a href='/'>Home</a></li> <li><a href='#'> Menu 1</a></li> <li><a href='#'> Menu 2</a></li> <li><a href='#'> Menu 3</a></li> <li><a href='#'> Menu 4</a></li> <li><a href='#'> Menu 5</a></li> </ul>                      </div>Keterangan.

   ganti tanda pagar ( # ) pada kode <a href='#'> dengan link yang teman inginkan, bisa link label, postingan, atau link yang mengarah kesitus lain.
   Silakan ganti tulisan Menu 1 - Menu 5 dengan nama menu yang teman inginkan.

6. Klik Save / Simpan
7. Selesai
   
   
   Untuk mengatur lebar menu nya silakan edit pada bagian
   
   .nav { background:#f5f5f5;width:100%
   
   Nah silakan rubah lebarnya dengan merubah angka 100% dengan lebar yang kamu inginkan, biasanya ditulis dalam ukuran px (contoh : width: 900px).
   Untuk mengedit yang lainnya silakan dicoba edit sendiri CSS nya. Yang saya maksud CSS itu adalah kode <style> sampai kode </style>

Nah itulah tutorial bikin menu horizontal blogger.

Catatan :
Letakkan gadget di tempat yang sesuai (biasanya di bawah gadget header)
Source: sugoi-blog.blogspot.com