Cara Membuat Tabel Keterangan Unik dan Responsive di Blog
Tutorial blog kali ini kita akan menjelaskan cara membuat Tabel Keterangan Unik di blogspot atau blog seperti demo yang bisa kalian lihat di halaman posting blog ini. Jika kalian pengguna template blog dari mbak Arlina yang terkenal dengan blog Arlina Design nya, Anda mungkin pernah melihat tata letak tabel deskripsi model di blog.
Tabel keterangan ini berguna untuk memudahkan pengunjung melihat fitur mana saja yang termasuk dalam model. Selain deskripsi fitur model, Anda juga dapat menggunakan tabel ini untuk membuat informasi lain, seperti informasi tentang aktivitas online, posting sepak bola atau Moto GP, Spesifikasi Handphone, dan lain sebagainya.
Berikut ini contoh penggunaan tabel untuk keterangan sebuah bisnis online:
| Detail: | Keterangan |
|---|---|
| Website URL | www.anaksmanda.com |
| Tipe jaringan | CPM, CPC, CPA |
| Tipe iklan | Banner, Rich media, pop up/under, text |
| Metode pembayaran | Bank BCA, BRI, MANDIRI, BNI, Paypal, Dana |
| Minimal Payout | BCA$20, BRI $500, DANA $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 |
Cara Membuat Tabel Keterangan Unik dan Responsive Seperti Arlina Design
- Copi kode berikut ini dan masukkan ke template blogger kalian, 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 kalian 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 Cara Membuat Tabel Keterangan Unik dan Responsive di Blog kali ini, semoga membantu dan selamat mencoba.