Pages

sponsor khusus


Pelet Bulu perindu
punya masalah dengan asmara,
buat pasangan anda kembali bertekuk lutut
jangan tunggu sampai kekasih anda di samber orang.

Koleksi Pelet Gratis?
masuk sini koleksi supranatural gratis
Dijamin anda gk bakal pergi kecewa

Kamis, 17 April 2008

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

 

Tidak ada komentar:

Poskan Komentar

Arsip Blog