MENAMBAH ICON PADA TAB MENU

Untuk memasukan kode Css berikut :

#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; }

Kemudian masukkan kode Html berikut :

<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 :

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>