Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

Membuat Table Rounded Corner CSS3 di Blog

Table Rounded Corner CSS3 di Blog
Membuat Table Rounded Corner CSS3 di Blog – mungkin karena sudah trend jadi sekarang sudah jarang lagi pada blog yang masih memakai table standard bawaan blog atau default blogspot. Banyak dari para blogger jika mereka membuat table sudah menggunakan sedikit sentuhan kode CSS pada template blog mereka sehingga table yang terlihatpun tampak lebih cantik dibanding dengan menggunakan table default blogspot.
Untuk membuat table menjadi sedikit lebih cantik begitu pula terlihat sexy maka hanya perlu memasukan sedikit kode CSS pada template blog saja. Table Rounded Corner CSS3 ini memiliki 2 type, yang pertama pada table saat hover maka akan menampilkan highlight rows dan pada table type yang kedua maka sudah otomatis pada rows secara paten atau permanen tanpa hover rows sudah terhighlight atau tampak berbeda warna antara baris atas dengan baris yang dibawahnya. Untuk memasangnya kedalam blog maka berikut adalah tutorial cara Membuat Table Rounded Corner CSS3 di Blog:

1. Login ke akun blogger.
2. Copy kode CSS dibawah ini, lalu pada dashboard blog anda klik Template >> Sesuaikan >> Tingkat Lanjut >> Tambahkan CSS (paste kode CSS ini didalam kolom tersebut).
Table Rounded Corner CSS3 di Blog
table {
    *border-collapse: collapse; /* IE7 and lower */
    border-spacing: 0;
    width: 100%;  
}

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

.bordered tr:hover {
    background: #fbf8e9;
    -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 #ccc;
    border-top: 1px solid #ccc;
    padding: 10px;
    text-align: left;  
}

.bordered th {
    background-color: #dce9f9;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9));
    background-image: -webkit-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image:    -moz-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image:     -ms-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image:      -o-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image:         linear-gradient(top, #ebf3fc, #dce9f9);
    -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);
}

.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;
}

/*----------------------*/

.zebra td, .zebra th {
    padding: 10px;
    border-bottom: 1px solid #f2f2f2;  
}

.zebra tbody tr:nth-child(even) {
    background: #fbf8e9;
    -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;      
}

