Buat Tabel di Blog? Emang Bisa? Part 1

Cara Membuat Tabel Keterangan Responsive di Blog
Tabel merupakan susunan data dalam baris dan kolom, yang berfungsi untuk menjelaskan deskripsi sesuatu. Seperti halnya tabel spesifikasi hp, laptop atau pengertian lainnya, tabel ini bersifat menjelaskan. Yang terdiri dari 2 kolom, antara pengertian dan penjelasan. Tapi tahukah sobat, didalam blogger atau website, juga bisa membuat tabel?, gak hanya di word atau excel aja. Jika tertarik untuk membuatnya, silahkan ikuti panduannya dibawah ini.


Coddingnya

#1. Masuk terlebih dahulu ke blogger.
#2. Pilih menu tema > pilih edit html.
Menu Tema di Blogger

#3. Copy kode dibawah ini dan pastekan tepat diatas kode ]]></b:skin> atau sebelum </style>
/* Table Post */
table,caption,tbody{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
table{border-collapse:collapse;border-spacing:0;}
.post-body table td,.post-body table caption{border:1px solid #e9e9e9;padding:10px;text-align:left;vertical-align:top;}
.post-body table tr th {border:1px solid #457fdf;font-weight:bold;color:#fff;padding:15px 10px;text-align:left;vertical-align:top;font-size:14px}
.post-body table th {background:#4285f4;}
.post-body table.tr-caption-container {border:1px solid #f1f1f1;}
.post-body table caption{border:none;font-style:italic;}
.post-body td, .post-body th{vertical-align:top;text-align:left;font-size:13px;padding:3px 5px;}
.post-body table tr:nth-child(even) > td {background-color:#f9f9f9;}
.post-body table tr:nth-child(even) > td:hover {background-color:#fbfbfb;}
.post-body td a{color:#768187;padding:0 6px;font-size:85%;float:right;display:inline-block;border-radius:3px}
.post-body td a:hover {color:#7f9bdf;border-color:#adbce0;}
.post-body td a[target="_blank"]:after {margin-left:5px;}
.post-body table.tr-caption-container td {border:none;padding:8px;}
.post-body table.tr-caption-container, .post-body table.tr-caption-container img, .post-body img {max-width:100%;height:auto;}
.post-body td.tr-caption {color:#666;font-size:80%;padding:0px 8px 8px !important;}
table {max-width:100%;width:100%;margin:1.5em auto;}
table.section-columns td.first.columns-cell{border-left:none}
table.section-columns{border:none;table-layout:fixed;width:100%;position:relative}
table.columns-2 td.columns-cell{width:50%}
table.columns-3 td.columns-cell{width:33.33%}
table.columns-4 td.columns-cell{width:25%}
table.section-columns td.columns-cell{vertical-align:top}
table.tr-caption-container{padding:4px;margin-bottom:.5em}
td.tr-caption{font-size:80%}
#4. Jika sudah klik simpan pada template sobat.


Cara Memasang Tabelnya di Postingan

#1. Sekarang saatnya menempelkan pada postingan sobat, copy kode dibawah ini dan paste kan di postingan sobat dalam mode HTML bukan Compose. Seperti gambar dibawah ini.
Memasukkan Kode HTML ke Blogger
<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody>
<tr> <th>Detail:</th> <th>RevenueHits</th> </tr>
<tr> <td>Website URL</td> <td>url here</td> </tr>
<tr> <td>Tipe jaringan</td> <td>CPM, CPC, CPA</td> </tr>
<tr> <td>Tipe iklan</td> <td>Banner, Rich media, pop up/under, text</td> </tr>
<tr> <td>Metode pembayaran</td> <td>Paypal, Wire Transfer, Payoneer</td> </tr>
<tr> <td>Minimal Payout</td> <td>Paypal $20, Wire transfer $500, Payoneer $20</td> </tr>
<tr> <td>Fill rate</td> <td>100%</td> </tr>
<tr> <td>Frekuensi pembayaran</td> <td>NET 30</td> </tr>
<tr> <td>Rate eCPM tertinggi</td> <td>US, Europe traffic</td> </tr>
<tr> <td>Penerimaan traffic</td> <td>Seluruh negara</td> </tr>
<tr> <td>Ad Mobile</td> <td>Yes</td> </tr>
<tr> <td>Ad custom format</td> <td>Yes</td> </tr>
<tr> <td>Affiliasi</td> <td>Yes</td> </tr>
<tr> <td>Bebas virus dan malware</td> <td>Yes</td> </tr>
<tr> <td>Dukungan web Indonesia</td> <td>Yes</td> </tr>
<tr> <td>Kolaborasi dengan Adsense</td> <td>Hight risk</td> </tr>
</tbody> </table>
#2. Sesuaikan tabel dengan deskripsi sobat > lalu klik pratinjau untuk melihat hasilnya. Jika dirasa sudah benar pilih publikasikan.
#3. Selesai.
Saran dari aku : Terlebih dahulu, kalau mau buat artikel yang ada tabelnya, hal pertama yang perlu dibuat yaitu tabelnya dulu, bukan isi teks artikelnya. Takutnya nanti, sobat kebingungan mengcopy kode tabelnya kedalam mode html.
Bagaimana keren gak? hehehe. Btw, kalau sobat pengen buat tabel jenis lain, coba klik link biru ini deh, mana tau sobat tertarik buat tabel di blog part 2. Sobat masih bisa merubah tampilan warna baris dan kolom tabelnya dengan menyesuaikan css warnanya. Mudah bukan? hehehe. Mungkin itu aja sih dari aku. Terima kasih.

Perkenalkan nama aku andolvin yuki, nama panggilan aku dolvin. Aku adalah seorang pria yang cinta kedamaian, yang suka berbagi dan mencari informasi. Keahlian blogging aku yaitu redesign template, buat template, toturial blogging dan editing. Kalau mau bertanya dan berkomentar di blog ini aku persilahkan, tapi gak boleh SPAM yahh. Arigatou. Terima kasih.



Emoticon