Cara Mudah Membuat Navigasi Menu di Atas Header

Cara Mudah Membuat Navigasi Menu di Atas Header. Ada kalanya mungkin kita ingin merefresh tampilan blog kita, agar ada suasana baru dan pengunjung juga tidak bosan berlama - lama di blog kita. 

Mungkin menampilkan navigasi menu diatas header ini bisa dicoba ( khususnya bagi blog yang belum pasang ). Selain agar tampilan lebih segar, bisa makin banya pula menu - menu yang bisa ditampilkan.

Lalu, bagaimana cara membuat nya :
Baiklah, bisa dicoba dengan cara berikut :

Baca Juga :

1. Masuk ke dashboar blog, klik template dan masuk edit templat
2. Cari  kode </b:skin>; , Gunakan CTRL + F untuk mempermudah pencarian
3. Kalau sudah ketemu kode </b:skin> , kemudian letakkan kode berikut di atasnya :


<style type='text/css'>
/* MENUATAS */
.menuatas{font:normal normal 12px Arial,sans-serif;padding:0 0;background:#ffffff;margin:0 0 10px 0;height:35px;border-bottom:1px solid #f0f0f0;overflow:hidden}
.nav-menu{list-style-type:none;margin:0 0 0 0;padding:0 0 0 0}
.nav-menu li{display:block;float:left;line-height:38px;margin:0 0 0 0;padding:0 0 0 0}
.nav-menu li a{background:#ffffff;color:#666666;display:block;padding:0 8px}
.nav-menu li a:hover{background:#f5f5f5} </style >



4. Kemudian cari kode <div class='header-wrapper'> atau <div id='header-wrapper'> , letakkan kode berikut di atasnya :


<div id='nav-wrap'> <nav
class='menuatas'> <ul
class='nav-menu'>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>Musik</a></li>
<li><a href='#'>Disclaimer</a></li>
</ul> </nav>
<div class='clear'></div> </div>



5. Simpan Template.

Cek tampilan baru blog. Tradaaaa

Semoga bermanfaat..

Silahkan Meninggalkan Komentar Dengan Bijak dan Sopan
EmoticonEmoticon