1. Login pada blogger
2. masuk ke halaman Template
3. Edit HTML lalu Lanjutkan
4. Klik centang pada Expand Template Widget
5. Cari kode ]]></b:skin> (gunakan ctrl+f)
6. Pasang kode di bawah ini di atas kode ]]></b:skin>
#navbarmenu{width:930px; float:left; font-size:12px; color:#FFF;
font-weight:bold; margin:0 auto; padding:0 auto}
#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; background:none}
#nav li a, #nav li a:link, #nav li a:visited{color:#992211;
display:block; font-weight:normal; text-transform:normal; margin:0;
padding:5px 15px 5px}
#nav li a:hover{background:#4a4d4c; color:#FFF; margin:0;
-moz-border-radius:8px; padding:5px 15px 5px; text-decoration:none}
#nav li li a, #nav li li a:link, #nav li li
a:visited{background:#FFF; -moz-border-radius:8px; width:150px;
color:#992211; font-weight:normal; text-transform:normal; float:none;
margin:0; padding:5px 10px 5px 15px; border-bottom:1px solid #4a4d4c;
border-left:1px solid #4a4d4c; border-right:1px solid #4a4d4c}
#nav li li a:hover{background: #4a4d4c; color:#FFF; padding:5px 10px
5px 15px}
#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:-25px 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}
7. Selanjutnya cari kode <div id="content-wrapper">
8. Pasang kode di bawah ini di Atas kode yang bercetak tebal pada no 7
<div id='menu'>
<div id='menu-wrap'>
<div id='navbarmenu'>
<ul id='nav'>
<li><a href="
http://reivandyalvitto.blogspot.com">
Home</a></li>
<li><a href="
http://reivandyalvitto.blogspot.com/search/label/artikel">
Artikel</a>
<ul>
<li><a href="
http://istiawanblog.blogspot.com/search/label/tips%20karir">
Tips Karir</a></li>
<li><a href="
http://reivandyalvitto.blogspot.com/search/label/kesehatan">
Kesehatan</a></li>
</ul>
</li>
<li><a href="
http://reivandyalvitto.blogspot.com/search/label/tutorial">
Tutorial Blog</a></li>
</ul>
</div>
9. Simpan Template dan lihat hasilnya
Keterangan :
- Ganti tulisan yang berwarna Merah dengan url link menubar yang diinginkan, misal: link postingan, link kategori, link halaman statis atau lainnya
- Ganti tulisan berwarna Biru dengan tulisan judul menubar tersebut, seperti: Home, Artikel, Tutorial atau lainnya
Title : Cara Mudah Membuat Menubar dan Sub Menu Blog
Description : Cara Mudah Membuat Menubar dan Sub Menu Blog - Setelah kemarin saya membuat postingan tentang bagaimana Cara Mudah Membuat Menubar dan...
