Cara membuat menu navigasi dropdown bergambar

Sebelumnya, maaf karena lama sekali tidak update. Hal ini dikarenakan saya mulai malas ngeblog dan kebanyakan main game online. Yeaah, ngeliat blogku sepi~ Kasihan sekali~ Jadi InsyaAllah mulai hari ini akan terus update, min seminggu. Jadi, tetap setia pada blog ini ya :) !.

Sebelumnya sudah dijelaskan cara membuat menu navigasi dropdown. Ya, menu yang bila disentuh kursor akan ada menu yang turun dibawahnya. Untuk memperbagus menu navigasi dropdown, sobat bisa nambahin gambar tepat di samping menu. Seperti yang ada di blog ini. Lihat di menu home, ada gambar rumah kan disamping kanannya? Lalu, bila sobat menyentuh menu kategori maka menu yang turun seperti menu home. Cara menambahkan image mudah kok. Sebenarnya, asal bisa bahasa HTML, mudah sekali membuatnya tanpa lihat tutor.

Caranya seperti ini: pada code "<a href="Target"> Title</a>" perhatikan teks merah. Nah, di samping kanan teks tersebut kita beri code HTML image. Yaitu <img></img>. Jadi, tambahkan script img di samping teks merah. Contoh: "<a href="Target"><img src="Link gambar"/> Title</a>". Pada teks link gambar ganti dengan link gambar sesukamu. Untuk menari icon buat gambar tsb yang bagus, bisa dicari di web ini: http://findicons.com. Mudah kan?

Bagi yang masih belum mengerti, bisa copasdit (Copy-Paste-Edit) code berikut.

<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='http://blogseno.blogspot.com'><img src='http://png-3.findicons.com/files//icons/88/mac/128/home.png' width='13px'/> Home</a></li>
<li><a href='#'>Kategori</a>
<ul>
 <li><a href='http://blogseno.blogspot.com/search/label/tutorial'><img src='http://png-3.findicons.com/files//icons/577/refresh_cl/48/tutorial.png' width='15px'/> Tutorial</a></li>
 <li><a href='http://blogseno.blogspot.com/search/label/tutorial%20blog'><img src='http://png-4.findicons.com/files//icons/1594/social_media_icons_2_0/128/blogger.png' width='15px'/> Tutorial Blog</a></li>
 <li><a href='http://blogseno.blogspot.com/search/label/informasi'><img src='http://png-5.findicons.com/files//icons/1197/agua/128/get_info.png' width='15px'/> Informasi</a></li>
 <li><a href='http://blogseno.blogspot.com/search/label/download'><img src='http://png-5.findicons.com/files//icons/1014/ivista/128/download_file.png' width='15px'/> Downloads</a></li>
 <li><a href='http://blogseno.blogspot.com/search/label/Game'><img src='http://png-3.findicons.com/files//icons/1786/oxygen_refit/128/input_gaming.png' width='15px'/> Game</a></li>
 <li><a href='http://blogseno.blogspot.com/search/label/resep'><img src='http://png-2.findicons.com/files//icons/72/harmonia_pastelis/128/hp_folder_recipe.png' width='15px'/> Resep</a></li>
 <li><a href='http://blogseno.blogspot.com/search/label/cheat%2Fhack'><img src='http://png-5.findicons.com/files//icons/2284/sista/59/hacks.png' width='15px'/> Cheat</a></li>
