Cara Membuat Tabel Dengan Efek Hover Keren

Cara Membuat Tabel Dengan Efek Hover Keren Tutorial yang kezit bahas kali ini agar tampilan blog sobat menjadi lebih keren lagi.
Agar Tutorial ini berjalan sesuai rencana coba sobat blogger ikuti langkah dibawah ini dengan teliti ...

1.  Login ke Blogger
2.  Masuk ke Template >> Edit HTML
3.  Letakkan kode CSS di bawah ini diatas ]]></b:skin> :

 /* visit www.kezit.com */
table {
    *border-collapse: collapse;
    borderJScript-spacing: 0;
    width: 100%;  
}

.bordered {
    border: solid #f0f0f0 1px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0 1px 1px #666;
    -moz-box-shadow: 0 1px 1px #666;
    box-shadow: 0 1px 1px #666;       
}

.bordered tr:hover {
    background: #aaa;
    -o-transition: all 0.1s ease-in-out;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;   
}  
  
.bordered td, .bordered th {
    border-left: 1px solid #f0f0f0;
border-right: 1px solid #aaa;
    border-top: 1px solid #aaa;
border-bottom: 1px solid #f0f0f0;
    padding: 5px;
    text-align: left;  
}

.bordered th {
background: rgb(238,238,238);
background: -moz-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(204,204,204,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(204,204,204,1))); 
background: -webkit-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%);
background: -o-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%);
background: -ms-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%);
background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); 
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
    -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
    box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;      
    border-top: none;
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
text-align:center;padding:10px;font:16px;
}

.bordered td:first-child, .bordered th:first-child {
    border-left: none;
}

.bordered th:first-child {
    -moz-border-radius: 6px 0 0 0;
    -webkit-border-radius: 6px 0 0 0;
    border-radius: 6px 0 0 0;
}

.bordered th:last-child {
    -moz-border-radius: 0 6px 0 0;
    -webkit-border-radius: 0 6px 0 0;
    border-radius: 0 6px 0 0;
}

.bordered th:only-child{
    -moz-border-radius: 6px 6px 0 0;
    -webkit-border-radius: 6px 6px 0 0;
    border-radius: 6px 6px 0 0;
}

.bordered tr:last-child td:first-child {
    -moz-border-radius: 0 0 0 6px;
    -webkit-border-radius: 0 0 0 6px;
    border-radius: 0 0 0 6px;
}

.bordered tr:last-child td:last-child {
    -moz-border-radius: 0 0 6px 0;
    -webkit-border-radius: 0 0 6px 0;
    border-radius: 0 0 6px 0;
}

4. Selanjutnya untuk memanggil kode CSS diatas , letakkan kode HTML dibawah ini kedalam posting sobat

Baris 1 Kolom 1
      
Baris 1 Kolom 2
Baris 1 Kolom 3




Baris 2 Kolom 1
      
Baris 2 Kolom 2
Baris 2 Kolom 3


Baris 3 Kolom 1
       
Baris 3 Kolom 2
Baris 3 Kolom 3

Demikian Tutorial Cara Membuat Tabel Dengan Efek Hover Keren dan untuk penggantian warna tabel sobat bisa custom code CSS diatas sesuai keinginan sobat ....

Demo Live

Selamat Mencoba Dan Happy Blogging ...