Cara Membuat Menu Navigasi di atas Header Blog

Posted by : Kamikaze Prime ™ Sabtu, 06 April 2013

Cara Membuat Menu Navigasi di atas Header Blog - Pada kesempatan kali ini, saya akan membahas tutorial Cara Membuat Menu Navigasi di atas Header Blog. Pasti banyak yang tidak tahu Bagaimana cara membuat menu navigasi yang berada tepat diatas header blog kita. Namun, banyak orang yang menggunakan template lain sehingga sudah tersedia menu navigasinya diatas headernya.

Contoh menu navigasi diatas header :

Nah, bagi sobat yang mau mempunyai menu diatas header seperti gambar diatas, sobat tinggal ikuti langkah - langkahnya dibawah ini :

1. Login ke Blogger sobat.

2. Pilih Menu Rancangan => Edit HTML => Centang Expand Template Widget

3. Cari kode ]]></b:skin> (Tekan Ctrl+f untuk mempermudah pencarian)

4. Silahkan sobat Copy+Paste kode dibawah ini tepat diatas kode ]]></b:skin>

#foxmenucontainer{
height:33px;
width:1000px;
margin:0 auto;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyhF2I2mC1fMIH4qMxj0onNWnauhsymrXvQhoMr4JdB4QlRXgKYSCzarbJ-z3Y7RgNHz_9UIJRbuBXYyxkIwGSC_D57-nlKAS6E2phbsQtngz1WhyXDCCx8DQO2kgm6pupubh5da55iIDd/) 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/AVvXsEgyhF2I2mC1fMIH4qMxj0onNWnauhsymrXvQhoMr4JdB4QlRXgKYSCzarbJ-z3Y7RgNHz_9UIJRbuBXYyxkIwGSC_D57-nlKAS6E2phbsQtngz1WhyXDCCx8DQO2kgm6pupubh5da55iIDd/) 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/AVvXsEh2NdhqJTUdurxU_vBk5wBtj5uRqjIOKkugEbTcXd2zf4B_AwkdbdVJGU5bczuWiqxiUV429dKW6ibM2xjV4tJUpvH3d5-DAZ7cPQSd1XMB-vj9iuh00Q-ww-Ukat9ixFn-ESmyoUPZeSha/) 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. Selanjutnya cari kode <div id='header-wrapper'>

6. Copy+Paste kode dibawah ini tepat diatas kode <div id='header-wrapper'>

<div id='foxmenucontainer'>
<div id='menu'>
<b><ul>
<li><a href='http://www.tutorial-blogz.blogspot.com/'>HOME</a></li>
<li class='dir'><a href='URLSOBAT'>Menu</a>
<ul>
<li><a href='URLSOBAT'>Direktori Menu 1</a></li>
<li class='dir'><a href='URLSOBAT'>Direktori Menu 2</a><ul><li><a href='URLSOBAT'>Sub Direktori Menu</a></li>
</ul></li></ul>
</li>
</ul></b>

7. Terakhir Klik Simpan Templete.