Cara Membuat Tabel Keterangan Yang Responsive Seperti ArlinaDezign

Tutorial blog kali ini tentang cara membuat table keterangan yang responsive .Jika anda adalah pengguna template dari ArlinaDezign anda pasti pernah melihat tabel ini.Tabel ini berfungsi untu memberikan keterangan kepada pembaca agar lebih mudah dalam memahami.Biasanya digunakan dalam blog download template,bisnis,review,dll.

Berikut penampakan dari tabel keterangan yang akan saya bagikan:

Ok langsung saja berikut langkah-langkah membuat tabel keterangan yang responsive:

Masukkan kode berikut ke blog sobat dengan cara masuk ke dasbor blog > template > edit html
Salin kode dibawah ini lalu letakkan/pastekan tepat diatas kode </style> atau ]]></b:skin> 
 

Kode Html

/* 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 untuk klik simpan.

Lalu jika anda ingin menampilkan tabel pada postingan anda,silakan masukkan kode berikut pada saat anda membuat postingan di html jangan di compose.Dan jangan lupa untuk mengedit keterangannya.

Kode Html

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

Ganti kode yang berwarna merah dengan keterangan yang anda inginkan.

Itulah tutorial cara membuat tabel keterangan yang responsive,semoga tutorial ini bermanfaat bagi kita semua.