Kamis, 03 April 2014

MEMBUAT MENU Di ATAS HEADER BLOG

DEAR DAPZerez
Kali ini MrDAPz akan memberi tahu cara membuat menu diatas header blog  pilihan menu diatas header ini membuat blog kelihatan lebih menarik. Langsung saja karena script nya cukup panjang:
-Login ke akun . Kita bisa menaruh link lebih banyak lagi di blog, dan dari segi keindahan juga tamBlogger anda
Tentu Saja Langkah-Langkah di Bawah ini sudah Di Check dan Di Coba oleh MrDAPz jadi cukup aman dan Ter-Verifikasi:

-Klik Template
-Edit HTML
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'>judul link</a></li>
<li><a href='url / link 2'>judul link</a></li>
<li><a href='url / link 3'>judul link</a></li>
<li><a href='url / link 4'>judul link</a></li>
</ul>
</div>
</div>
<div style='clear: both;'/>
</div>

Setelah itu simpan template dan contoh hasilnya akan seperti gambar dibawah ini.
menu diatas header blog

0 komentar:

Posting Komentar