Cara Membuat Tabel Responsive ala Arlinadgzn

Cara Membuat Tabel Responsive ala Arlinadgzn_Bagaimana cara membuat tabel di blogger? tentu banyak pertanyaan tentang ini. pada kesempatan kali ini sunarclub akan memberikan sebuah tutoril cara membuat tabel responsive ala arlinadgn. ikuti langkah-langkah di bawah ini.

Cara Membuat Tabel Responsive

1. Login ke Blogger
2. Klik menu Template setelah itu klik edit HTML
3, Cari kode ]]></b:skin> untuk memudahkan pencarian tekan CTRL + F
4. Copy kode di bawah ini dan letakan di atas kode ]]></b:skin>

/* 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%}

5. Simpan Template

Cara Penggunan di Postingan Blog

Jika setiap anda membuat postingan yang membutuhkan tabel tersebut, silahkan edit kode di bawah ini pada notepad dan sesuaikan dengan kebutuhan tabel yang akan anda buat

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

Maka Hasilnya akan tampak 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

Terima kasih telah berkunjung dan membaca artikel singkat ini.
Salam sukses