Banyak kita liat blog-blog yg menggunakan menu drop Horizontal,seperti yang terpampang dibagian atas
dibawah tasbar dan kali ini saya akan membagi pengalaman,
langsung aja ke
Langkah-langkah cara pembuatan sbb :

1. Masuk ke akun Blogger Anda.

2. Klik Rancangan > Edit HTML.

3. Klik Download Template Lengkap untuk membuat salinan template. Hal ini untuk mengantisipasi jika nanti terjadi kesalahan dalam pengeditan kita dapat dengan mudah mengembalikan template ke seperti semula.

4. Cari (CTRL+F) kode " ]]></b:skin> " lalu Copy script dibawah ini dan Paste-kan diatasnya :

#bg_nav {
background: #FCF526; /* warna background dasar */
width: 760px; /* Panjang dari kotak menu dasar */
height: 29px;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
color: #000000;
font-weight: 28px;
margin: 0px auto 0px;
padding: 0px;
overflow: hidden;
-moz-border-radius:0px;
}

#bg_nav a, #bg_nav a:visited { /* bagian script yang ini dibiarkan saja ya */
color: #ffffff;
font-size: 11px;
text-decoration: none;
text-transform: uppercase;
padding: 0px 0px 0px 0px;
}

#bg_nav a:hover { /* bagian script yang ini dibiarkan saja ya */
color: #ffffff;
text-decoration: underline;
padding: 0px 0px 0px 0px;
}

#navleft {
width: 760px;
color: #FFFFFF;
float: left;
margin: 0px;
padding: 0px;
}

#nav {
margin: 0px;
padding: 0px;
list-style: none;
}

#nav ul {
margin: 0px;
padding: 0px;
list-style: none;
}

#nav a, #nav a:visited { /* Menu Utama */
background: #FCF526; /*warna latar menu utama */
color: #053EFA; /*warna teks menu utama */
text-shadow: 4px 4px 4px #aaa; /* Memberi efek bayangan di teks */
display: block;
height: auto;
width: auto;
font-weight: bold;
margin: 0px auto 0px;
-moz-border-radius:0px;
padding: 8px 15px 8px 15px;
opacity: 0.7;filter:alpha(opacity=70);zoom:1;
}

#nav a:hover {
background: #F7F68F; /*warna hover di Menu Utama*/
color: #3854F2; /* warna teks di menu drop-down n teks hover MU*/
margin: 0px auto 0px;
font-weight: bold;
padding: 8px 15px 8px 15px;
text-decoration: none;
-moz-border-radius:0px;
opacity: 0.7;filter:alpha(opacity=70);zoom:1;
}

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

#nav li li {
float: left;
margin: 0px;
padding: 0px;
width: 300px;
}

#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #F7F68F; /*warna latar menu drop-down*/
width: 200px;
float: none;
margin: 0px;
padding: 7px 30px 7px 10px;000000;
}

#nav li li a:hover, #nav li li a:active {
background: #F8FABB; /*warna hover menu drop-down*/
padding: 7px 30px 7px 10px;
}

#nav li ul {
position: absolute;
width: 10em;
left: -999em;
}

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

#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}

#nav li ul a {
width: 100px;
}

#nav li ul ul {
position: absolute;
margin: -30% 0 0 95%;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left:-999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left:auto;
}

#nav li li li.sfhover ul {
left:auto;
}

#nav li:hover, #nav li.sfhover {
position:static;
}

/* eleman dibawah header */
#under_header{
margin:-20px 0 25px 0px;
padding:1%;
height;0px;
width:98%;
}

5. Cari (CTRL+F) kode " <div id='header-wrapper'> " lalu Copy script dibawah ini setelah kode " </div> " :

Atau ( Jika tidak ada kode header-wrapper ).. Cari (CTRL+F) kode " <body> " lalu Copy script dibawah ini setelahnya :

<div id='under_header'>
<b:section class='header' id='underheader' preferred='yes'/>
<div id='bg_nav'>
<div id='navleft'>
<div id='nav'>
<ul>

<li><a href='http://galan-fuji.blogspot.com/'> Rumah</a></li> 
<li><a href='#' target='_blank'> Ilmu</a>
<ul>  

<li><a href='http://quran.insanislam.com' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Al-Quran</a></li>

<li><a href='http://ilmukomputer.com' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Computer</a></li>

</ul></li>
<li><a href='#' target='_blank'> Blogging</a>
<ul>

<li><a href='http://www.blogger.com' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Login blogger</a></li>

<li><a href='http://galan-fuji.blogspot.com/search/label/cinta' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Cinta & Hati</a></li>

</ul>

<li><a href='#' target='_blank'> Download/Upload</a>

 <ul>

<li><a href='http://messenger.yahoo.com/download' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Yahoo</a></li>
<li><a href='http://www.skype.com/intl/en-us/get-skype' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Skype</a></li>
<li><a href='http://www.ziddu.com' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> ziddu</a></li>

</ul></li>

<li><a href='url tujuan utk menu 2'> ALAT</a>

<ul>

<li><a href='http://www.colorpicker.com/' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> color picker</a></li>
<li><a href='http://www.iconfinder.com/' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Icon Finder</a></li>
<li><a href='http://translate.google.co.id' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Google Translator</a></li>
<li><a href='http://myspace.laymark.com/' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Smiley Emotion</a></li>
<li><a href='http://sites.google.com/' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Google Site</a></li>

</ul></li>

<li><a href='#' target='_blank'> <blink>MAU DUIT</blink></a>

<ul>

<li><a href='http://www.neobux.com/' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Neobux</a></li>
<li><a href='http://www.idr-clickit.com/register.php/' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> idr-clickit</a></li>
<li><a href='http://www.donkeymails.com/pages/index.php?refid' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> DonkeyMails</a></li>
<li><a href='https://www.vipclix.com/?ref' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> vipclix</a></li>

</ul></li>

<li><a href='#' target='_blank'> Hiburan & Vidio</a>

<ul>  

<li><a href='http://www.youtube.com/user/theluickmaen' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> My Youtube</a></li>
<li><a href='http://mivo.tv/home.php' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Tv Online</a></li>
<li><a href='http://www.cantanding.com' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Karoke Youtube</a></li>
<li><a href='http://www.khemer.com' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Game Online</a></li>
<li><a href='http://trikfacebook.xtgem.com/photo_online.html' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Edit Photo</a></li>

</ul></li>

<li><a href='http://jablaysmu.com' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow004.gif'/> Klik aja.ok!</a></li>
</li></ul>
</div>
</div>
</div></b:section></div>

*kalau kamu telah mengerti susunan menu drop-down diatas ini.... maka kamu akan bisa menambah maupun mengurangi menu drop-down nya,jadi pelajari dan pahami dulu..!

> Hitam = Gantilah nama menu-menu nya sesuai keinginan
> Biru = Ganti alamat URL-nya sesuaikan dengan Nama Menu yang kamu cantumkan

5. Jika telah sesuai dengan langkah-langkah diatas,sudah kamu edit isi menu-nya sesuai keinginan kamu,lalu Simpan & Refresh-lah dan lihat hasilnya.

Slamat Mencoba..!


Baca Juga Artikel Ini



Al Qur'an Komputer Edit Photo Game Sulap
Stop Pastikan Umur Anda 18+ ..!