Cara membuat Menu bar
dan sub menu bar di blog termudah.
Berikut ini
langkah-langkah yang harus dilakukan :
Klik
Menu Desain
Pilih
Menu Template lalu pilih menu Edit HTML
Pilih/klik
menu Lanjutkan
Pilih/klik
menu Expand Template Widget
Cari scrift berikut :
<div class='main-outer'> atau
<div id='main-wrapper'> atau <div id='main'>
Agar lebih mudah, klik
saja ctrl+F pada keyboard lalu pilh salah satu scrift diatas. Berdasarkan
pengalaman saya setelah membolak balik informasi di www.google.com maka yang
cocok adalah :
div
class='main-outer'>.
Bisa jadi beda dengan
template yang lain…
Setelah dapat, copas
scrift berikut tepat diatas scrift yang dicari tadi :
<style>
/* -- Menu Horizontal +
Sub Menu-- */
#cat-nav
{background:#156994;margin:0 15px;padding:0;height:35px;}
#cat-nav a {
color:#eee; text-decoration:none; text-shadow: #033148 0px 1px
0px;border-right:1px solid #156994;}
#cat-nav a:hover {
color:#fff; }
#cat-nav li:hover {
background:#000; }
#cat-nav a span {
font-family:Verdana, Geneva, sans-serif; font-size:11px;
font-style:normal; font-weight:400; color:#fff; text-shadow:none;}
#cat-nav
.nav-description { display:block; }
#cat-nav a:hover span {
color:#fff; }
#secnav, #secnav ul {
position:relative; z-index:100; margin:0; padding:0; list-style:none;
line-height:1; background:#0d5e88; }
#secnav a {
font-family:Georgia, "Times New Roman", Times, serif;
font-style:italic; font-weight:700; font-size:14px; display:block; z-index:100;
padding:0 15px; line-height:35px; text-decoration:none;}
#secnav li {
float:left; width: auto; height:35px;}
#secnav li
ul { position: absolute; left: -999em; width: 200px; top:35px}
#secnav li ul
li { height:30px; border-top:1px solid #fff; }
#secnav li ul li
a { font-family:Verdana, Geneva, sans-serif; width:180px;
line-height:30px; padding:0 10px; font-size:11px; font-style:normal;
font-weight:400; color:#eee; }
#secnav li ul
ul { margin: -30px 0 0 180px; }
#secnav li:hover ul ul,
#secnav li:hover ul ul ul, #secnav li.sfhover ul ul, #secnav li.sfhover ul ul
ul { left:-999em; }
#secnav li:hover ul,
#secnav li li:hover ul, #secnav li li li:hover ul, #secnav li.sfhover ul,
#secnav li li.sfhover ul, #secnav li li li.sfhover ul { left: auto; }
#secnav
li:hover,#secnav li.hover { position:static; }
#cat-nav #secnav {width:100%;margin:0
auto;}
</style>
<div
id='cat-nav'>
<ul class='fl'
id='secnav'>
<li><a href='#'>Beranda</a></li>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a>
<ul
id='sub-custom-nav'>
<li><a href='#'>Sub Menu2a</a></li>
<li><a href='#'>Sub Menu2b</a></li>
</ul>
</li>
<li><a href='#'>Menu3</a>
<ul
id='sub-custom-nav'>
<li><a href='#'>Sub Menu3a</a></li>
<li><a href='#'>Sub Menu3b </a></li>
</ul>
</li>
<li><a href='#'>Menu4</a>
<ul
id='sub-custom-nav'>
<li><a href='#'>Sub Menu4a</a></li>
<li><a href='#'>Sub Menu4b </a></li>
</ul>
</li>
<li><a href='#'>Menu5</a></li>
</ul>
</div>
PENJELASAN :
Ganti tanda # (warna merah) dengan link/url yang anda
inginkan. Bisa jadi link posting atau label (katagori) yang ada pada blog anda.
Ganti
Tulisan warna biru dengan menu dan sub menu yang anda inginkan.
Setiap sub menu bisa
ditambah atau dikurangkan sesuai keinginan.
7. Setelah itu
klik Pratinjau dulu untuk memastikan scrift sudah benar . Lalu
simpanlah/save. Dan tutup edit HTML tersebut.
