Cara Membuat Tabel Keterangan Responsive di Blogger

Tutorial yang saya akan bahas kali ini adalah Cara Membuat Tabel Keterangan Responsive di Blogger. Table keterangan ini berguna mempermudah pengunjung untuk melihat fitur apa saja yang terdapat pada template tersebut, biyasanya di gunakan untuk Klasemen sepak bola dan sebagainya.

Nah setelah memberikan sedikit informasi tentang Tabel Keterangan sekarang kita lihat seperti apa untuk demo nya, untuk demo nya lihat di bawah ini :

Detail:	RevenueHits
Website URL	url here
Tipe jaringan	CPM, CPC, CPA
Tipe iklan	Banner, Rich media, pop up/under, text
Metode pembayaran	Paypal, Wire Transfer, Payoneer
Minimal Payout	Paypal $20, Wire transfer $500, Payoneer $20
Fill rate	100%
Frekuensi pembayaran	NET 30
Rate eCPM tertinggi	US, Europe traffic
Penerimaan traffic	Seluruh negara
Ad Mobile	Yes
Ad custom format	Yes
Affiliasi	Yes
Bebas virus dan malware	Yes
Dukungan web Indonesia	Yes
Kolaborasi dengan Adsense	Hight risk

Kamu berminat untuk Membuat Tabel Keterangan tersebut berikut ini tutorialnya :

1. Login Blogger, Klik Template → Edit HTML.

2. Cari tag </head> lalu letakkan CSS di bawah ini sebelum tag </head> .

<style>
/* Table MeHaday Update */.
table{border-collapse:collapse;border-spacing:0;}
.post-body table td {border:1px solid #e9e9e9;padding:10px;text-align:left;vertical-align:top;}
.post-body table th {border:1px solid #ff548e;padding:10px;text-align:left;vertical-align:top;background:#ff4081 !important;color:#fff}
.post-body td, .post-body th{vertical-align:top;text-align:left;font-size:13px;padding:3px 5px;}
.post-body th{background:#fff;font-weight:400;text-transform:uppercase;font-size:14px}
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:50%}
table.columns-4 td.columns-cell{width:30%}
table.section-columns td.columns-cell{vertical-align:top}
table.tr-caption-container{padding:4px;margin-bottom:.5em}
td.tr-caption{font-size:80%}
.post-body td img, .post-body th img {list-style:none;max-width:100%;height:auto;padding:0 !important;margin:0 !important}
.post-body table.tr-caption-container img, .post-body table.tr-caption-container img, .post-body img {list-style:none;max-width:100%;height:auto;padding:0 !important;margin:0 !important}
.post-body table.tr-caption-container td {border:none;padding:0 !important;margin:0 !important}
.post-body table caption{max-width:100%;height:auto;border:none !important;padding:0 !important}
.post-body img.video-thumbnail,.youtube-thumb{visibility:hidden !mportant;display:none !important;height:0}
/* #Done Table MeHaday Update */.
</style>

3. Simpan Template kamu.

4. Bila kamu ingin membuat Table tersebut dalam postingan kamu. Silahkan untuk Menuju Postingan, Klik Entri baru. Setelah kamu masuk klik pada bagian HTML di bagian atas dekat dengan judul entri kamu.

5. Lalu paste kan kode di bawah 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>

6. Selesai, Ganti tulisan berwarna merah dengan sesuatu yang kamu inginkan.

Sekian yang dapat saya sampaikan semoga artikel ini dapat bermanfaat bagi kamu. Bila kamu ingin bertanya silahkan berkomentar di kolam komentar.