Cara membuat tabel keren dengan Highlight di blog

Klik gambar untuk memperbesar!
Cara membuat tabel keren dengan Highlight di blog ini berbeda dengan tabel standar yang biasanya teman2 lihat. Tabel ini mempunya efek Highlight yang bisa memberikan petunjuk/arah pada cursor ketika di sorot, sebagai contoh teman2 bisa lihat pada artikel Biodata Admin disana coba arahkan cursor ke tabelnya.

Langkah-langkah :
1. Buka blogger dan Entri Baru
2. Plilih HTML bukan yang Compse
3. Masukan kode berikut :
<!-- Row Highlight Javascript -->
<script type="text/javascript">
 window.onload=function(){
 var tfrow = document.getElementById('tfhover').rows.length;
 var tbRow=[];
 for (var i=1;i<tfrow;i++) {
  tbRow[i]=document.getElementById('tfhover').rows[i];
  tbRow[i].onmouseover = function(){
    this.style.backgroundColor = '#000000';
  };
  tbRow[i].onmouseout = function() {
    this.style.backgroundColor = 'transparent';
  };
 }
};
</script>
<style type="text/css">
table.tftable tr {background-color:transparent;}
</style>
<br />
<table border="1" class="tftable" id="tfhover">
<tbody>
<tr><th>Nama 1</th><th>Nama 2</th></tr>
<tr><td>Alamat 1</td><td>Alamat 2</td></tr>
</tbody></table>
4. Edit sesuai keinginan
5. Publikasikan!

Keterangan :
  • Warna Merah adalah warna yang akan muncul pada saat disorot kursor
  • Warna Biru menandakan tulisan Blod pada tulisannya
  • Warna Hijau menandakan tulisan biasa
Apabila ada yang perlu di tanyakan silahkan komentari saja artikel ini. Dan ane ucapkan terima kasih atas kunjungannya.

[update title="Informasi buat sobat" icon="info-circle"]Saat ini sobat sedang membaca artikel Cara membuat tabel keren dengan Highlight di blog
Sumber:http://www.anthzo.com/2014/05/cara-membuat-tabel-keren-dengan.html
Jangan lupa untuk memberikan komentar supaya situs ini terus update, terima kasih.[/update]

Posting Komentar

[blogger][facebook][disqus]

Image 1 Title

Image 1 Title
Sesuatu yang sangat berharga

Formulir Kontak

Nama

Email *

Pesan *

Diberdayakan oleh Blogger.