Cara membuat menu dropdown secara horizontal

Beberapa waktu yang lalu ada teman kita yang menanyakan cara membuat Tap Menu Horizontal Dengan Efek Dropdown pada blog ini. Jadi untuk menjawab pertanyaan tersebut tutorial kali ini akan saya bahas cara membuat Tap Menu Horizontal Dengan Efek Dropdown. Tap Menu Horizontal Dengan Efek Dropdown yang saya pasang pada blog ini cara membuatnya saya dapatkan dari tanya-tanya sama bah google terus dari bah google dikasih jawabannya dan alhamdulillah akhirnya jadi.

langkah-langkah untuk membuat Tap Menu Horizontal Dengan Efek Dropdown adalah sebagai berikut :

1. Login terlebih dahulu ke blog anda
2. Pilih Darsbor >Rancangan >Edit HTML

3. Download template lengkap terlebih dahulu untuk mengantisifasi kesalahan dalam editing template
4. Cari kode </head> gunakan tombol (ctrl+F) Atau F3 untuk memudahkan pencarian kode
5. Copas kode berikut diatas kode  </head>

<style type='text/css'>
#catmenucontainer{
height:29px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMKrQmwFvz7cQ1f4ES-E_fnHbLvGOn0MFmpOvKb1M03GJkAQbuRYDFN0seOvudG3kMCdfQsCp2brql3H_pdKmKLyOTkqQJbGr94CAVobD3HBkmJMFzsInJ-pPEGYgk0g1wnLeo-WsWGCPn/) repeat-x;
display:block;
padding:0px 0 0px 0px;
font: 14px &quot;Century gothic&quot;,verdana, Arial, sans-serif;
font-weight:normal;
border-top:1px solid #686D6F;
}

#catmenu ,#catmenu ul {
margin: 0px 5px;
padding: 0px;
list-style: none;
height:29px;
}

#catmenu  a {
color: #999;
display: block;
font-weight: normal;
padding: 4px 10px 6px 10px;
}

#catmenu  a:hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoqaR_BjDRRRdzBexJ7jy7zlBdh6vQnuXkeEHXAK8gU4yMi0sZnSyV5mEHdlpVebsM7KykwD1BYWYb_kqDLMqACPvcrIPwvkNSF9UpcxItEYMhC6JWZ8ldsWBQDWuWhLeJ5unEkbHFMgxm/) repeat-x;
color: #fff;
display: block;
text-decoration: none;
}

#catmenu  li {
float: left;
margin: 0px;
padding: 0px;
}

#catmenu  li li {
float: left;
margin: 0px 0px 0px 0px;
padding: 0px;
width: 130px;
}

#catmenu  li li a, #catmenu  li li a:link, #catmenu  li li a:visited {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMKrQmwFvz7cQ1f4ES-E_fnHbLvGOn0MFmpOvKb1M03GJkAQbuRYDFN0seOvudG3kMCdfQsCp2brql3H_pdKmKLyOTkqQJbGr94CAVobD3HBkmJMFzsInJ-pPEGYgk0g1wnLeo-WsWGCPn/) repeat-x;
width: 150px;
float: none;
margin: 0px;
padding: 4px 10px 5px 10px;
color:#E8EBEE;
border-bottom:1px solid #2C3133;
}

#catmenu  li li a:hover, #catmenu  li li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoqaR_BjDRRRdzBexJ7jy7zlBdh6vQnuXkeEHXAK8gU4yMi0sZnSyV5mEHdlpVebsM7KykwD1BYWYb_kqDLMqACPvcrIPwvkNSF9UpcxItEYMhC6JWZ8ldsWBQDWuWhLeJ5unEkbHFMgxm/) repeat-x;
width: 150px;
float: none;
margin: 0px;
padding: 4px 10px 5px 10px;
color:#fff;
border-bottom:1px solid #2C3133;
}

#catmenu  li ul {
position: absolute;
width: 10em;
left: -999em;
z-index:1;
}

#catmenu  li:hover ul {
left: auto;
display: block;
}

#catmenu  li:hover ul, #catmenu li.sfhover ul {
left: auto;
}
</style>

6. Simpan Template
7. Sekarang pilih Elemen halaman/layout >Tambah gadget

8. Copas kode berikut kedalam box HTML/JavaScript

<div id='catmenucontainer'>

<div id='catmenu'>

<ul>

<li><a href='URL ANDA' title='#'>Home</a></li>

<li><a href='URL ANDA' title='#'>Web Design</a>
<ul class='children'>
<li><a href='URL ANDA' title='#'>HTML</a></li>
<li><a href='URL ANDA' title='#'>CSS</a></li>
<li><a href='URL ANDA' title='#'>JavaScript</a></li>
</ul>
</li>

<li><a href='URL ANDA' title='#''>Templates</a>
<ul class='children'>
<li><a href='URL ANDA' title='#'>1 Column</a></li>
<li><a href='URL ANDA' title='#'>2 Column</a></li>
<li><a href='URL ANDA' title='#'>3 Column</a></li>
<li><a href='URL ANDA' title='#'>4 Column</a></li>
</ul>
</li>

<li><a href='URL ANDA' title='#'>Subscribe</a>
<ul class='children'>
<li><a href='URL ANDA' title='#''>Email</a></li>
</ul>
</li>

<li><a href='URL ANDA' title='#'>News</a></li>

<li><a href='URL ANDA' title='#'>Google</a>
<ul class='children'>
<li><a href='URL ANDA' title='#'>Yahoo</a></li>
<li><a href='URL ANDA' title='#'>MSN</a></li>
</ul>
</li>

<li><a href='URL ANDA' title='#'>About</a></li>

<li><a href='URL ANDA' title='#'>Contact</a></li>

<li><a href='URL ANDA' title='#'>PrivacyPolicy</a></li>

</ul>

</div>

</div>

Keterangan :
• URL ANDA : Silahkan anda ganti dengan alamat link anda
• title='#' : ganti tanda # dengan ( Target="_Blank)
9. Klik Simpan

<---- Terimakasih dan Semoga Bermanfaat ---->

Artikel Terkait