Membuat Tabel Warna Efek Hover di Blog

Tabel adalah daftar yang berisi ikhtisar sejumlah data-data informasi yang biasanya berupa kata-kata maupun bilangan yang tersusun dengan garis pembatas. Tabel dibuat bertujuan agar memberikan banyak informasi secara ringkas dan dapat mempermudah pembaca dalam memahami bacaan.

Membahas mengenai tabel tutorial kali ini saya akan berbagi kepada sahabat Blogger membuat tabel warna dengan efek hover. Tabel dengan Efek Hover menurut saya cukup menarik dimana, baris tabel akan secara otomatis menyeleksi alias berubah warna saat salah satu baris tersentuh oleh cursor dan pada Tabel Warna Efek Hover juga dapat disertakan link tujuan. sebagai contoh anda bisa meliahat demonya

• Demo

Atau anda bisa melihat tabel dibawah ini :

JUDUL 1	JUDUL 2
Isi Kolom 1 Baris 2	Link 1
Isi Kolom 1 Baris 3	Link 2

Untuk membuat Tabel Warna Efek Hover seperti diatas, anda hanya memerlukan beberapa langkah :

1. Login Keakun Blogger
2. Anda masuk Laman Baru
3. Selanjutnya anda menuju mode Compose HTML
4. kemujian anda terapkan script dibawah ini pada content yang tersedia

<table border="0" cellpadding="10" cellspacing="5" heiht="50pt" style="width: 100%;"><tbody>

<tr bgcolor="#7293ff">
<td ><b>JUDUL 1</b></td>
<td ><b>JUDUL 2</b></td>
</tr>

<tr bgcolor="#98c6ff"onmouseover="this.style.backgroundColor='#9d9d9d';" onmouseout="this.style.backgroundColor='#98c6ff';">
<td >Isi Kolom 1 Baris 2</td>
<td ><a href="http://aak-share.blogspot.com">Link 1</a></td>

<tr bgcolor="#98c6ff"onmouseover="this.style.backgroundColor='#9d9d9d';" onmouseout="this.style.backgroundColor='#98c6ff';">
<td>Isi Kolom 1 Baris 3</td>
<td ><a href="http://aak-share.blogspot.com">Link 2</a></td>
</tr>

Penjelasan :

• cellpadding="10" adalah ukuran lebar pada kolom warna tabel
• cellspacing="5"  adalah jarak kolom tabel
•  bgcolor="#98c6ff" adalah warna dasar tabel
• backgroundColor='#9d9d9d' adalah warna hover
• http://aak-share.blogspot.com ganti dengan URL website/Blog anda

Untuk penambahan kolom pada tabel anda cukup beri penambahan, berikut ini contohnya :

Sebelum penambahan :

<tr bgcolor="#7293ff">
<td ><b>JUDUL 1</b></td>
<td ><b>JUDUL 2</b></td>
</tr>

<tr bgcolor="#98c6ff"onmouseover="this.style.backgroundColor='#9d9d9d';" onmouseout="this.style.backgroundColor='#98c6ff';">
<td >ISI Kolom 1 Baris 2</td>
<td ><a href="http://aak-share.blogspot.com">Link 1</a></td>

Sesudah penambahan

<tr bgcolor="#7293ff">
<td ><b>JUDUL 1</b></td>
<td ><b>JUDUL 2</b></td>
<td ><b>JUDUL 3</b></td></tr>

<tr bgcolor="#98c6ff"onmouseover="this.style.backgroundColor='#9d9d9d';" onmouseout="this.style.backgroundColor='#98c6ff';">
<td >ISI Kolom 1 Baris 2</td>
<td >ISI Kolom 1 Baris 2</td>
<td ><a href="http://aak-share.blogspot.com">Link 1</a></td>

Demikian Cara Membuat Tabel Warna Efek Hover di Blog, semoga bermanfaat!

Share this post