Cara Membuat Menu Drop Down ala Trik Komputer

Kali ini saya sedikit berbagi tentang  Cara Membuat Menu Drop Down ala Trik Komputer  yang telah di request oleh sahaba blogger  .Menu drop down dapat kita pasang di mana saja sesuka hati, Dengan di pasang menu  drop down pengunjung akan mudah mencari apa yang di inginkan..

Cara Membuat Menu Drop Down ala Trik Komputer :

1. Pertama anda harus login dulu di akun blog anda
2. Pilih rancangan / desing dan klik edit HTML dan lanjutkan
3. Centang "Expand Template Widget" untuk menghindari apabila terjadi kesalahan
4. Sobat cari kode ]]></b:skin> dan letakkan kode berikut tepat di atas kode ]]></b:skin>

.menu{
border:none;
border:0px;
margin-left:0px;
padding:0px;
font-size:13px;
text-align:center;
}
.menu ul{
background:#000000;
height:2px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
float:left;
padding:0px;
}
.menu li a{
background:#000000;
color:#80ff00;
display:block;
font-weight:normal;
line-height:30px;
margin:0px;
padding:0px 10px;
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a{
background: #212121;
color:#80ff00;
text-decoration:none;
}
.menu li ul{
background:#000000;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:180px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;
}
.menu li li {
display:block;
float:none;
margin:0px;
padding:0px;
width:180px;
}
.menu li:hover li a{
background:none;
}
.menu li ul a{
display:block;
height:30px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a{
background:#212121 center left no-repeat;
border:0px;
color:#80ff00;
text-decoration:none;
}
.menu p{
clear:left;
}
.breadcrumbs {
padding:8px 0px 10px 5px;
margin: 0px 0px 5px 0px;
font-size:88%;
border:1px dotted #7f7c7c;
}
.commenthidden {display:none}
.commentshown {display:inline}
.hotlink{
padding:8px 0px 10px 5px;
margin: 0px 0px 5px 0px;
font-size:100%;
border:1px solid #000000;
border-radius:5px;
background-color:#000000;
}

Selanjutnya sobat blogger cari kode berikut : <div id='outer-wrapper'> lalu pastekan kode berikut tepat di bawahnya,

Jika kode <div id='outer-wrapper'> tidak ketemu, coba anda cari kode berikut :
<header>  : untuk menempatkan menu di atas nama blog
</header> : untuk menempatkan menu di bawah nama blog
Copy kode di bawah ini dan letakkan tepat di atas kode <header> atau di bawah kode </header>

<div class='menu'>
<ul>
<li><a href='http://www.trikkomputer.com/'>HOME</a>
<ul>
<li><a href='http://184.170.129.2:2082/logout/?locale=en'>HOSTING</a></li>
<li><a href='http://www.idwebspace.com/index.php'>DOMAIN</a></li>
</ul></li>
<li><a href='http://www.trikkomputer.com/2011/02/daftar-isi.html'>DAFTAR ISI</a></li>
<li><a href='http://www.trikkomputer.com/search/label/Info%20IT'>Content</a>
<ul>
<li><a href='https://www.facebook.com/sunu.MC'>My Facebook</a></li>
<li><a href='http://www.trikkomputer.com/2012/04/my-inspiration.html'>My Inspiration</a></li>
<li><a href='http://www.trikkomputer.com/2011/03/silahkan-hubungi-saya-di-sini.html'>Hubung Saya</a></li>
<li><a href='http://www.trikkomputer.com/2011/12/jasa-buat-blog-siap-pakai.html'>Jasa Pembuatan Blog</a></li>
<li><a href='http://www.trikkomputer.com/2010/03/sms-gratis-by-trik-komputer.html'>SMS Gratis</a></li>
<li><a href='http://scele.teknokrat.ac.id/'>Materi Kuliah</a></li>
<li><a href='#'>Tugas Kuliah</a></li>
</ul></li>
<li><a href='http://www.trikkomputer.com/search/label/Info%20IT' target='_blank'>INFO IT</a></li>
<li><a href='http://www.trikkomputer.com/search/label/Download'>DOWNLOAD</a>
</li>
<li><a href='#'>TIPS N TRIK</a>
<ul>
<li><a href='http://www.trikkomputer.com/search/label/Trik%20Registry'>Trik Registry</a></li>
<li><a href='http://www.trikkomputer.com/search/label/Trik%20dan%20Tips'>Computer</a></li>
<li><a href='http://www.trikkomputer.com/search/label/Trik%20Blogger'>Blogger</a></li>
<li><a href='http://www.trikkomputer.com/search/label/Trik%20Facebook'>Facebook</a></li>
<li><a href='http://www.trikkomputer.com/search/label/Trik%20Gmail'>Trik Gmail</a></li>
<li><a href='http://www.trikkomputer.com/search/label/Patch%20dan%20Crack'>Hacking</a></li>
</ul></li>
<li><a href='#'>GADGET</a>
<ul>
<li><a href='http://www.trikkomputer.com/search/label/Android'>Android</a></li>
<li><a href='http://www.trikkomputer.com/search/label/BlackBerry'>BlackBerry</a></li>
<li><a href='http://www.trikkomputer.com/search/label/Nokia'>Nokia</a></li>
</ul></li>
<li><a href='#'>WINDOWS</a>
<ul>
<li><a href='http://www.trikkomputer.com/search/label/Windows%207'>Windows 7</a></li>
<li><a href='#'>Windows Vista</a></li>
<li><a href='#'>Windows XP</a></li>
</ul></li>
<li><a href='#'>PARTNER LINK</a>
<ul>
<li><a href='http://www.remo-xp.com/'>Remo-XP</a></li>
<li><a href='http://filehippo.com/'>Filehippo</a></li>
<li><a href='http://www.softpedia.com/'>Softpedia</a></li>
</ul></li>
<li><a href='#'>THEMES</a>
<ul>
<li><a href='#'>Windows 7</a></li>
<li><a href='#'>Windows XP</a></li>
</ul></li>
<li><a href='http://quranflash.com/en/quranflash.html'>AL-QUR'AN</a></li>
<li><a href='http://www.trikkomputer.com/2011/01/pasang-iklan-murah-untuk-bisnis-dan.html'>PASANG IKLAN</a></li>
</ul>
</div>

Keterangan:
Kode berwarna hijau adalah Url tujuan, silakan anda ganti dengan Url pada blog anda
Kode berwarna Biru adalah kalimat yang tampil pada menu dropdown, Silakan anda sesuaikan.

Demikianlah Cara Membuat Menu Drop Down ala Trik Komputer, semoga bermanfaat.....!!.

Di tulis olah : Sunu Eiko Nurcahya
jejak-harput.blogspot.com
Harap tinggalkan kritik dan saran anda tentang artikel di atas....!! Terima kasih.