MyHsp21: Tutorial Membuat Menu Horizontal Dengan Background Image "Menu Asoy"

Pada kesempatan kali ini ane mau ngasih tau cara membuat menu horizontal lain daripada yang lain

. Teknik ini ane kembangkan sendiri. Caranya pun sangat mudah sekali. Ane bikin tutorial step by step agar yang masih pemula juga bisa dengan mudah mempraktekannya. Dari tadi ngomongin apa sih..

? Oh iya ane belum jelasin apa itu menu horizontal. Mungkin sebagian besar udah pada tau yah menu horizontal yang kayak gimana. Kalo belum tau kita mau bikin apa, ini nih contoh penampakan yang mau kita bikin :

Penampakkan Menu Asoy

Nah, sekarang udah tau kan. Ane namakan ini dengan nama "MENU ASOY", inget gak pake GEBOY yah, hehe...

Sekarang tanpa banyak cincong lagi, langsung saja ke tutorialnya :

1. Masuk/login dulu ke www.blogger.com dengan akun masing2.
2. Masuk ke Dashboard > Design > Edit HTML
3. Kasih centang Expand Widget Templates

Jangan lupa BACK UP dulu templatenya sebelum mempraktekan tutorial ini. Entar ane yang disalahin lagi . Caranya : Tinggal klik Download Full Template, terus save file dalam bentuk *.xml

4 . Cari kode ]]></b:skin> (Gunakan Ctrl+F biar cepet)
5. Copy dan Paste kode di bawah ini tepat di atas kode ]]></b:skin>

/* Ini adalah kode untuk menu asoy - Mulai */
#menu-asoy {
list-style-type:none;
margin:-10px 0 0 0;
padding:0;
}

#menu-asoy li {
float:left;
padding:0;
margin:0 1px 0 0;
position:relative;
width:102px;
height:3em;
z-index:100;
background:transparent;

}
#menu-asoy li dl {
position:absolute;
top:0;
left:0;

}
#menu-asoy li a, #menu-asoy li a:visited {text-decoration:none;}
#menu-asoy li dd {display:none;}
#menu-asoy li a:hover {border:0;}
#menu-asoy li:hover dd, #menu-asoy li a:hover dd {display:block;}
#menu-asoy li:hover dl, #menu-asoy li a:hover dl {padding-bottom:10px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0-qodQ-2szbyulMBSX8aepg0w7W__KF5aoIL0KnkDW22uTGCCoAvsT_5YXpS2vYVV1iQTdgxQ_ztImjtUKA5EbbBkVVBnMAFgzaejQ5jYaayciWO4Na3YuCM1NkDZBgEW-vJMIgt0kBdb/s1600/over.png) no-repeat transparent;
}
#menu-asoy table {border-collapse:collapse; padding:0; margin:-1px; font-size:1em;}
#menu-asoy dl {width: 100px; margin: 0; padding: 0;}

#menu-asoy dt {height:28px; width: 90px; margin:0; padding: 5px 5px 5px 5px; font-size: 23px; color: transparent; text-align:center;}
#menu-asoy dt a, #menu-asoy dt a:visited {display:block; color: transparent;}
#menu-asoy dt a, #menu-asoy dt a:hover {display:block; color: transparent;}

#menu-asoy dd {width: 110px; margin:0; padding:0; color: #fff; font-size: 1em; text-align:left; border-bottom: 1px solid #373737; border-right:
1px solid #373737; border-left: 1px solid #373737;
-webkit-box-shadow: 0px 3px 2px #000000;
-moz-box-shadow: 0px 3px 2px #000000;
box-shadow: 0px 3px 2px #000000;
}
#menu-asoy dd.last {border-bottom:10px solid #373737;}
#menu-asoy dd a, #menu-asoy dd a:visited {color:#fff; text-decoration:none; display:block; padding:4px 5px 4px 5px; width:100px;
background:#242424;}

#menu-asoy dd a:hover {color:#fff; text-decoration:none; display:block; padding:4px 5px 4px 5px; width:100px; background:#6b3d26;}

#menu-asoy{
width: 100%;
padding-left:20px;
margin:0;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLy5CNtvEgpwgrt3LAJsjIW_31eaRWyYWVwyfT17F0SrmZUjCkZy2WrxKf_gyo8sC2cj6p2NMFwdep7-MG4jd3oVpydhON4SRuPr5UnvgyMq8ol3Yl6FrJsXOksPEQ7XNENZG05a8_xKU/s1600/bg-menu-asoy.png) no-repeat center top;
}
/* akhir - Ini adalah kode untuk menu asoy */

