BloonOnline GoTemplatez VersiEdan
Facebook Twitter You Tube Friendfeed
Blog Seo Intermezo

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

 

Page views this post: reader

2 komentar:

Andy MSE said...

makasih infone kang!... aku jadi pengin juga bikin ikon2 dan ditaruh di image hosting... kali2 ada yang mau pake, hehehe... sementara nunut punya sampean wae ah!... tks banget...

zam said...

aduuuh.. thansk bgt ternyata buanyak sekali yang belum aku ketahui.....
boleh dunk kapan ngoment di blog aku... :D

Post a Comment

" Apapun Yang Dapat Anda Lakukan, Atau Ingin Anda Lakukan Mulailah

Keberanian Memiliki Kecerdasan, Kekuatan Dan Keajaiban Di Dalam-nya"

Makacih Atas Komentar-Nya

 

Copyright 2009. Home | Serba Serbi Google | XHTML | CSS Design by Catalog-Tutorial