Cara Membuat Menu Diatas Header

kevinservis TIPS BLOG 23 Mar 2013

Posted by isbernendi

Hai sob.. Sobat ingin tampilan blog sobat lebih keren dan pastinya pengunjung sobat tertarik dengan blog sobat?
nah, kali ini saya akan beri tips buat sobat tentang bagaimana cara membuat menu di atas header blog.
nah, dengan header itu pengunjung blog sobat dapat memilih bagian mana yang sekiranya ada bacaan yang menarik untuk dibaca.

Langsung aja ya sob ke TKP !!!

Pertama :
sobat log in dulu di blog

Kedua :
sobat masuk ke menu templates => edit HTML kemudian centang expand yang ada di kiri atas.

Ketiga :
sobat cari kode ]]></b:skin> (mudahnya tekan tombol kombinasi CTRL+F, kemudian cari kode tadi)

Keempat :
sobat letakkan script berikut di atas kode itu.

/*The top Menu*/
#top{
margin:auto;
padding: 0;
width: 100%;
background:#000000;
border-bottom:1px solid #373127;
}
#top-wrap{
margin:auto;
padding: 0;
width: 960px;
background:#000000;
}
#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: georgia; font-weight:bold; font-size:10px;display:block;padding:10px 10px;color:#fff;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;}
/*The top Menu*/
#med{
margin:auto;
padding: 0;
width: 100%;
background:#000000;
}
#med-wrap{
margin:auto;
padding: 0;
width: 960px;
}
.mednav ul {list-style:none;margin:0;padding:0px; float:left;}
.mednav li {float:left;margin:0;text-align:center;}
.mednav li a {font-family: georgia; font-weight:bold; font-size:11px;display:block;padding:10px 10px;color:#000000;text-decoration:none; text-transform:lowercase;}
.mednav li a {background:none; }
.mednav li a:hover, li a:focus, li a:active {text-decoration:underline; color:#000000;}
#navbar-iframe {
display: none !important;
}

Kelima :
 sekarang sobat  cari kode </head>

Keenam :
 silakan letakkan script berikut di bawah kode tadi

<div id='top'>
<div id='top-wrap'>
<div class='topnav'>
<ul id='topnav'>
<li><a href='url / link homepage '>home</a></li>
<li><a href='url / link 1'>judul link</a></li>
<li><a href='url / link 2'>judul link</a></li>
<li><a href='url / link 3'>judul link</a></li>
<li><a href='url / link 4'>judul link</a></li>
</ul>
</div>
</div>
<div style='clear: both;'/>
</div>

Ketujuh :
 ganti kode  url / link 1' dengan url link yang ingin sobat jadikan menu. dan ganti  judul link dengan judul lonk yang sobat inginkan. Contohnya : Link exchange.

seperti ini sob salah satu contohnya

<li><a href='http://acep-computer-science.blogspot.com/2012/11/pasang-iklan-di-blog-ini.html'>Link Exchange</a></li>

Kedelapan :
silakan simpan.

Jadi deh..
Cara membuat menu di atas header blog  ini sebenarnya mudah kalau sobat mau berusaha.
Nah, silakan mencoba ya sobat...
good luck! semoga tips yang saya berikan selalu bermanfaat buat sobat.
terimakasih ^_^