Menu Dengan List Item Thumbnail Gambar

Mmenu yang satu ini tidak hanya menampilkan teks tetapi diperkaya dengan keterangan gambar. Menu utama dipasang horizontal dan menu drop down dengan list item berupa kotak berisi gambar dan teks untuk keterangan sub menu. Semua ini dikerjakan dengan CSS tanpa bantuan Javascript. Buat anda yang memeiliki web untuk jualan sangat tepat untuk menggunakan menu yang satu ini. Menu List item dengan thumb gambar membuat pengunjung tahu persis isi menu yang akan dikunjungi. Menggunakan menu ini bagi pengunjung tidak seperti mengklik "kucing dalam karung".

Menu yang kita maksud adalah menu yang berikut ini:

Home

Products

Services

Special Offer

Privacy Policy

Untuk mengaplikasikannya kedalam blog, seperti menu yang lain yang menggunakan kode CSS dan HTML tidak terlalu rumit untuk menginstalnya ke dalam blog. Yang perlu diperhatikan adalah pengenalan tentang kode CSS dan HTML berbeda jenis. Dengan cara ini seseorang tidak salah mengaplikasikan hingga akhirnya tertukar penenmpatannya.

Pertama Kode CSS

Kode CSS mesti diletakkan dalam template blog. Jadi Login ke blog lalu >> Elemen Halaman >> Edit HTML. Kemudian tempatkan kode CSS di bawah ini kedalam posisi kode CSS di blog anda. Tempatkan dalam skin.

Kopi Paste Kode di bawah ini:

/* default styling */
.meja, .meja ul {list-style-type:none; margin:0; padding:0;}
.meja a {text-decoration:none;}
.meja {font-family: arial, sans-serif; font-size:12px; width:547px; margin:0 auto; text-align:left; height:32px;}

