Home / Trik dan Tips Blog / Cara Membuat Menu Diatas Header

Cara Membuat Menu Diatas Header

Posted by Unknown Jumat, 02 Desember 2011 0 komentar

Kali ini saya akan share tips cara membuat menu diatas header seperti blog BIT-XP ini. Jika sobat blogger tidak mempunya menu pada template blog anda tidak usah khawatir, karena saya akan memberikan tips membuatnya. Untuk Remix-7 dan sobat blogger yang sudah request langsung dicek aja...

Sebelum itu apa sih menu itu? itu loh yang ada diatas header BIT-XP ini....

Kalau gak jelas liat tulisan HOME... itu yang dimaksud menu menurut saya :P. jangan basa-basi lagi deh langsung saja.....

1.Login Blogger

2.Masukan Rancangan >> Klik Edit HTML >> Centang Expand Template Widget.

3.Cari code "]]></b:skin>".

4.Setelah ketemu pastekan kode dibawah ini diatas kode "]]></b:skin>"

#foxmenucontainer{
height:33px;
width:1000px;
margin:0 auto;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc0kRghDsiayx7RkA1mobL3wScIWOje9861e2p0xlBRoEmXKLBg_NsjUPNjlF_nLrt3GPq9dc2cu1ADTkLVLf8EByT0VDOM-l5M1JEozZKlrc2On9EOKQsJ2-X6HIq30x625D6il25xczC/) repeat-x;
display:block;
padding:0px 0 0px 0px;
font-size: 13px;
font-family:"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif;
font-weight:normal;
text-transform:uppercase;
}
#menu{
margin: 0px;
padding: 0px;
width:1000px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc0kRghDsiayx7RkA1mobL3wScIWOje9861e2p0xlBRoEmXKLBg_NsjUPNjlF_nLrt3GPq9dc2cu1ADTkLVLf8EByT0VDOM-l5M1JEozZKlrc2On9EOKQsJ2-X6HIq30x625D6il25xczC/) repeat-x;
height:33px;
}
#menu ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}
#menu li {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}
#menu li a, #menu li a:link, #menu li a:visited {
color: #74DF00;
display: block;
margin: 0px;
padding: 10px 15px 9px 15px;
}
#menu li a:hover, #menu li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7mPGA6sHcZpnEeUNiIyKJ5k3PzL_RY866fs78l-PNKg3aAVfTkNSW9BfjruGbHbmbvop3UlZ2b-9NDgHGZeWBhZYqeLN9tS5zWnJidmkNPpODaDGFuFbiMwxuLMJUQVdJEIcz4aRSUgJD/) repeat-x;
color: #74DF00;
margin: 0px;
color: #ffffff;
padding: 10px 15px 9px 15px;
text-decoration:none;
}
#menu li li a, #menu li li a:link, #menu li li a:visited {
background:#000000;
width: 150px;
color: #74DF00;
font-size: 13px;
font-family: tahoma, century gothic,Georgia, sans-serif;
font-weight: normal;
float: none;
margin: 0px;
padding: 8px 10px 7px 10px;
border-bottom: 1px solid #282828;
}
#menu li li a:hover, #menu li li a:active {
background: #121212 ;
-moz-border-radius:6px; border-radius:6px;
color: #ffffff ;color:#80ff00; text-decoration:none;
padding: 8px 10px 7px 10px;
}
#menu li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0px;
padding: 0px;
}
#menu li li {
}
#menu li ul a {
width: 140px;
}
#menu li ul a:hover, #menu li ul a:active {
}
#menu li ul ul {
margin: -32px 0 0 170px;
}
#menu li:hover ul ul, #menu li:hover ul ul ul,
#menu li.sfhover ul ul, #menu li.sfhover ul ul ul {
left: -999em;
}
#menu li:hover ul, #menu li li:hover ul,
#menu li li li:hover ul, #menu li.sfhover ul,
#menu li li.sfhover ul, #menu li li li.sfhover ul {
left: auto;
}
#menu li:hover, #menu li.sfhover {
position: static;
}

5.Jika sudah cari kode "<div id='header-wrapper'>"
6.Kemudian Copy/Paste kode dibawah ini diatas kode "<div id='header-wrapper'>"

<div id='foxmenucontainer'>
<div id='menu'>
<b><ul>
<li><a href='http://www.rizkyariff.blogspot.com/'>HOME</a></li>
<li class='dir'><a href='http://www.url/link kamu.com/'>Menu</a>
<ul>
<li><a href='http://www.url/link kamu.com/'>Direktori Menu 1</a></li>
<li class='dir'><a href='http://www.url/link kamu.com/'>Direktori Menu 2</a><ul><li><a href='http://www.url/link kamu.com/'>Sub Direktori Menu</a></li>
</ul></li></ul>
</li>
</ul></b>
</div></div>

7.Simpan deh...

Silahkan ganti tulisan bewarna merah dengan url/link blog kamu.

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul: Cara Membuat Menu Diatas Header
Ditulis oleh Unknown
Rating Blog 5 dari 5

Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi artikel ini harap menyertakan link dofollow ke https://azharadzuan.blogspot.com/2011/12/cara-membuat-menu-diatas-header.html. Terima kasih sudah singgah membaca artikel ini.