</ul>
</li>
<li><a href='#'>Tool</a>
<ul>
<li><a href='http://blogseno.blogspot.com/p/color-generator-digunakan-untuk-mencari.html'><img src='http://png-2.findicons.com/files//icons/1786/oxygen_refit/128/gtk_color_picker.png' width='15px'/> Color Generator</a></li>
<li><a href='http://blogseno.blogspot.com/p/parse-html.html'><img src='http://png-1.findicons.com/files//icons/1657/lha_objects/128/filetype_html.png' width='15px'/> Parse HTML</a></li>
<li><a href='http://blogseno.blogspot.com/p/cek-status-internet.html'><img src='http://png-4.findicons.com/files//icons/753/gnome_desktop/64/hyperlink_internet_search.png' width='15px'/> Cek Status Internet</a></li>
</ul>
</li>
<li><a href='#'>Profile</a>
<ul>
<li><a href='http://blogseno.blogspot.com/p/contact-me.html'><img src='http://png-1.findicons.com/files//icons/756/ginux/64/e_mail.png' width='15px'/> Contact Me</a></li>
<li><a href='http://blogseno.blogspot.com/2010/04/about-me.html'><img src='http://png-5.findicons.com/files//icons/944/blogging/128/about_me.png' width='15px'/> About Me</a></li>
</ul>
</li>
<li><a href='#'>Friends</a>
<ul>
<li><a href='http://blogseno.blogspot.com/p/banner-sahabat.html'><img src='http://png-5.findicons.com/files//icons/1696/once/48/friends.png' width='15px'/> Banner friends</a></li>
<li><a href='http://blogseno.blogspot.com/p/link-friends.html'><img src='http://png-5.findicons.com/files//icons/1696/once/48/friends.png' width='15px'/> Link Friends</a></li>
</ul>
</li>
<li><a href='http://blogseno.blogspot.com/p/search.html'>Search</a></li>
</ul>
</div></div>

Stylenya (taruh di bawah code ]]></b:skin>:

/* Menu Horizontal Dropdown */
#menuwrapperpic {background:#000 ;width:100%;margin:0 auto;padding:0 auto;}
#menuwrapper {width:100%;margin:0 auto;height:34px;}
.clearit {clear: both;height: 0;line-height: 0.0;font-size: 0;}
#menubar {width:100%;}
#menubar, #menubar ul {padding: 0;margin: 0;list-style: none;font-family:&#39;Arial&#39;, serif;}
#menubar a {display: block;text-decoration: none;padding: 9px 10px 8px 10px;font:bold 13px/15px Arial,serif; text-decoration:none;color: #fff;border-right:1px solid #444}
#menubar a.trigger {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZzaFlv4pIA11cR_BVDDCtvVSY4lpoXmu_WGFIV9Pl2eFM_AQMnjBnfIowM6N51bIheq9M-F7M41WHuxhxlqbvn3DNRK5_2fEgVpQMXLhVypzfYlpxb6tMw33GZnqCFo3vXV33JmYylVPb/ s1600/arrow_black_bottom.gif);background-repeat: no-repeat;background-position: right center; padding: 9px 20px 8px 20px;}
#menubar li {float: left;position: relative;}
/* hide from IE mac \*/
#menubar li {position: static; width: auto;}
/* end hiding from IE5 mac */
#menubar li ul, #menubar ul li {width:170px;}
#menubar ul li a {text-align:left;color: #fff;padding: 8px 13px;font-size: 13px;font-weight:normal;text-transform:none;font-family:Arial;border:1px solid #444;}
#menubar li ul {z-index:100;position: absolute;display: none;background:#000;}
#menubar li ul {-moz-box-shadow:0 2px 2px rgba(0, 0, 0, 0.6); -webkit-box-shadow:0 rgba(0, 0, 0, 0.6);}
#menubar li:hover a, #menubar a:active, #menubar a:focus, #menubar li.hvr a{background-color:#f4f4f4;color: #000;text-decoration:none;border-top:1px solid #ccc;}
#menubar li:hover ul, #menubar li.hvr ul {display: block;}
#menubar li:hover ul a, #menubar li.hvr ul a {color: #edfdfd;background-color:transparent;text-decoration:none;}
#menubar li ul li.hr { display:block; font-size: 1px; height: 0px; line-height: 0px; margin:0px 0; }
#menubar ul a:hover {background-color: #fff!important;color: #000 !important;text-decoration:none;}
#menubar li.selected a, #menubar li.selected a:visited {border-right:1px solid #444}
#menubar li.selected a:hover {background:none;color:#F7D528;}

Kalau nggak ngerti, comment aja. Oh ya, disini ada yang main DarkOrbit?
Selamat mencoba... sumber