/* style the links */
/* needs a background for IE6 - can be a color or a transparent gif */
.meja a {background:#f00; height:32px;}
.meja ul a {height:auto;}

.meja a i {position:absolute; left:-9999px;}

.meja a b {display:block; border:1px solid #1552ad; border-width:1px 1px 0 1px; background:#fff; color:#444; font-size:11px; line-height:15px; font-weight:normal;padding:10px; cursor:pointer;}
.meja a b.last {border-bottom-width:1px;}
.meja b img {display:block; float:left; padding-right:5px; border:0;}
.meja b span {display:block; font-size:14px; color:#069; padding-top:5px; font-weight:bold;}
/* Hati Hati merubah ukuran */

/* Untuk meja1 */
.meja1, .meja1 a {width:70px;}
.meja1 a {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigE1stDK7Zp5NORW_RVIJz7-7xhYMpINF3M8ssjIKPk_bp_hNLENKeUo-pI3zWK5RjbJWNU6f3C9eaO_jTU7PVz4qVNxA6jE9fi2DuThV3gAtgAxexT_Kg1JVSlY5Cy4PyCsdWfEZTG3s/s400/home.gif) no-repeat left top;}
/* FOR meja2 */
.meja2, .meja2 a {width:102px;}
.meja2 a {margin-right:-101px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-4_cWq4WGOKdVZBwuCylcU3ND1SrHdYtJF6sXSfDRfmDhFY37Jg5jcQY2JtgVuk2PL4oq5sVD0zW-tWrGyXw8csdCzkiZdET8j5fERDWtrBgycRSAl0_rg04ZRl1_IcAcqX8dT1GdUnc/s400/products.gif) no-repeat left top;} /* 1px less than the top level link width */
.meja2 ul li {max-width:102px;}
/* FOR meja3 */
.meja3, .meja3 a {width:95px;}
.meja3 a {margin-right:-94px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0aIIcR11CvQOYia8yBr5FPQ03K1FZ00rCarQ_nW0t26u-0ZnuyxhONDQI6jzLp0NpFMH-nHeHOLnSW3cjGyK1os4ak1JQ36koca1cmk7_cq5KaEhnP9n-5ayPG3XQC7IwMcPKd4tfFKs/s400/services.gif) no-repeat left top;} /* 1px less than the top level link width */
.meja3 ul li {max-width:95px;}
/* FOR meja3 */
.meja4, .meja4 a {width:143px;}
.meja4 a {margin-right:-142px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDWceqE9Lwgw67Xt7EB6muD1RSk8uuVHPAFDyb0wh7GXk_HbyxQe0dmOi6gN4GUzwfRI7gIkLSYhsFo4omxQOwO1BCKw5_rePDvNSxJ4tG_PjlvxE3b6JToegi9VLdK4cKpxH8LxBH9gU/s400/offers.gif) no-repeat left top;} /* 1px less than the top level link width */
.meja4 ul li {max-width:143px;}
FOR meja5 */
.meja5, .meja5 a {width:137px;}
.meja5 a {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFcc0hLeclKlPeOxWmIBe2FhgyENi-ArAkUhpaJWNKl_xaFj_Ulk8t-bndrCjdW5DpYKf0bjYl-yVv94KfmI6Cb6j-IXBVfouWZvgnQIShQewwaXdItJEzbPScnIB5IoFJ_mTG1OuAqX8/s400/privacy.gif) no-repeat left top;}
.meja li.drop ul li a {width:230px; margin-right:-200px;}
/* ---------------------------------------------------------------------------- */
/* Jangan di ganggu yang berikut */
.meja li {float:left;} /* fixes several IE related bugs, and allows for clearing */
.meja ul {float:left; position:relative; z-index:20; left:1px; top:-1px;} /* necessary for float drop and to stack the <ul>s */
.meja ul li {clear:left;} /* must clear the floated list item inside sublist */
.meja a {position:relative; display:block;} /* needs to have a position, to be above the rest */
.meja a.main {float:left; /* necessary for float drop */
margin-top:10000px;} /* bring the top level links back into view */
.meja .drop {margin-top:-10000px;} /* hide the sub links and their containers, opera has low upper limits */
.meja ul {margin-bottom:-5000px;} /* avoid any interaction between the subs, can be any large size */
/* ---------------------------------------------------------------------------- */
/* The bit that does ALL the work to bring the sub menus into view */
.meja a:hover,
.meja a:focus,
.meja a:active {margin-right:0; z-index:10; outline:0; background-position:left bottom;}
.meja a:hover b,
.meja a:focus b,
.meja a:active b {background:#f8f8f8;}
.meja.meja2 ul a:hover,
.meja .meja2 ul a:focus,
.meja .meja2 ul a:active {margin-right:-128px;} /* Margin kanan*/
.meja .meja3 ul a:hover,
.meja .meja3 ul a:focus,
.meja .meja3 ul a:active {margin-right:-135px;} /* */
.meja .meja4 ul a:hover,
.meja .meja4 ul a:focus,
.meja .meja4 ul a:active {margin-right:-87px;} /* */
/* OPERA fix */
.meja ul:hover {clear:left;}
/* IE6 and 7 fix */
a:active {}

Lalu klik preview. Jika tidak ada pesan error, langsung saja save template anda.

Kedua Kode HTML

Kode ini diletakkan di dalam navbar. Klik >> Elemen Halaman >> lalu Add Widget HTML/Javascript. Lalu Kopi paste kode di bawah ini.

<br /><div id="inf" width="500px"><br /><br /><br /><ul class="meja"><br /> <li class="meja1 drop"><a class="main" href="#"><i>Home</i></a></li><br /> <li class="meja2 drop"><a class="main" href="#"><i>Products</i></a><br /><br />  <ul><br />   <li><a href="#url"><b><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx29NzkPjE_Sk7ZHsuhZ_mqMRcNhTtHLxSN9b2elWBqRLsKVc3WR_HNuLyEUPonVC-w26rZW4NME73-HP9-vlFDaQGjJcMyhYI9iBMRHCbJ16gDaP2f58dFHa53tGb4v_wARbgrdXXNZw/s400/pic1.gif" alt=""><span>Games</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed metus diam, tristique.</b></a></li><br />   <li><a href="#url"><b><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-0cURV5xfKrKY2IwGpL1FcoX7JD3byeO-TXRxpVuCaTGdHWv3t28uWjChLU8SdNk0t5ufxS6aeKvBB8fnDc4XPkqpsxxyzVKXO1Sj7T2I2zfEtsN39hbunsSDZECtKewaIQ6dy0-ZgPQ/s400/pic2.gif" alt=""><span>Filing</span>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia</b></a></li><br />   <li><a href="#url"><b><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNMAQ3BA1w8hmsH91jKqiqyJGH1gOVQabNvWY2SNrKlEtjUEDRqbPXG4GeatlZYmKWKvmqivlVZ9bqiTySMI2Am3un_tJq74mDZuYR9DTkWMf_0NR66-VsOiywGK4FI1MtKs6zw3Ms26g/s400/pic3.gif" alt=""><span>Headphones</span>Aenean consectetur mi vel ante congue congue. Integer at augue quam.</b></a></li><br />   <li><a href="#url"><b><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDXO5DXtLh7EL-Cqw5lWZhhH1ufqsxIBt_q5pu93wPPZoXpuJztT5QcV9l9-FQi7ttQpJMDvrfatefA-n7vdKtslXbTcGHY-woN-s5Q8F2eVrEWUZLkR-NnduD0SaxhsFpFuYJFgLoCe0/s400/pic4.gif" alt=""><span>Globes</span>Aenean interdum interdum nisi, sit amet elementum metus tempus eget.</b></a></li><br /><br />   <li><a href="#url"><b class="last"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_ES2TcBys7W7nj94v1urWBjL6eez7G9mmn7VE2ptP3E65bVJ2qTHgVJb73xe99vsAxGmpE17U8v-F7bCZDzImBEy-ihmbS-aLIKqx3Nf5G6zQWOG44K4WYsB-htUvduzogT5YhVab1K4/s400/pic5.gif" alt=""><span>Firefox</span>Vivamus massa odio, posuere at bibendum id, accumsan vitae lorem.</b></a></li><br />  </ul><br /> </li><br /> <li class="meja3 drop"><a class="main" href="#"><i>Services</i></a><br />  <ul><br />   <li><a href="#url"><b><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF2ibaqVPO12vB93hl36COTkVcq_ZI0c9F0zFEmUj6rPU_FpkbdX_OoW94o0McOx3v4Ao5dd4VaCwACl1ExhxUzB3dDuQwQ8cLBnihGN949rB-ZBk1PnVRaQ-8PVh756CecZHQV6ikDug/s400/pic6.gif" alt=""><span>D.I.Y.</span>Vestibulum laoreet velit et urna pellentesque porta venenatis odio fermentum. </b></a></li><br /><br />   <li><a href="#url"><b><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSxk34-RQEJDKs1plkRkWAj-YYe9sGdm8bIJJNBuqpdnVUK2P3mOQLnhPo74KX30RuMcySrFcM59Vs-vEBRUPXhPqU_wo9wITS5_BvkXSWb7mUB_khy79TSuLGvdRzQhRqtlsTy2FGs-E/s400/pic7.gif" alt=""><span>Repairs</span>Praesent vitae aliquam eros. Fusce nec nisi sagittis justo consequat tincidunt.</b></a></li><br />   <li><a href="#url"><b class="last"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1MXAqbThhUIjcLwxZurDwj0dgAsY-LUNgjqj8GGCvo6JCzBt5wm9pgBneBgaG9sS1Gilp98rYtC3rqdVwagF7OHOkZKBhzj280weNeal76haPpDRmz3k-Hw3-TQGs12mzuW4Xm-QTIG8/s400/pic8.gif" alt=""><span>Photography</span>Sed scelerisque cursus aliquet. Cum sociis natoque penatibus et magnis.</b></a></li><br />  </ul><br /> </li><br /> <li class="meja4 drop"><a class="main" href="#"><i>Special Offer</i></a><br />  <ul><br /><br />   <li><a href="#url"><b><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirb_XnFaBJiiGFw7K20EsmgLwizDbjSRxnDisL3jxcOk4cOPYy1SkXmdawvP1Vhd0UUPQ2-GSC7ka41PHNBnMY9cd15GoT6A_pOtlQlR4OGN-cLeJjFlidZVRnDRNdj-1Z7dL2cybH-rc/s400/pic9.gif" alt=""><span>Security</span>Donec eget est vehicula eros vestibulum posuere. Donec elementum nisi justo.</b></a></li><br />   <li><a href="#url"><b><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjMV4BnyTlL6wUEpxeFKVV8ShCBZ8jk8HvglwPyiG0LrWWMxR3TddeZvklXsuGcnm0nh6kj2eUoOzWIRdeUVVz_yMsDd7vCqFJNTBrzYGIzJ2iyG-7DPryGpUpcywyt0diZUPj4o5Yz1Q/s400/pic10.gif" alt=""><span>Racking</span>Sed at sapien eros. Quisque ultrices risus eu lorem porttitor dignissim.</b></a></li><br />   <li><a href="#url"><b><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjADT_PpoWhR_fepYK5VEAApqz1_7-itrvsSar40wzVw5QnW8bHRKbADgl5AHN-vL7S0GIU_H72hLgJq1Fxrmv5NdonOBZd-Usbm0wpxSigWhh6W9_5F_nlQ4SOtPn3ftyC8PyXDXepLMo/s400/pic11.gif" alt=""><span>Binoculars</span>nteger sit amet molestie justo. Maecenas malesuada consequat porta.</b></a></li><br />   <li><a href="#url"><b><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimg9J4Q0_Ki-QxlyJNwVg7-PCntmkTczj7mRQJEqEVLpNZj40mpb8PJuInO4S1_EuU9QSCqcec8eMb4P3E7f4PHsTiYJ8c4yM_V8tGUE6D5ohMol2aRZYNqyFdqnA25Rea-E4hNwwS2lE/s400/pic12.gif" alt=""><span>Fault finding</span>Integer lacinia, felis ac mollis viverra, elit enim hendrerit ligula.</b></a></li><br />   <li><a href="#yrl"><b><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguV9GLIim1uSKVLuIiT_e0AmGlNk0gxKu_pXsrxORqqrffmY6tLIAzdINGkMSlEvLdkLs8rdNm5o8blDFbby3kLa3bbzclNZjnAdVwBD8DMpLWBgSL_QYVvp7MuMdcVOijMnkKmcGLVgc/s400/pic13.gif" alt=""><span>General</span>Class aptent taciti sociosqu ad litora torquent per conubia nostra.</b></a></li><br /><br />   <li><a href="#url"><b class="last"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvtaI80ahhOTNZG0lBwR3gQu2aG1sQAAiUiawfiQwGFHEujovyimVNLyBQ6RHO4CEpX29_BChKH9GEVbkjSMNzYl-dQLpjVsguT9zp0XgOjewS6zEqe5DPOyOVlUdM1Q-qb2Lw65EBHw4/s400/pic14.gif" alt=""><span>Sales</span>Quisque vulputate condimentum condimentum. Vestibulum elementum, arcu.</b></a><br />   </li><br />  </ul><br /> </li><br /> <li class="meja5 drop"><a class="main" href="#"><i>Privacy Policy</i></a></li><br /></ul><br /><br /><br><br /></div><br />

Simpan html anda dan lihat hasilnya. Jika ada yang perlu dirubah pastilah isi postingan, foto dan link, background, dan width. Saya tahu buat anda cukup mudah menyesuaikannya. Selamat mencoba..

Menu Dengan List Item Thumbnail Gambar

Pertama Kode CSS

Kedua Kode HTML

Posting Komentar