Cara Membuat Menu Navigasi diatas Header Blog

Sore Sob,
   Dalam kesempatan kali ini saya memberikan cara bagaimana membuat menu diatas header blog.Oke tanpa panjang lebar ikuti langkah dibawah ini :
1. Login Blogger
2. Buka Menu Template
3. Pilih Edit HTML [Sebelum mengedit sebaiknya kamu Back Up dulu Template.dengan cara pilih Cadangkan/Pulihkan lalu Unduh Template lengkap]
4. Cari Kode ]]></b:skin>
5. Apabila sudah ketemu tempelkan kode dibawah ini tepat diatas kode ]]></b:skin>

/*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;
}

6. Setelah itu cari kode </head>

7. Apabila sudah ketemu tempelkan kode dibawah ini tepat dibawah kode </head>

<div id='top'>
<div id='top-wrap'>
<div class='topnav'>
<ul id='topnav'>
<li><a href='Alamat url Beranda '>home</a></li>
<li><a href='http://kudus-cyberblog.blogspot.co.id/'>Home</a></li>
<li><a href='http://kudus-cyberblog.blogspot.co.id/p/privacy-policy-for-kudus-blog-if-you.html'>Privacy</a></li>
<li><a href='http://kudus-cyberblog.blogspot.co.id/p/disclaimer.html'>Disclaimer</a></li>
<li><a href='http://kudus-cyberblog.blogspot.co.id/p/blog-page.html'>Sitemap</a></li>
</ul>
</div>
</div>
<div style='clear: both;'/>
</div>

Catt : 1. Ganti Kode warna Merah dengan URL tujuan kamu.

           2. Ganti Kode warna Hijau dengan Nama Menu kamu.

8. Simpan template atau melihat terlebih dahulu dengan menekan menu Pratinjau Template

    Mudahkan.Semoga Artikel Ini bermanfaat.

Tweet

Subscribe to receive free email updates: