Cara Membuar Menu Pada Blog

Cara membuat Menu Diatas Header Blog

KALI INI Pertanyaan sederhana dari sobat saya "Mencintai dengan sederhana" yaitu bagaimana cara membuat menu diatas header blog seperti yang saya gunakan. Nah, untuk menjawab pertanyaan sobat saya tuang saja kedalam postingan berikut.

Tekniknya sederhana yaitu dengan menambahkan CSS code dan elemen class. Berikut ulasannya.

Langkah #1

Login ke dasbor blog
Masuk ke menu template
Lalu cari kode ]]></b:skin>
Letakkan kode CSS berikut diatas ]]></b:skin>

 /*The top Menu masterendicom*/
#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 masterendicom*/
#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;
}

Langkah #2

Masih di menu editan template, cari kode </head>
Letakkan elemen berikut dibawah </head>

  <div id='top'>
<div id='top-wrap'>
<div class='topnav'>
<ul id='topnav'>
<li><a href='http://realmeity.blogspot.com'>Home</a></li>
<li><a href='http://http://realmeity.blogspot.com/search/label/FAKTA MENARIK'>FAKTA MENARIK</a></li>
<li><a href='http://realmeity.blogspot.com/search/label/BERITA POPULER'>BERITA POPULER</a></li>
<li><a href='http://http://realmeity.blogspot.com/search/label/DOWNLOAD LAGU'>TV  ONLINE</a></li>
<li><a href='http://http://realmeity.blogspot.com/search/label/TV ONLINE'>TV ONLINE</a></li>
</ul>
</div>
</div>
<div style='clear: both;'/>

Keterangan:
Ganti URL dan titlenya sesuai dengan URL aaanda sendiri.
Save lihat hasilnya

Artikel Terkait: