Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Menciptakan Tabel Keterangan Responsive Di Postingan Blog


Cara Membuat Tabel Keterangan Responsive di Postingan Blog - Tabel kali ini ialah tabel keterangan yang sanggup teman pakai misalkan memberi keterangan template teman dan juga keterangan lainnya, dengan menambahkan tabel pada postingan teman akan memberi atau kan mempermudah pengunjung memahami keterangan yang disampaikan teman dalam artikel tersebut.

Tabel ini juga sanggup teman pakai untuk memberi keterangan harga pasang iklan di blog sobat, dan juga memberi keterangan pada film juga sanggup sob.

Baca Juga : Cara Membuat Tabel Spesifikasi Responsif di Blog 

Oke eksklusif saja ke caranya ya sob.

Cara Membuat Tabel Keterangan Responsive di Blog


Pertama teman masuk terlebih dahulu ke Blogger.com > Tema > Edit HTML copy isyarat dibawah ini dan pastekan sempurna diatas isyarat ]]></b:skin> atau </style>

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

Jika sudah klik simpan pada template sobat.

Sekarang saatnya menempelkan pada postingan sobat, copy isyarat dibawah ini dan paste kan di postingan dalam mode HTML bukan Compose

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

Edit keterangan sesuai teman sendiri, Publikasikan.


Oke sekian yang sanggup aku sampaikan tentang Cara Membuat Tabel Keterangan Responsive di Blog Terima Kasih yang sudah berkunjung agar bermanfaat bagi kalian semua.




Sumber https://www.triksimple.com/