Membuat Tabel Warna Efek Hover di Blog

Posted on

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

Atau anda bisa melihat tabel dibawah ini :

JUDUL 1JUDUL 2
Isi Kolom 1 Baris 2Link 1
Isi Kolom 1 Baris 3Link 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!

Ikuti websiteedukasi.com di aplikasi Google News dengan cara Following (temukan feed website edukasi di bagian Following/Mengikuti) untuk mendapatkan informasi atau berita terbaru dengan sangat mudah.

Leave a Reply

Your email address will not be published. Required fields are marked *