.zebra th {
    text-align: left;
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
    border-bottom: 1px solid #ccc;
    background-color: #eee;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#eee));
    background-image: -webkit-linear-gradient(top, #f5f5f5, #eee);
    background-image:    -moz-linear-gradient(top, #f5f5f5, #eee);
    background-image:     -ms-linear-gradient(top, #f5f5f5, #eee);
    background-image:      -o-linear-gradient(top, #f5f5f5, #eee);
    background-image:         linear-gradient(top, #f5f5f5, #eee);
}

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

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

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

.zebra tfoot td {
    border-bottom: 0;
    border-top: 1px solid #fff;
    background-color: #f1f1f1;
}

.zebra tfoot td:first-child {
    -moz-border-radius: 0 0 0 6px;
    -webkit-border-radius: 0 0 0 6px;
    border-radius: 0 0 0 6px;
}

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

.zebra tfoot td:only-child{
    -moz-border-radius: 0 0 6px 6px;
    -webkit-border-radius: 0 0 6px 6px
    border-radius: 0 0 6px 6px
}
Selanjutnya pada saat anda akan membuat table di posting blog, maka silahkan klik Entri Baru kemudian menggunakan kolom posting mode HTML lalu masukan kode diberikut ini kedalam halaman posting.

Table Type 1 kodenya:
<table class="bordered">
<thead>
<tr>
<th>Nomor</th>      
<th>Tutorial</th>
<th>Tanggal</th>
</tr>
</thead>
<tr>
<td>1</td>      
<td>Simple Gallery Photo di Blog</td>
<td>07/05/2013</td>
</tr>      
<tr>
<td>2</td>       
<td>Membuat Menu Drop Down Purple Style di Blog</td>
<td>03/05/2013</td>
</tr>
<tr>
<td>3</td>       
<td>Membuat Menu Drop Down Brown Style di Blog</td>
<td>02/05/2013</td>
</tr>  
<tr>
<td>4</td>
<td>Membuat Gallery Efek Polaroid Pada Blog</td>
<td>01/05/2013</td>
</tr>
<tr>
<td>5</td>
<td>Menu Horisontal Inverted Shiftdown</td>
<td>30/04/2013</td>
</tr>
</table>
Table type 2 kodenya:
<table class="zebra">
<thead>
<tr>
<th>Nomor</th>      
<th>Tutorial</th>
<th>Tanggal</th>
</tr>
</thead>
<tfoot>
<tr>
<td>&nbsp;</td>      
<td></td>
<td></td>
</tr>
</tfoot>  
<tr>
<td>1</td>      
<td>Simple Gallery Photo di Blog</td>
<td>07/05/2013</td>
</tr>      
<tr>
<td>2</td>       
<td>Membuat Menu Drop Down Purple Style di Blog</td>
<td>03/05/2013</td>
</tr>
<tr>
<td>3</td>       
<td>Membuat Menu Drop Down Brown Style di Blog</td>
<td>02/05/2013</td>
</tr>  
<tr>
<td>4</td>
<td>Membuat Gallery Efek Polaroid Pada Blog</td>
<td>01/05/2013</td>
</tr>
<tr>
<td>5</td>
<td>Menu Horisontal Inverted Shiftdown</td>
<td>30/04/2013</td>
</tr>
</table>
Dari kode diatas maka akan tampil seperti DEMO dibawah ini:

Table Type 1
Nomor Tutorial Tanggal
1 Simple Gallery Photo di Blog 07/05/2013
2 Membuat Menu Drop Down Purple Style di Blog 03/05/2013
3 Membuat Menu Drop Down Brown Style di Blog 02/05/2013
4 Membuat Gallery Efek Polaroid Pada Blog 01/05/2013
5 Menu Horisontal Inverted Shiftdown 30/04/2013

Table Type 2
Nomor Tutorial Tanggal
 
1 Simple Gallery Photo di Blog 07/05/2013
2 Membuat Menu Drop Down Purple Style di Blog 03/05/2013
3 Membuat Menu Drop Down Brown Style di Blog 02/05/2013
4 Membuat Gallery Efek Polaroid Pada Blog 01/05/2013
5 Menu Horisontal Inverted Shiftdown 30/04/2013

Berlangganan artikel via email

22 Response to "Membuat Table Rounded Corner CSS3 di Blog"

kalo css3 sebenarnya saya kurang paham, tapi setelah membaca tutor ini saya jadi lebih memahaminya..terimakasih kawan :-)

Balas

wah mantap mas makasih mas tutorialnya saya jadi paham nc cara buat tabelnya

Balas

thank yo mas bro
ngerti saya jadinya

Balas

bagus banget mas, dulu saya bingung bikin kolom spt di atas. terpaksa pakai excel trus di kopas. hehee
Save dulu ahh

Balas

wah nice posting sob kebetulan ane mau bikin tabel buat download tan bisa nggak :D

Balas

Ijin save sobat, selama ini saya pakai excelN print screen lalu dipost terima kasih sharenya.

Balas

Menarik sekali tutorialnya, Saya biasanya sama seperti Boku no Blog, print screen dari tabel excel.

Balas

hah mas hariyanto sukanya merendah nih :)

Balas

walopun udah paham biar tambah paham ya mas :)

Balas

kalo udah ngerti biar tambah ngerti ya mas :)

Balas

semoga adminnya juga bagus ya mbak :D
hohoho

Balas

kan tinggal teksnya aja dikasih link mas :)

Balas

gapapa mas asalkan gak pake winamp aja :D
hehehe

Balas

intinya sama2 bikin tabel cuma beda cara berarti ya mas :)

Balas

wah mantap tutorialnya ijin coba ya gan...
btw, kunjungan siang dari http://aiizahh.blogspot.com

Balas

mantap nih nih sob tutornya bs buat referensi praktek hehehe,,,makasih sudah berbagi sukses selalu

Balas

selalu sukses dengan tutorial blog nya mas bro

Balas

stuju bro,,tutornya mudah dipahami disini,sebelumnya saya juga sama bro,,,

Balas

Patut dicobanih Gan,Terimakasih untuk info yang satu ini,,,

Balas

jempol deh buat mas andes ;D

nnaty aku cobanya . hehe

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "Membuat Table Rounded Corner CSS3 di Blog" ini bermanfaat, share ke jejaring sosial.
Konversi Kode