Cara Membuat Menu Dropdown Di Atas Header / Judul Blog

Salam buat sobat2 blogger semua. Kali ini saya ingin share tentang bagaimana Cara Menambah Satu Kolom Widget Di Atas Postingan Blog. Untuk mengetahui langkah-langkah nya, mari langsung aja ke tkp :

1. silahkan login akun blogger anda
2. klik menu template, edit html
3. centang expand template widget
4. paste kan code di bawah tepat di atas ]]></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. kemudian paste kan code di bawah ini tepat di bawah <div id='main-wrapper'>

---

<div id='top'>
<div id='top-wrap'>
<div class='topnav'>
<ul id='topnav'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='http://bangonces.blogspot.com/search/label/blackberry'>BlackBerry</a></li>
<li><a href='http://bangonces.blogspot.com/search/label/ngeblog'>Blog</a></li>
</ul>
</div>
</div>
<div style='clear: both;'/>
</div>

---

NB :
- ganti tulisan yang berwarna merah dengan url tujuan anda
- ganti tulisan yang berwarna biru dengan judul anda

7. klik simpan template , dan selesai ..

Gampang kan cara nya ,, gak susah2 kog :)

Posted in ngeblog