Cara Membuat Tabel Keterangan Responsive di Postingan Blog - TRIK SIMPLE

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

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

Baca Juga : Cara Membuat Tabel Spesifikasi Responsif di Blog 

Oke langsung saja ke caranya ya sob.

Cara Membuat Tabel Keterangan Responsive di Blog


Pertama sobat masuk terlebih dahulu ke Blogger.com > Tema > Edit HTML copy kode dibawah ini dan pastekan tepat diatas kode ]]></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 kode 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 sobat sendiri, Publikasikan.


Oke sekian yang bisa saya sampaikan tentang Cara Membuat Tabel Keterangan Responsive di Blog Terima Kasih yang sudah berkunjung semoga bermanfaat bagi kalian semua.



Cara Membuat Tabel Keterangan Responsive di Postingan Blog

السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ

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

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

Baca Juga : Cara Membuat Tabel Spesifikasi Responsif di Blog 

Oke langsung saja ke caranya ya sob.

Cara Membuat Tabel Keterangan Responsive di Blog


Pertama sobat masuk terlebih dahulu ke Blogger.com > Tema > Edit HTML copy kode dibawah ini dan pastekan tepat diatas kode ]]></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 kode 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 sobat sendiri, Publikasikan.


Oke sekian yang bisa saya sampaikan tentang Cara Membuat Tabel Keterangan Responsive di Blog Terima Kasih yang sudah berkunjung semoga bermanfaat bagi kalian semua.



وَ السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ
Igniel
Kopi Inspirasi
Disqus Codes
  • To write a bold letter please use or
  • To write a italic letter please use or
  • To write a underline letter please use
  • To write a strikethrought letter please use
  • To write HTML code, please use or
    or

    And use parse tool below to easy get the style.
Show Parser Box

strong em u strike
pre code pre code spoiler
embed

Subscribe Our Newsletter