Aug 10, 2009

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:

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>

Aug 6, 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]

Popular Posts

puzzle yu-gi-oh!- - Metodologi Penelitian - - Fable - - Download - - Iklim