Cara Membuat Menu Di Atas Header Blog

Kamis, Desember 4th, 2014 - Tutorial Blog

Tags :

Cara Membuatt Menu Di Atas Header Pada Blog. Pada kesempatan kali ini kita akan membahas bagaimana cara membuat menu navigasi diatas header pada blog, Membuat menu diatas header dapat memperindah blog anda, dan juga mempermudahkan para pengunjung untuk menjelajah blog kita.

Cara Membuatt Menu Di Atas Header Blog

Biasanya menu diatas header diisi dengan Contact Me, Privacy Policy, Facebook, Twitter, dll. Untuk cara membuatnya dapat anda ikuti langkah-langkah berikut ini

Langkah-Langkah Membuat Menu Di atas Header
1. Masuk ke pengaturan Template lalu pilih Edit HTML
2. Cari kode  <![CDATA[ atau <b:skin><![CDATA[ atau ]]></b:skin> gunakan (CTRL+F) untuk mempermudah pencarian
3. Jika sudah ketemu Letakan kode dibawah ini tepat di atas kode tersebut

/*CB Top Menu*/
#top{margin:auto;padding: 0;width: 980px;background:#e8e7e7;border-bottom:1px solid #ddd;}
#top-wrap{margin:auto;padding: 0;width: 960px;background:#e8e7e7;}
#navwrap {margin: 0px auto; width:560px; float:left;background:#080705;}
.topnav ul {list-style:none;margin:0;padding:0px; float:left;}
.topnav li {float:left;margin:0;text-align:center;}
.topnav li a {font-family: arial; font-weight:bold; font-size:11px;display:block;padding:10px 10px;color:#222;text-decoration:none; text-transform:uppercase;}
.topnav li a {background:none; }
.topnav li a:hover, li a:focus, li a:active {text-decoration:none; background:#ffffff; color:#000000;}}
#navbar-iframe {display: none !important;}

Keterangan :
– Tulisan yang berwarna Merah adalah ukurang lebarnya, sesuaikan dengan ukuran template anda
– Tulisan yang berwana Biru adalah warna baiground
– Tulisan yang warna Kuning adalah warna huruf menu

4. Kemudian cari kode <head> atau <body> dan letakan kode dibawah ini tepat di bawah kode tersebut.

<div id=’top’>
<div id=’top-wrap’>
<div class=’topnav’>
<ul id=’topnav’>
<li><a href=’/’ title=’Top Menu’>Top Menu </a></li>
<li><a href=’http://www.ilmu-wongcilik.com/p/privacy-policy.html’ title=’Privacy Policy’>Privacy Policy </a></li>
<li><a href=’http://www.ilmu-wongcilik.com/p/contact-kami.html’ title=’Contact’>Contact </a></li>
</ul>
</div>
</div>
<div style=’clear: both;’/>
</div>

Keterangan :
– Ganti link dan menu sesuai yang anda inginkan
– Anda bisa menambah menu tersebut

5. Simpan Template

Sekian pembahasan tentang bagaimana cara membuat menu di atas header. cara ini sudah dicoba pada blog ini. semoga dapat membantu dan bermanfaat.

Share this article
Previous Post « « Cara Membuat Kode Script Untuk Area Baner Iklan and Cara Cek Paket Dan Sisa Kuota Internet Indosat » » Next Post

Cara Membuat Menu Di Atas Header Blog

Cara Membuat Menu Di Atas Header Blog | wongcilik2017 | 4.5