Hallo sahabat blogger diseluruh dunia...apa kabarnya semua..semoga kagar baik ya untuk anda..kali ini sang blogger newbie akan berbagi tenatang sebuah cara membuat menu dropdown diatas header blog kita..biasanya menu dropdown ini terpasang dibagian bawah hearder namun kali ini blogger newbie ingin menaruhnya diatas header...semoga bermanfaat dan silahkan disimak
Dibawah ini adalah langkah-langkah untuk membuat menu dropdown diatas header tersebut
1. Silahkan login ke dasbord blogger anda
2.Klik Menu template dan klik edit HTML
3. Centang expand template widget
4. Cari kode ]]></b:skin>
5.Pastekan kode ini tepat diaatas kode diaatas ]]><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;
}
#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 Temukan juga kode seperti ini <div id='main-wrapper'>
7 Pastekan kode skrip dibawah ini tepat dibawahnya
<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://bout-seostrategies.blogspot.com/search/label/blackberry'>BlackBerry</a></li>
<li><a href='http://bout-seostrategies.blogspot.com/search/label/ngeblog'>Blog</a></li>
</ul>
</div>
</div>
<div style='clear: both;'/>
</div>
<div id='top-wrap'>
<div class='topnav'>
<ul id='topnav'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='http://bout-seostrategies.blogspot.com/search/label/blackberry'>BlackBerry</a></li>
<li><a href='http://bout-seostrategies.blogspot.com/search/label/ngeblog'>Blog</a></li>
</ul>
</div>
</div>
<div style='clear: both;'/>
</div>
Gunakan CTRL + F untuk mempermudah pencarian
- ganti tulisan yang berwarna merah dengan url tujuan anda
- ganti tulisan yang berwarna biru dengan judul anda
7. klik simpan template , dan selesai ..
Nah demikianlah cara Membuat Menu Dropdown Diatas header semoga informasi ini bermanfaat untuk anda
Salam blogger Newbie