Membuat Tabel Keterangan Responsive Pada Blog – Tabel kali ini adalah tabel keterangan yang dapat sobat pakai misalkan memberi keterangan template sobat dan juga keterangan lainnya, dengan menambahkan tabel pada postingan sobat akan memberi atau kan mempermudah pengunjung memahami keterangan yang disampaikan sobat dalam artikel tersebut.

Tabel ini juga dapat sobat pakai untuk memberi keterangan harga pasang iklan di blog sobat, dan juga memberi keterangan pada film juga bisa sob.

Oke langsung saja ke caranya ya sob.

Cara Membuat Tabel Keterangan Responsive Pada Blog

Pertama sobat masuk terlebih dahulu ke Blogger.com > Tema > Edit HTML copy kode dibawah ini dan pastekan tepat diatas kode ]]></b:skin> atau </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%}

Jika sudah klik simpan pada template sobat.

Sekarang saatnya menempelkan pada postingan sobat, copy kode dibawah ini dan paste kan di postingan dalam mode HTML bukan Compose

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

Edit keterangan sesuai sobat sendiri, Publikasikan.

Oke sekian yang bisa saya sampaikan tentang Cara Membuat Tabel Keterangan Responsive Pada Blog dari Maskalem. Terima Kasih yang sudah berkunjung semoga bermanfaat bagi kalian semua.