sindenblankon™

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.

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.

Apa Kek

Tulisan Yang Rada Nyambung

1. basic-menambah-tab-menu-horizontal

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