Cara Membuat Menu Diatas Header

Posted by Gani Mugni 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(http://3.bp.blogspot.com/_4HKUHirY_2U/S6OHfCKB-nI/AAAAAAAAA0E/ef3xR6T6-Z8/menu.png) 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(http://3.bp.blogspot.com/_4HKUHirY_2U/S6OHfCKB-nI/AAAAAAAAA0E/ef3xR6T6-Z8/menu.png) 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(http://2.bp.blogspot.com/_4HKUHirY_2U/S6OHfQT3SRI/AAAAAAAAA0M/crCHdEF7C9k/menua.png) 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 Gani Mugni
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 http://azharadzuan.blogspot.com/2011/12/cara-membuat-menu-diatas-header.html. Terima kasih sudah singgah membaca artikel ini.

0 komentar:

Posting Komentar

Panduan blog dan SEO support Jual Online Baju Wanita - Original design by Bamz | Copyright of Azhara Blog.