• Kxmadagascar
  • Cleventer-Creation™
  • Blog Johanes
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.

Leave a Reply

Subscribe to Posts | Subscribe to Comments

Labels

Saya

Foto Saya
Ku Membuat Blog Ini Agar Bisa Bermanfaat Bagi Semua Orang.

Statistik

Sparkline 2768885
Sparkline 2768885
- See more at: http://fajar-rahadyan.blogspot.com/2013/04/cara-memperbanyak-pengunjung-blog.html#sthash.ybIQVC8w.dpuf

Categories

My Facebook

Benner Friends

Link Sahabat

Translators

Gan mau tukar Link? Copy/paste kode di bawah ini ke blog kamu Gan!

Tips & Tutorial

Join My Group

>

My Banner

Recommend on Google

iklan

Recommend on Google
Semua Ini Karena Allah SWT Dan. Diberdayakan oleh Blogger.

Translate

Popular Posts

Followers

Follow

Blog Archive

Weekly most viewed

- Copyright © 2013 Kamikaze Prime - Powered by Blogger - Original Template By Johanes Djogan - Design By Muh Syaifullah Mhfdz - Some Right Is Reserved -