Membuat list menjadi lebih indah (lanjutan)

Kita telah berhasil membuat list menjadi lebih indah dengan menambahkan sedikit kode css. Sekarang kita lanjutkan dengan manfaat CSS tersebut untuk menampilkan efek seperti dibawah:

• Tips KomputerBeberapa catatan dan pengalaman pribadi. Mudah-mudahan ada yang bisa bermanfaat juga buat anda
• Tips HandphoneBeberapa catatan tentang handphone. Tips pemeliharaan dan semacamnya
• Tutorial MenggambarBeberapa tutorial menggambar. Sekedar menghilangkan kejenuhan
• Tips BloggerTips mengutak-atik template Blogger. Sebenarnya tidak ada rencana membuat tips ini, tapi karena suka mengutak-atik template blogger tapi sering lupa tips-nya jadi dituliskan disini juga. Mudah-mudahan ada yang bermanfaat buat anda
• Tips GameRefreshing di dunia fantasy. Beberapa koleksi tips bermain game yang saya punyai

Yang kita lakukan adalah dengan menambah beberapa kode pada listing kita. Perhatikan listing berikut:

<ul id="submenu">
<li> <a href="http://sexyclimate.blogspot.com/search/label/Tips%20Komputer?&max-results=5"> Tips Komputer<span> Beberapa catatan dan pengalaman pribadi. Mudah-mudahan ada yang bisa bermanfaat juga buat anda</span> </a> </li>
<li> <a href="http://sexyclimate.blogspot.com/search/label/Tips%20Handphone?&max-results=5"> Tips Handphone<span> Beberapa catatan tentang handphone. Tips pemeliharaan dan semacamnya</span> </a> </li>
<li> <a href="http://sexyclimate.blogspot.com/search/label/Tutorial%20Menggambar?&max-results=5"> Tutorial Menggambar<span> Beberapa tutorial menggambar. Sekedar menghilangkan kejenuhan</span> </a> </li>
<li> <a href="http://sexyclimate.blogspot.com/search/label/Tips%20Blogger?&max-results=5"> Tips Blogger<span> Tips mengutak-atik template Blogger. Sebenarnya tidak ada rencana membuat tips ini, tapi karena suka mengutak-atik template blogger tapi sering lupa tips-nya jadi dituliskan disini juga. Mudah-mudahan ada yang bermanfaat buat anda</span> </a> </li>
<li> <a href="http://sexyclimate.blogspot.com/search/label/Tips%20Game?&max-results=5"> Tips Game<span> Refreshing di dunia fantasy.<br /> Beberapa koleksi tips bermain game yang saya punyai</span> </a> </li> </ul>

Perhatikan pada listing diatas kita menambahkan kalimat diapit tag <span> </span> , kalimat itulah yang akan muncul bila kita hover mouse (sorry, belum ketemu kata yang tepat pengganti hover)ke item di listing. Baris pertama akan diperbesar, sehingga perlu kita berikan tag <br /> agar kalimat selanjutnya berada di baris selanjutnya. Misalkan contoh:

<li> <a href="http://sexyclimate.blogspot.com/search/label/Tips%20Game?&max-results=5"> Tips Game<span> Refreshing di dunia fantasy.<br /> Beberapa koleksi tips bermain game yang saya punyai</span> </a> </li> </ul>

Membuat list menjadi lebih indah

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

• Download Theme Handphone
• Download Aplikasi Handphone
• Download Ringtone Handphone
• Download Game Handphone
• Download Aplikasi Komputer
• Download Game Komputer
• Download e-book gratis
• Download wallpaper

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

• Download Theme Handphone
• Download Aplikasi Handphone
• Download Ringtone Handphone
• Download Game Handphone
• Download Aplikasi Komputer
• Download Game Komputer
• Download e-book gratis
• Download wallpaper

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:

• Download Theme Handphone
• Download Aplikasi Handphone
• Download Ringtone Handphone
• Download Game Handphone
• Download Aplikasi Komputer
• Download Game Komputer
• Download e-book gratis
• Download wallpaper

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.