Hai Gan ketemu lagi ni,Kali ini saya akan meng-shared tentang Cara Membuat Menu Diatas Header Pada Blog. Kita bisa menaruh link lebih banyak lagi di blog, dan dari segi keindahan juga tampilan menu diatas header ini membuat blog kelihatan lebih menarik. Langsung saja karena script nya cukup panjang:
-Login ke akun Blogger anda:
-Klik Rancangan
-Edit HTML
-Centang Expand Template Widget
Cari kode ]]></b:skin> dan letakkan kode berikut diatasnya.
/*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;
}
cari lagi kode </head> dan letakkan kode brikut dibawahnya:
<div id='top'>
<div id='top-wrap'>
<div class='topnav'>
<ul id='topnav'>
<li><a href='url / link homepage '>home</a></li>
<li><a href='url / link 1'>Edit</a></li>
<li><a href='url / link 2'>Edit</a></li>
<li><a href='url / link 3'>Edit</a></li>
<li><a href='url / link 4'>Edit</a></li>
<li><a href='url / link 5'>Edit</a></li>
<li><a href='url / link 6'>Edit</a></li>
<li><a href='url / link 7'>Edit</a></li>
<li><a href='url / link 8'>Edit</a></li>
<li><a href='url / link 9'>Edit</a></li>
<li><a href='http://linuxituindah.blogspot.com/2014/06/cara-membuat-menu-diatas-header-pada.html'>+Get</a></li>
</ul>
</div></div>
<div style='clear: both;'/>
</div>
Setelah Selesai Save Dan View Blog,Dan Akan Muncul seperti:
<div style='clear: both;'/>
</div>
Setelah Selesai Save Dan View Blog,Dan Akan Muncul seperti:
