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.
Lihat gambar berikut ini :
Home
Tutorial
Tutorial Blog
Informasi
Downloads
Game
Resep
Cheat
Color Generator
Parse HTML
Cek Status Internet
Contact Me
About Me
Banner friends
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:'Arial', 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/AVvXsEjsPrgptSkFIQzXWK-27yl1SStH6NrDVDUasl-wIkvMLqowg8I7innAXCMeKQLOYRS0NDXRIzer57MInM0rv3c_D9YsM-ZOdoY91FYnbIIZusZif7KA1d7gj-j8Dl437jd-3jgQb-S7Kc9T/ 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 kurang jelas, kunjungi langsung di sumbernya.
Author : coxelgokil | ACI BUDAYA
Anda telah membaca
artikel tentang : Cara Membuat Menu Dropdown Bergambar Di Blog. Oleh Admin, Anda diperbolehkan mengcopy-paste atau menyebarluaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya. Terimakasih...
