Membuat Menu Horizontal di atas Navbar

Tampilan navbar standar bawaan blogger terkadang membuat kita bosan. Walaupun ada cara untuk menyembunyikan navbar namun sepertinya area navbar bisa kita manfaatkan dengan memberikan sebuah menu horizontal. Kak Hady Berbagi akan membagikan cara membuat menu horizontal di atas nabvar untuk anda. Adapun langkah-langkahnya adalah sebagai berikut:

1. Login ke akun Blogger anda
2. Pada dasbor blog anda silahkan pilih Template
3. Klik Edit HTML
4. Untuk menjaga hal-hal yag tidak diinginkan, lakukan backup template
5. Setelah yakin template asli tersimpan dengan baik, cari kode ]] ></b:skin> (di atas </head>)
6. Copy kode CSS di bawah ini dan letakkan persis di atas kode ]]></b:skin> .
   
   #cssmenu ul {
   margin: 0;
   padding: 0;
   list-style-type: none;
   position: relative;
   display: block;
   height: 40px;
   text-transform: uppercase;
   font-size: 13px;
   background: transparent url('http://cssmenumaker.com/sites/default/files/menu/64/blue.jpg') repeat-x top left;
   font-family: Helvetica, Arial, Verdana, sans-serif;
   width: auto;
   }
   #cssmenu li {
   display: block;
   float: left;
   margin: 0;
   pading: 0;
   border-right: 1px solid #ffffff;
   }
   #cssmenu li a {
   display: block;
   float: left;
   color: #ffffff;
   text-decoration: none;
   padding: 12px 20px 0 20px;
   height: 24px;
   height: 40px;
   }
   #cssmenu li a:hover {
   background: transparent url('http://cssmenumaker.com/sites/default/files/menu/64/black.jpg') repeat-x top left;
   }
   
7. Untuk background patern silakan cari gambar yang anda sukai di Google Gambar
   
8. Selanjutnya cari kode </head>
9. Jika sudah ketemu, letakkan kode berikut di bawah kode </head>
   

   <div id='cssmenu'>
   <ul>
   <li><a href='#'><span>Beranda</span></a></li>
   <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 class='last'><a href='#'><span>About</span></a></li>
   </ul>
   </div>
   

10. Ganti tanda # dengan URL anda dan Link 1, Link 2, dst dengan nama link yang bersesuaian dengan URL tersebut
11. Simpan Template dan lihat hasilnya.
12. Jika sebelumnya tidak ada pengubahan maka hasilnya akan seperti gambar di bawah ini
    

Sekian yang dapat Kak Hady Berbagi sampaikan. Semoga bermanfaat.