Cara Membuat Multi Menu dan Sub Menu Blog

Kali ini saya akan membahas tentang cara membuat Menu dan Sub menu di blog, menu ini sangat bermanfaat di blog. Kegunaannya diantaranya ; dapat merampingkan Blog, maksudnya anda tidak perlu menmbah banyak menu / widget untuk link di side bar blog anda. Menu ini bisa dibuat dengan Multi Tab dan Multi Sub Menu. Untuk contohnya anda bisa Lihat di Blog Ini, silahkan arahkan kursor anda pada menu di atas untuk melihat Multi sub Menunya.

Oke berikut caranya untuk membuat Multi Tab Menu.

1. Login ke Blog anda.

2. Buka Rancangan / Design

3. Klik Edit HTML

4. Jangan lupa Centang " Expand Template Widget "

5. Copy code di bawah tepat di atas code ]]></b:skin>

#WadahMenu{background: transparent;height:40px;margin:0 auto; padding:0; font:bold 8px Arial,Tahoma,Verdana; text-decoration:none}
#Menu{margin:0; padding-top:3px; padding-left:3px}
#Menu ul{float:left; list-style:none; margin:0; padding:0; text-decoration:none}
#Menu li{list-style:none; margin:0; padding:0; text-decoration:none}
#Menu li a, #Menu li a:link, #Menu li a:visited{color:white;background:red; display:block;text-decoration:none;font-size:12px;font-weight:700;text-transform:uppercase;font-family:Arial, Helvetica, Sans-serif;text-shadow:0 1px 0 black;margin:0 0px 0 0;padding:9px 3px 9px;border-radius:12px 12px 12px 12px;width:79px;text-align:center;border:1px solid black;}
#Menu li a:hover, #Menu li a:active{background:black; color: white; border:1px solid black; text-decoration:none}
#Menu li li a, #Menu li li a:link, #Menu li li a:visited{background:red; width:150px; color:white;
text-transform:lowercase; float:none; margin:0; padding:7px 10px; border-bottom:1px solid #585858; border-left:1px solid #585858;
border-right:1px solid #585858; font:normal 14px Georgia,Times New Roman; text-decoration:none}
#Menu li li a:hover, #Menu li li a:active{background:black; color:white; padding:7px 10px; text-decoration:none}
#Menu li{float:left; padding:0; text-decoration:none}
#Menu li ul{z-index:9999; position:absolute; left:-999em; height:auto; width:170px; margin:0; padding:0; text-decoration:none}
#Menu li ul a{width:140px; text-decoration:none}
#Menu li ul ul{margin:-32px 0 0 171px}
#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}
#Cari{background:red;float:left;margin:0; padding-top:3px; padding-bottom:3px; ppadding-left:3px;padding-right:3px;border-radius:12px 12px 12px 12px;width:250px;text-align:center;border:1px solid black;}

6. Copy kode di bawah dan pastekan di bawah </header>

<div id="WadahMenu">
<script type="text/javascript">
function setAttributeOnload(object, attribute, val) {
if(window.addEventListener) {
window.addEventListener("load",
function(){ object[attribute] = val; }, false);
} else {
window.attachEvent('onload', function(){ object[attribute] = val; });
}
}
</script>
<ul id="Menu">
<li><a href="http://www.manrengat.co.cc/">Home</a></li>
<li><a href="http://www.manrengat.co.cc/">Daftar Isi</a></li>
<li><a href="">ARTIKEL</a>
<ul>
<li><a href="">Pendidikan--></a>
<ul>
<li><a href="http://www.manrengat.co.cc/">Artikel Pendidikan</a></li>
<li><a href="http://www.manrengat.co.cc">Software Pendidikan</a></li>
<li><a href="http://www.manrengat.co.cc">Silabus dan RPP</a></li>
</ul></li>
<li><a href="">Religi--></a>
<ul>
<li><a href="http://www.manrengat.co.cc">Artikel Islam</a></li>
<li><a href="http://www.manrengat.co.cc">Kisah Islam</a></li>
<li><a href="http://www.manrengat.co.cc">Keluarga Muslim</a></li>
<li><a href="http://www.manrengat.co.cc">Cantiknya Ilmu</a></li>
<li><a href="http://www.manrengat.co.cc">Puasa</a></li>
<li><a href="http://www.manrengat.co.cc">Keluarga Muslim</a></li>
</ul>
</li>
<li><a href="http://www.manrengat.co.cc">Makalah</a></li>
<li><a href="http://www.manrengat.co.cc">Ekonomi</a></li>
<li><a href="http://www.manrengat.co.cc">Kampungku</a></li>
<li><a href="http://www.manrengat.co.cc">MAN RENGAT</a></li>
<li><a href="http://www.manrengat.co.cc">Cerita Rakyat</a></li>
</ul>
</li>
<li><a href="">Ebook</a>
<ul>
<li><a href="http://www.manrengat.co.cc">Umum</a></li>
<li><a href="http://www.manrengat.co.cc">Religi</a></li>
<li><a href="http://www.manrengat.co.cc">Soal CPNS</a></li>
</ul>
</li>
</ul>
<div id='Cari'>
<form action='/search' id='searchthis' method='get'>
<input class='textfield' name='q' size='24' type='text' value=''/>
<input class='button' type='submit' value='Search'/>
</form>
</div>
</div>

Terkhir silahkan ganti http://www.manrengat.co.cc dengan Link yang anda suka.



thank's to Mas Eko

Related Post:

Mau artikel seperti Cara Membuat Multi Menu dan Sub Menu Blog langsung dikirim ke email? Silahkan masukkan Email Anda di bawah untuk berlangganan:

Masukkan Email di Sini: Lalu Konfirmasi di Email

Kami Menjamin Informasi Anda.