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 blog lebih segar, bisa makin banya pula menu - menu yang bisa ditampilkan. Lalu, bagaimana cara membuat nya? Baiklah, jika tertarik untuk membuatnya silahkan bisa dicoba dengan cara berikut ini :

Masuk ke dashboar blogger
Kemudian klik template dan pilih edit HTML
Selanjutnya cari kode </b:skin>; , kamu bisa menggunakan CTRL + F untuk mempermudah pencarian
Jika sudah ketemu kode </b:skin> tersebut , kemudian letakkan kode berikut ini tepat 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 >

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='#'>Sitemap</a></li>

<li><a href='#'>Disclaimer</a></li>

</ul> </nav>

<div class='clear'></div> </div>

Langkah terakhir adalah simpanlah perubahan tema dan silahkan cek tampilan blog. Gimana sudah berubah kan? Ternyata cukup mudah ya membuat menu navigasi menu di atas header. Semoga bermanfaat ya.