Menambah Icon dalam tab menu

Untuk melanjutkan seri membuat tab menu ( lihat di sini ). Sekarang bagaimana  caranya untuk menambahkan icon-icon luthu di samping tab menu navigasi. biar keliatan-nya sedikit rada begaya !!.

Caranya untuk menambah tab menu itu sendiri sama seperti yang telah saya jelaskan di sini. namun yang membedakan adalah kode Css dan Html -nya.

Untuk memasukan kode Css -nya ini.

#menu ul li { display: inline; font-weight: bold; list-style-type: none; padding: 5px 5px 5px 0; margin: 0; } #menu li span.home { background: url('http://i120.photobucket.com/albums/o190/jaloewig/blogger/home-icon.gif') no-repeat left center; padding: 0 0 0 20px; } #menu li span.about { background: url('http://i120.photobucket.com/albums/o190/jaloewig/blogger/add-user-yellow.gif') no-repeat left center; padding: 0 0 0 20px; } #menu li span.feed { background: url('http://i120.photobucket.com/albums/o190/jaloewig/blogger/feed-icon16x16.png') no-repeat left center; padding: 0 0 0 20px; } #menu li span.contact { background: url('http://i120.photobucket.com/albums/o190/jaloewig/blogger/email-contact-orange.gif') no-repeat left center; padding: 0 0 0 20px; } #menu li span.login { background: url('http://i120.photobucket.com/albums/o190/jaloewig/blogger/user-login-yellow.gif') no-repeat left center; padding: 0 0 0 20px; }

 

Sedangkan untuk kode Html na ini.

<div id="menu">
<ul>
<li><span class="home"><a href="http://alamat_blog_home.com">Home</a></span></li>
<li><span class="about"><a href="http://alamat_blog_profile.com">About</a></span></li>
<li><span class="feed"><a href="http://alamat_feed">My Feed</a></span></li>
<li><span class="contact"><a href="mailto:alamat email.com">Contact</a></span></li>
<li><span class="login"><a href="http://www.blogger.com">Login</a></span></li>
</ul>
</div>

Catatan Si Nyahoo

Jika kita ingin menambah navigasi menu-nya, yang perlu kita lakukan pertama menambah dulu dalam tag Css -nya seperti ini.

#menu li span.tambah menu {
background: url(' url / alamat gambar icon') no-repeat left center;
padding: 0 0 0 20px;
}

langkah kedua menambah dalam tag Html-nya seperti ini.

<li><span class="tambah menu"><a href="url / alamat yang di tuju">Apa Kek </a></span></li>

Tulisan Yang Rada Nyambung

1. basic-menambah-tab-menu-horizontal

2. memasang-tab-menu-di-new-blogger

 

Technorati tags: Tab Navigasi, Belajar New Blogger

del.icio.us tags: Tab Navigasi, Belajar New Blogger