Rabu, 05 Agustus 2009

Membuat list menjadi lebih indah

Listing dalam HTML didapatkan dengan memakai tag <ul> untuk unordered list. Berikut adalah contoh tampilan listing unordered yang biasa:


Didapatkan dengan menggunakan listing:
<ul>

<li><a href="http://sexyclimate.blogspot.com/search/label/Download%20Theme%20Handphone?&max-results=5">Download Theme Handphone</a></li>

<li><a href="http://sexyclimate.blogspot.com/search/label/Download%20Aplikasi%20Handphone?&max-results=5">Download Aplikasi Handphone</a> </li>

<li><a href="http://sexyclimate.blogspot.com/search/label/download%20ringtone%20handphone?&max-results=5">Download Ringtone Handphone</a> </li>

<li><a href="http://sexyclimate.blogspot.com/search/label/Download%20Game%20Handphone?&max-results=5">Download Game Handphone</a></li>

<li><a href="http://sexyclimate.blogspot.com/search/label/Download%20Aplikasi%20Komputer?&max-results=5">Download Aplikasi Komputer</a> </li>

<li><a href="http://sexyclimate.blogspot.com/search/label/Download%20Game%20Komputer?&max-results=5">Download Game Komputer</a></li>

<li><a href="http://sexyclimate.blogspot.com/search/label/Download%20e-book%20gratis?&max-results=5">Download e-book gratis</a></li>

<li><a href="http://sexyclimate.blogspot.com/search/label/Download%20wallpaper?&max-results=5">Download wallpaper</a></li>

</ul>

Kita akan menggunakan CSS agar listing menjadi seperti dibawah ini



Caranya pada template blogger sebelum </b:skin> kita masukkan CSS berikut ini:


/*ini kasan submenu nya */
#submenu a span {display:none;}
#submenu a:hover span {display:block; position:absolute;left:16em; top:0;
text-align:left; padding:0.5em;width:24em; background-color:#fff;
color:#000; border:1px solid #006699;
}
#submenu a:hover span:first-line {
font-weight:bold;
font-size:1.2em;
background-color:#fff;
color:#069;
}
#submenu {position:relative;padding:0; margin:0;width:0;}
#submenu li {list-style-type:none;margin:0 0 0.25em 0;}
#submenu a, #submenu a:visited {
display:block;
width:15em;
border:1px solid #006699;
font-family:arial, verdana, sans-serif;
font-size:0.8em;
text-align:center;
text-decoration:none;
background:#006699;
color:#fff;
padding:0.25em;
}
/*tuntung submenu nya */

Kemudian pada listing tadi kita tambahkan id="submenu" sehingga listing menjadi:


<ul id="submenu">

Listing kita akan menampilkan:



Hal yang sama juga kita dapatkan pada ordered list dengan cara yang sama, cukup tambahkan id="submenu" setelah tag <ol>


<ol id="submenu">
CSS diatas mempunyai kemampuan tambahan yang insya Allah akan kita pelajari bersama pada tips berikutnya.

Reblog this post [with Zemanta]
Diposting oleh di
Label:

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)