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.

Membuat link ke lokasi di dalam halaman yang sama

Membuat link ke lokasi di dalam halaman yang sama ? Mungkin bisa lebih dimengerti bila langsung kita lihat hasilnya. Klik link pergi ke contoh anchor ini.

Disini ada dua proses, yaitu membuat hyperlink dan memberi nama anchor. Kita mulai dengan memberi nama anchor pada tempat tujuannya:

<h2><a name="contoh1">ini contoh anchor</a></h2>

Diatas kita beri nama heading ini contoh anchor dengan nama contoh1

Kemudian membuat hyperlink yang menuju ke anchor contoh1 sama dengan membuat hyperlink biasa. Anda cukup menambahkan tanda # didepan nama anchor yang dituju

<A HREF="#contoh1">pergi ke contoh anchor </A>

.

Bagaimana kalau kita ingin pergi ke anchor di halaman yang lain? Cukup ikuti contoh dibawah:

<A HREF="http://sexyclimate.blogspot.com/2009/07/membuat-image-map.html#contoh2">pergi ke contoh anchor di halaman lain </A>

Ini adalah hasil link diatas : pergi ke contoh anchor di halaman lain

ini contoh anchor

Membuat image map

Image map adalah cara membuat sebuah image/ gambar menjadi beberapa link sekaligus. Lebih mudahnya kita lihat gambar dari posting Street Fighter IV yang akan kita jadikan sebagai bahan praktek.

Ide dasarnya adalah membuat setiap foto karakter street fighter IV diatas menjadi link ke halaman masing-masing. Kita bisa melakukannya dengan cara yang mudah atau cara yang rumit hehe..

Cara yang mudah: Potong-potong gambar diatas lalu susun dan masukkan dalam tabel, baru masing-masing potongan gambar dikasih link. Mudah tho, enak tho, whahaha..

Trus kenapa mesti melakukan dengan cara yang rumit? Kenapa mesti membuat image map? Pertimbangkan hal berikut:

• Semakin banyak gambar yang diloading berarti semakin banyak HTTP Request (semakin lambat pula loading halaman kita), dan gambar diatas mesti dipotong menjadi puluhan gambar, artinya puluhan HTTP Request bisa kita hemat bila kita lakukan image mapping.
• Setiap gambar memiliki tabel warna dalam file-nya, puluhan potongan gambar akan memerlukan puluhan tabel warna yang berulang padahal dengan 1 gambar maka ukuran file bisa diperkecil karena cuma memakai 1 tabel warna, atau paling tidak bisa sama besarnya dengan gabungan seluruh potongan gambar tersebut.
• Ilmu kita bertambah, ini yang paling penting ;)

Sekarang kita buat kode HTML yang diperlukan

<div align="center"> <img style="width: 390px; height: 595px;" usemap="#mapFighter" alt="Select your street fighter" src="street-fighter-4-select.jpg"> </div>

Tag <div> kita gunakan untuk membungkus kode agar gambar berada ditengah, sementara pada tag <img /> kita melihat usemap="#mapFighter" yang merupakan nama map yang akan kita buat

Sekarang mari kita buat image map -nya yang akan diberi nama mapFighter seperti yang kita lihat pada kode dibawah:

<div align="center"> <map name="mapFighter"> </map> <img style="width: 390px; height: 595px;" usemap="#mapFighter" alt="Select your street fighter" src="street-fighter-4-select.jpg"> </div>

Dalam image map ini kita akan membuat area berbentuk persegi panjang. Perhatikan kode berikut:

<div align="center"> <map name="mapFighter"> <area href="http://sexyclimate.blogspot.com/2009/05/fei-long.html" alt="fei-long" title="fei-long" shape="RECT" coords="0,0,100,80"> </map> <img style="width: 390px; height: 595px;" usemap="#mapFighter" alt="Select your street fighter" src="street-fighter-4-select.jpg"> </div>

Kode yang mesti kita perhatikan adalah shape="RECT" coords="0,0,100,80", menandakan persegi panjang (RECT) dengan ukuran piksel-nya = horisontal 100 dan vertikal 80 ; dihitung dari sudut kiri atas gambar (0,0) sehingga didapat coords="0,0,100,80"

Bagaimana menentukan koodinat gambar yang ditengah? Misalkan gambar kang mas Guile.

<div align="center"> <map name="mapFighter"> <area href="http://sexyclimate.blogspot.com/2009/05/fei-long.html" alt="fei-long" title="fei-long" shape="RECT" coords="0,0,100,80"> <area href="http://sexyclimate.blogspot.com/2009/05/guile.html" alt="Guile" title="Guile" shape="RECT" coords="200,160,300,240"> </map> <img style="width: 390px; height: 595px;" usemap="#mapFighter" alt="Select your street fighter" src="street-fighter-4-select.jpg"> </div>

ukuran persegi panjang kita tetap 100 x 80 pixel tetapi dengan titik awal yang berbeda, disini sudut kiri atas persegi panjang kita adalah titik 200px,160px sehingga sudut kanan bawahnya menjadi (200px+100px=300px),(160px+80px=240px). Kita dapatkan angka coords="200,160,300,240"

Berikut kode html lengkapnya:

