1. Login ke Blogger.
2. Pilih Edit Tamplate
3. pilih Edit HTML
4. cari kode
]]></b:skin>
5. Silakan anda copy kode di bawah ini :
/* ----- NAVBAR MENU ----- */
#NavbarMenu {
width: 780px;
height: 30px;
background:#99C9FF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGj5QspGvG_g2lXOQAeFXs56T2NMQe8ATdwXmn5yLZExX36Lmrs3DsISChMfhE3eZCjZoKKVKf8brO3RIkShT3EBQpaoPz048amjkuY-fNvBw13LhFEPTNvA3Y_85585g4oAuVjOf5u2NO/s800/navbar.gif) repeat-x top;
color: #3D81EE
margin: 0 auto 0;
padding: 0;
font: bold 11px Arial, Tahoma, Verdana;
border-top: 1px solid #AFAFAF;
border-bottom: 1px solid #FFFFFF;
}
#NavbarMenuleft {
width: 680px;
float: left;
margin: 0;
padding: 0;
}
#nav {
margin: 0;
padding: 0;
}
#nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#nav li {
list-style: none;
margin: 0;
padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: #3D81EE;
display: block;
text-transform: capitalize;
margin: 0;
padding: 9px 15px 8px;
font: normal 14px ARIAL;
}
#nav li a:hover, #nav li a:active {
background:#99C9FF;
color: #3D81EE;
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #3D81EE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGj5QspGvG_g2lXOQAeFXs56T2NMQe8ATdwXmn5yLZExX36Lmrs3DsISChMfhE3eZCjZoKKVKf8brO3RIkShT3EBQpaoPz048amjkuY-fNvBw13LhFEPTNvA3Y_85585g4oAuVjOf5u2NO/s800/navbar.gif) repeat-x top;
width: 150px;
color: #000;
text-transform: lowercase;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 1px solid #99C9FF;
border-left: 1px solid #99C9FF;
border-right: 1px solid #99C9FF;
font: normal 15px,;
}
#nav li li a:hover, #nav li li a:active {
background: #99C9FF;
color: #3D81EE;
padding: 7px 10px;
}
#nav li {
float: left;
padding: 0;
}
#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}
#nav li ul a {
width: 140px;
}
#nav li ul ul {
margin: -32px 0 0 171px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav
li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav
li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
position: static;
}
6. Simpan di atas kode ]]></b:skin>
catatan :
- pada text yang berwarna hijau di atas sesuaikanlah dengan lebar tamplate yang anda gunakan
- pada text yang berwarna orange di atas biarkan saja
Selanjutnya Kamu Ke Rancangan Laman Trus Tambah Gadget Pilih java/html Trus Copy Code Di Bawah Ini
<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='Link-Kamu'>Tentang Kami</a>
<ul>
<li><a href='Link-Kamu'>Sejarah Perusahaan</a></li>
<li><a href='Link-Kamu'>Profil Perusahaan</a></li>
<li><a href='Link-Kamu'>Struktur Organisasi</a></li>
<li><a href='Link-Kamu'>Hubungi Kami</a></li>
</ul>
</li>
<li><a href='Link-Kamu'>Komputer</a></li>
<li><a href='Link-Kamu'>Hardware</a></li>
<li><a href='http://asksalman19.blogspot.com/search/label/Download%20Software'>Software</a>
<ul>
<li><a href='http://asksalman19.blogspot.com/search/label/Anti%20Virus'>Antivirus</a></li>
<li><a href='Link-Kamu'>Download MP3</a></li>
<li><a href='Link-Kamu'>Desktop Enhancements</a></li>
<li><a
href='http://asksalman19.blogspot.com/2010/01/pembuat-banner-animasi-webblog.html'>Software
Pembuat Banner</a></li>
<li><a href='#'>Internet</a>
<ul>
<li><a href='http://asksalman19.blogspot.com/search/label/Internet'>Dial-Up n Connectivity</a></li>
<li><a href='http://asksalman19.blogspot.com/search/label/Utility%20Tool'>Security and Spyware</a></li>
<li><a href='http://asksalman19.blogspot.com/search/label/Utility Tool'>Peralatan</a></li>
</ul>
</li>
<li><a href='Link-Kamu'>System Tools</a></li>
<li><a href='Link-Kamu'>Others</a></li>
</ul>
</li>
<li><a href='Link-Kamu'>Template</a>
<ul>
<li><a
href='http://hyperjadulz.blogspot.com/search/label/New%20Blogger%20Template'>New
Blogger Template</a></li>
<li><a href='Link-Kamu'>Classic Template</a></li>
</ul>
</li>
<li><a href='#'>Tutorial</a>
<ul>
<li><a href='http://asksalman19.blogspot.com'>Belajar Komputer</a></li>
<li><a href='http://asksalman19.blogspot.com/search/label/Tips Blog'>Belajar Blogspot</a></li>
<li><a
href='http://asksalman19.blogspot.com/2009/09/tutorial-mudah-blog.html'>Tutorial
Mudah Blog</a></li>
</ul>
</li>
<li><a
href='/feeds/posts/default'><img
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpL8tAo0pk_nsANZt-Kyn0MIUGvEY6yDdaR1piwkfzw5ojM3EcUk7OVwgyboUH_DpEjTZ0FLQXzwFvYttmxKf4YmKzM_-8-i90Endokb2GF3hMdMvBVqopFwrlMBpNm2CJhUDjWs3wpEs/s1600/rss.gif'
style='vertical-align:middle'/> RSS Feeds</a></li>
</ul>
</div>
</div> <!-- end navbar -->>
</div>
<body>
Simpan
Add to Cart »