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]](http://img.zemanta.com/reblog_e.png?x-id=63cc876c-788e-4902-b879-52ab6bb87812)