<div align="center"> <map name="mapFighter"> <area href="http://sexyclimate.blogspot.com/2009/05/fei-long.html" alt="fei-long" title="fei-long" shape="RECT" coords="0,0,100,80"> <area href="http://sexyclimate.blogspot.com/2009/05/cammy.html" alt="Cammy" title="Cammy" shape="RECT" coords="100,0,200,80"> <area href="http://sexyclimate.blogspot.com/2009/05/akuma.html" alt="Akuma" title="Akuma" shape="RECT" coords="200,0,300,80"> <area href="http://sexyclimate.blogspot.com/2009/06/gouken.html" alt="Gouken" title="Gouken" shape="RECT" coords="300,0,400,80"> <area href="http://sexyclimate.blogspot.com/2009/05/dhalsim.html" alt="Dhalsim" title="Dhalsim" shape="RECT" coords="0,80,100,160"> <area href="http://sexyclimate.blogspot.com/2009/05/blanka.html" alt="Blanka" title="Blanka" shape="RECT" coords="100,80,200,160"> <area href="http://sexyclimate.blogspot.com/2009/05/chun-li.html" alt="Chun-Li" title="Chun-Li" shape="RECT" coords="200,80,300,160"> <area href="http://sexyclimate.blogspot.com/2009/05/ryu.html" alt="Ryu" title="Ryu" shape="RECT" coords="300,80,400,160"> <area href="http://sexyclimate.blogspot.com/2009/05/edmund-honda.html" alt="Edmund Honda" title="Edmund Honda" shape="RECT" coords="0,160,100,240"> <area href="http://sexyclimate.blogspot.com/2009/05/zangief.html" alt="Zangief" title="Zangief" shape="RECT" coords="100,160,200,240"> <area href="http://sexyclimate.blogspot.com/2009/05/guile.html" alt="Guile" title="Guile" shape="RECT" coords="200,160,300,240"> <area href="http://sexyclimate.blogspot.com/2009/05/ken-masters.html" alt="Ken Master" title="Ken Master" shape="RECT" coords="300,160,400,240"> <area href="http://sexyclimate.blogspot.com/2009/06/seth.html" alt="Seth" title="Seth" shape="RECT" coords="0,240,400,320"> <area href="http://sexyclimate.blogspot.com/2009/05/m-bison.html" alt="M. Bison" title="M. Bison" shape="RECT" coords="0,320,100,400"> <area href="http://sexyclimate.blogspot.com/2009/05/sagat.html" alt="Sagat" title="Sagat" shape="RECT" coords="100,320,200,400"> <area href="http://sexyclimate.blogspot.com/2009/05/vega.html" alt="Vega" title="Vega" shape="RECT" coords="200,320,300,400"> <area href="http://sexyclimate.blogspot.com/2009/05/balrog.html" alt="Balrog" title="Balrog" shape="RECT" coords="300,320,400,400"> <area href="http://sexyclimate.blogspot.com/2009/05/abel.html" alt="Abel" title="Abel" shape="RECT" coords="0,400,100,480"> <area href="http://sexyclimate.blogspot.com/2009/05/crimson-viper.html" alt="Crimson Viper" title="Crimson Viper" shape="RECT" coords="100,400,200,480"> <area href="http://sexyclimate.blogspot.com/2009/05/rufus.html" alt="Rufus" title="Rufus" shape="RECT" coords="200,400,300,480"> <area href="http://sexyclimate.blogspot.com/2009/05/el-fuerte.html" alt="El-Fuerte" title="El-Fuerte" shape="RECT" coords="300,400,400,480"> <area href="http://sexyclimate.blogspot.com/2009/06/sakura.html" alt="Sakura" title="Sakura" shape="RECT" coords="0,480,100,560"> <area href="http://sexyclimate.blogspot.com/2009/06/rose.html" alt="Rose" title="Rose" shape="RECT" coords="100,480,200,560"> <area href="http://sexyclimate.blogspot.com/2009/05/dan-hibiki.html" alt="Dan Hibiki" title="Dan Hibiki" shape="RECT" coords="200,480,300,560"> <area href="http://sexyclimate.blogspot.com/2009/05/gen.html" alt="Gen" title="Gen" shape="RECT" coords="300,480,400,560"> </map> <img style="width: 390px; height: 595px;" usemap="#mapFighter" alt="Select your street fighter" src="street-fighter-4-select.jpg"> </div>

Silahkan kunjungi Street Fighter IV untuk melihat hasil yang sudah jadi

Membuat sebuah link yang membuka dalam halaman yang baru

Ini bukan sekedar tips blogger, tapi lebih pada tips html. Membuat sebuah link biasa akan berbentuk seperti ini:

< a href="http://sexyclimate.blogspot.com/"> Tips and Download </a>

Link yang kita klik akan membuat halaman diloading di tempat kita berada. Sering kita menginginkan sebuah link membuka halaman pada tab yang baru agar kita tidak kehilangan halaman kita berada saat ini. Tambahkan kode berikut :

target="_blank"

Kode HTML kita menjadi:

< a href="http://sexyclimate.blogspot.com/" target="_blank"> Tips and Download </a>

Simpel, tapi sering terlupakan. Berikut adalah hasil link yang telah jadi: [ Tips and Download ]