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
Atau anda bisa melihat tabel dibawah ini :
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 modeCompose HTML
4. kemujian anda terapkan script dibawah ini pada content yang tersedia
Penjelasan :
Untuk penambahan kolom pada tabel anda cukup beri penambahan, berikut ini contohnya :
Sebelum penambahan :
Sesudah penambahan
Demikian Cara Membuat Tabel Warna Efek Hover di Blog, semoga bermanfaat!
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 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
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>
<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>
<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>
<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!