Cara Membuat Tabel Keterangan Responsive di Blog – Tabel adalah sebuah kotak yang tersusun-susun dengan rapi yang biasanya di gunakan untuk memberikan keterangan fitur di blog agar terlihat rapi dan menarik. Tabel ini sangat sering terlihat pada sebuah blog yang membagi Template, sehingga mengharuskan memasang Tabel untuk memberi keterangan fitur apa saja yang terdapat pada template blog sobat. Salin itu Tabel ini juga dapat sobat gunakan untuk memberikan keterangan lainnya sesuai kebutuhan sobat.
Manfaat Tabel ini adalah merapikan sebuah Fitur atau keterangan yang berada di sebuah halaman atau postingan blog sehingga terlihat lebih rapi dan menarik. Keunggulan Tabel ini adalah dapat menyesuaikan dengan lebar panjang Template dan Kebutuhan sobat (Responsive). Bagi sobat yang berimnat memasangnya atau tertarik untuk mempelajari nya silahkan sobat simak tutorial nya berikut ini.
Baca juga : Cara Paling Ampuh Mempercepat Loading Dengan Lazy Load
Baca juga : Cara Paling Ampuh Mempercepat Loading Dengan Lazy Load
1. buka Blog Sobat > masuk menu “Template” > Edit HTML > salin kode CSS di bawah ini dan letakkan di atas kode </style> atau </b:skin>
</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%}
tablesection-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}
2. simpan Template. Kemudian cara penerapannya di Postingan sobat silahkan edit kode berikut ini pada noteped, sesuaikan keterangan yang akan di buat 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>
Baca juga : Cara Memasang Tombol share Media Sosial Responsive Sumome.com
Demikianlah tutorial mengenai Cara Membuat Tabel Keterangan Responsive di Blog, yang harus di ketahui. jika sobat ada masalah atau sudah berhasil jangan lupa untuk mengisi Kotak komentar di bawah ini. Semoga artikel ini dapat menjadi ilmu yang bermanfaat.
0 Komentar