Penjelasan Kode:
a. kode yang ane kasih warna merah adalah URL image saat mouse/kursor didekatkan. Ukuran image nya 99x37 pixels dengan format PNG.
b. kode yang ane kasih warna biru adalah URL image background menu asoy. Ukuran image nya 490x230 pixels dengan format PNG. Kalo mau bikin imagenya silahkan bikin dengan Adobe Photoshop. Formatnya harus PNG/GIF yah suapaya transparant. Kalau mau download file psd (Format Photoshop) nya silahkan download di sini (~237KB).
c. Kode warna background normal: #242424
d. Kode warna background saat mouse/kursor didekatkan : #6b3d26
e. Kode warna border : #373737
Untuk lebih jelasnya liat penampakkan ini :

Klik untuk memperbesar gambar
Silahkan untuk image background dan kode warna nya disesuaikan dengan selera dan sesuai kreasi masing-masing. Nah terus cara tau kode warna-warna dari mane? Silahkan cek ke sini atau googling dengan keyword "kode warna".

6. Cari kode
<b:section class='main' id='main' showaddelement='no'>
kemudian ganti dengan kode
<b:section class='main' id='main' showaddelement='yes'>

7. Klik SAVE TEMPLATE
8. Masuk ke Dashboard > Design > Page Elements

9. Klik Add a Gadget
10. Pilih Gadget baru : HTML/JavaScript

11. Klik HTML/JavaScript, nanti mucul penampakan seperti ini

12. Title kosongkan, kemudian Content isi dengan kode ini :

<div id="menu-asoy"><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<ul id="menu-asoy">

<li>

<dl>
<dt><a href="Link Blog">      </a></dt>
</dl>

</li>
<li>

<dl>
<dt><a href="#">  </a></dt>
<dd><a href="LinkSubMenu1">SubMenu1</a></dd>
<dd><a href="LinkSubMenu1">SubMenu1</a></dd>
<dd><a href="LinkSubMenu1">SubMenu1</a></dd>
</dl>

</li>

<li>

<dl>
<dt><a href="#">  </a></dt>
<dd><a href="LinkSubMenu2">SubMenu2</a></dd>
<dd><a href="LinkSubMenu2">SubMenu2</a></dd>
<dd><a href="LinkSubMenu2">SubMenu2</a></dd>
<dd><a href="LinkSubMenu2">SubMenu2</a></dd>
<dd><a href="LinkSubMenu2">SubMenu2</a></dd>
</dl>

</li>

<li>

<dl>
<dt><a href="">  </a></dt>
<dd><a href="LinkSubMenu3">SubMenu3</a></dd>
<dd><a href="LinkSubMenu3">SubMenu3</a></dd>
<dd><a href="LinkSubMenu3">SubMenu3</a></dd>
<dd><a href="LinkSubMenu3">SubMenu3</a></dd>
</dl>

</li>

</ul>
<br/><br/><br/><br/>
</div>

Penjelasan Kode:
- Silakan ganti Link Blog dengan alamat blog masing-masing. Contoh : http://hsp21.blogspot.com
- Silakan ganti SubMenu1,2,3 dengan nama submenu yang diinginkan dan LinkSubMenu1,2,3 dengan alamat submenu tersebut, jangan lupa diawalnya pake http:// yah..!
- Apabila ingin menambah SubMenu, tinggal copy paste aja kode
<dd><a href="LinkSubMenuX">SubMenuX</a></dd>
ke bawah, sebanyak yang diinginkan. Ngerti yah..?

13. Lalu klik SAVE
14. Lihat blog masing-masing, taadaaa... apa yang terjadi..

PERHATIAN!
Mungkin tidak semua template bisa cocok menggunakan fitur ini. Tapi apa salahnya untuk dicoba dulu. Bener gak? Kerusakan template yang diakibatkan oleh tutorial ini adalah tanggung jawab masing-masing pemilik blog . Jadi jangan lupa, back up dulu templatenya sebelum mencoba tutorial ini. okeh.. ? Apabila ada kendala, pertanyaan, error, kesalah ngetik, gak ngerti tentang kode2 nya, atau apapun itu silakan hubungi saja ane, ane sangat welcome kok, tenang aja.. Untuk melihat demo tutorial ini silakan liat di blog eksperimen ane : http://hsp21-labs.blogspot.com