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:

INTERNET

• SOFTWARE+Cara Ampuh Memperbaiki Flash Disk Tidak Terdeteksi
• Puluhan Aplikasi Android yang Wajib Terinstal
• CARA MENGHILANGKAN IKLAN SAAT BROWSING
• SkinPack Theme Windows 8 for Win 7/XP/Vista Free
• Cara Atasi Mozzila Firefox Lemot Not Responding
• Download AVG Antivirus ORIGINAL Free Gratis
• Download Internet Download Manager Terbaru Gratis
• Cara Mempercepat Koneksi Internet yang Lemot
• Cara Mengatasi/Mempercepat Mozilla Firefox Lemot
• Download AntiVirus SMADAV 2013 Rev 9.2 Terbaru!!
• Microsoft Office 2013 Free Download Full Version
• Nero 8 Free Download Full Version
• 7 Aplikasi & Game Terbaru 2013 yang Tak Boleh Dilewatkan!
• Cara Mempercepat Booting Windows 7 dengan BootRacer
• 12 Situs Pertemanan Asli Buatan Anak Indonesia
• 5 Game Horor yang Bikin Jantungan di 2013
• Grup Band Robot Mainkan Musik Metal. WOW!!
• Cara Pulihkan Akun Facebook yang Terinfeksi Autolike
• "Gold Messenger" Aplikasi Gratis Layaknya BBM
• Cara Pasang Lagu OTOMATIS di Blog saat dibuka
• Software Edit Foto Keren Terbaik
• 4 Software untuk Mengembalikan File yang Terhapus
• 3 Website Download Video Youtube Format 3gp
• Cara Membuat Artikel Terkait dengan Scroll
• DOWNLOAD VIDEO YOUTUBE FORMAT 3GP,FLV,MP4,dll TANPA SOFTWARE TANPA RIBET