Cara Mudah Memuat Tabel Responsive di Blog | Emang Bisa? Part 1

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.

Codding Untuk Membuat Tabel di Blog

#1. Masuk terlebih dahulu ke blogger.

#2. Pilih menu tema > pilih edit html.

#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 Tabel Responsive di Postingan Blog

#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.

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

 Demo

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.

Share this post