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.

Baca juga:

Kak Hady Berbagi

1. Terima kasih telah berkunjung dan membaca artikel ini

Judul : Membuat Menu Horizontal di atas Navbar
URL : http://hady-berbagi.blogspot.com/2014/01/membuat-menu-horizontal-di-atas-navbar.html?m=0
Diposkan oleh : Kang Hady
Pada : Minggu, 05 Januari 2014.
Pukul : 08:33
Label/kategori : Ilmu Komputer , Web Desain
Bagikan ke : Facebook | Google+ | Twitter | Digg

2. Saya mengharapkan kritik dan saran dari pembaca semua. Untuk itu silakan berkomentar pada setiap postingan blog ini;
3. Setiap komentar yang anda berikan adalah masukan bagi saya agar blog ini lebih baik.