Cara Membuat Tabel Keterangan Responsive di Blog


Tutorial blog kali ini tentang cara membuat table keterangan di blogspot atau blogger seperti yang demonya anda dapat lihat pada laman Pasang Iklan di blog ini. Kalau anda pengguna template blog +Arlina Fitriyani pasti anda sudah melihat tata letak tabel keterangan template yang ada di blog tersebut. Table keterangan ini berguna mempermudah pengunjung untuk melihat fitur apa saja yang terdapat pada template tersebut.

Artikel sebelumnya: Cara Membuat Sitemap/Daftar Isi Berdasarkan Label Secara Otomatis

Selain untuk keterangan fitur template, tabel ini juga dapat anda terapkan untuk membuat keterangan lainnya, misalnya keterangan untuk bisnis online, klasemen bola atau motoGP dan lain sebagainya.
Cara Membuat Tabel Keterangan di Blog

Berikut ini contoh penggunaan tabel untuk keterangan sebuah bisnis online:
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 High risk
Bagaimana? Anda juga tertarik memasangnya di blog anda? Silahkan ikuti tutorialnya berikut ini.

Cara Membuat Tabel Keterangan Unik Seperti Arlina Design

Kopi kode berikut ini dan masukkan ke template blogger anda, dengan cara masuk ke dasbor blog > Template > Edit HTML. Kemudian letakkan kode berikut tepat di atas kode </style> atau </b:skin>

/* CSS Post Table */
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 #5a97ff;padding:10px;text-align:left;vertical-align:top;background:#4588f3 !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}

Jangan lupa simpan template.

Kemudian jika setiap anda membuat postingan yang membutuhkan tabel tersebut, silahkan edit kode berikut ini pada notepad, sesuaikan keterangan yang akan dibuat dalam tabel.

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

Demikian modifikasi tabel keterangan untuk blogspot/blogger kali ini, semoga membantu dan selamat mencoba.

Advertisement