Cara Membuat Menu Drop Down Horizontal Dibawah Header Blog

Oleh Ahmad Suryani

Tuesday 20 December 2011

Bagikan :

Tweet

1. Login Ke akun Blog Sobat 
2. Pada Halaman Dasbor Sobat Pilih  Rancangan/Tata Letak/Design --> Edit HTML 
3. Cari Kode ]]></b:skin> (Tekan CTRL F/F3 untuk Mempermudah Pencarian) 
4. Masukan Kode Berikut Tepat Diatas Kode ]]></b:skin

#tejahtc{ height:33px; width:1000px; margin:0 auto; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoayfIGMHSOW41MgpV2WDow_t2NWSpWryaOzvLtBzuLfx2xRpZNey9mWbxX05w2PSrv2u9YDEnGvUMlbZgAxIlODLmrP1w4D7I8zxpVVMJllXO8utyGzha1yo6mxelO7rWfl2XB4O-P1wk/) repeat-x; display:block; padding:0px 0 0px 0px; font-size:12px; font-family:"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif; font-weight:normal; border-top:1px solid #252424; } #tejas{ margin: 0px; padding: 0px; width:1000px; background:#252525 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoayfIGMHSOW41MgpV2WDow_t2NWSpWryaOzvLtBzuLfx2xRpZNey9mWbxX05w2PSrv2u9YDEnGvUMlbZgAxIlODLmrP1w4D7I8zxpVVMJllXO8utyGzha1yo6mxelO7rWfl2XB4O-P1wk/) repeat-x; height:33px; } #tejas ul { float: left; list-style: none; margin: 0px; padding: 0px; } #tejas li { float: left; list-style: none; margin: 0px; padding: 0px; } #tejas li a, #tejas li a:link, #tejas li a:visited { color: #fae7df; display: block; margin: 0px; padding: 9px 10px 10px 10px; } #tejas li a:hover, #tejas li a:active { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt3w_8EGPX2UnMp61xTTeVZM5lUcpTtaF1ItcoXlEY-FuMGNlOJ306a0uNSwyu-hF3_he4YLUceJhXn5gJRvPnPGbLjxzHK6w4nHoJr7KkBuLBJ8maGuACVCbXCCxlrwFS63NWjO1p3bNT/) repeat-x; color: #fff; margin: 0px; padding: 9px 10px 10px 10px; text-decoration: none; } #tejas li li a, #tejas li li a:link, #tejas li li a:visited { background:#ED4A05; width: 150px; color: #fae7df; font-family:Tahoma,century gothic,Georgia, sans-serif; font-weight: normal; float: none; margin: 0px; padding: 9px 10px 10px 10px; border-bottom: 1px solid #FF7800; } #tejas li li a:hover, #tejas li li a:active { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt3w_8EGPX2UnMp61xTTeVZM5lUcpTtaF1ItcoXlEY-FuMGNlOJ306a0uNSwyu-hF3_he4YLUceJhXn5gJRvPnPGbLjxzHK6w4nHoJr7KkBuLBJ8maGuACVCbXCCxlrwFS63NWjO1p3bNT/) repeat-x; color: #fff; padding: 9px 10px 10px 10px; } #tejas li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0px; padding: 0px; } #tejas li li { } #tejas li ul a { width: 140px; } #tejas li ul a:hover, #tejas li ul a:active { } #tejas li ul ul { margin: -34px 0 0 170px; } #tejas li:hover ul ul, #tejas li:hover ul ul ul, #tejas li.sfhover ul ul, #tejas li.sfhover ul ul ul { left: -999em; } #tejas li:hover ul, #tejas li li:hover ul, #tejas li li li:hover ul, #tejas li.sfhover ul, #tejas li li.sfhover ul, #tejas li li li.sfhover ul { left: auto; } #tejas li:hover, #tejas li.sfhover { position: static; }

5.Setelah itu copy kode dibawah ini dan paste tepat dibawah kode <div id='content-wrapper'>

<div id='tejahtc'>
<div id='tejas'>

<ul>
<li><a href='http://NAMA LINK BLOG ANDA/'>Home</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1</a>
<ul class='children'>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1-1</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1-2</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1-3</a></li>
</ul>
</li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2</a>
<ul class='children'>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-1</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-2</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-2</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-3</a></li>
</ul>
</li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-3</a>
<ul class='children'>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-3-1</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-3-2</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-3-3</a></li>
</ul>
</li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-4</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-5</a>
<ul class='children'>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-5-1</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-5-2</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-5-3</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-5-4</a></li>
</ul>
</li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-6</a>
<ul class='children'>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-6-1</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-6-2</a></li>
</ul>
</li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-7</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-8</a></li>
</ul>

</div>
</div>


<div class='clear'/>

6.Simpan Templatenya Dan Lihat Hasilnya

~ Selamat Mencoba Semoga Berhasil ~

Tag : Trik blog