Cara Membuat Tabel Responsive di Postingan Blogspot

Selamat malam sahabat blogger, nah kali ini mimin akan bagikan sedikit tutorial blogger bagaiamana cara memasang tabel keterangan pada artikel blog pastinya tabel keterangan ini sangat responsive dan tentunya juga desainnya unik. Nah sebelum itu untuk demonya apabila anda menggunakan template dari mbak +Arlina Fitriyani tentunya sudah mengetahui bagaimana tabel keterangan ini. Lalu apakah fungsi tabel keterangan tersebut? tabel keterangan ini berfungsi untuk mempermudah pengunjung dalam melihat fitur seperti fitur apa saja yang ada pada template yang anda dibagikan misalnya.

Selain itu pada tabel keterangan responsive ini dapat anda gunakan di berbagai jenis postingan, misal dari postingan bahan masakan, classmen motogp atau juga classmen sepak bola dan juga lain sebagainya. Dengan adanya tabel ini maka blog anda akan terlihat lebih responsive dan rapi dimata pengunjung. Untuk gambar demo dari tabel ini anda bisa melihatnya pada gambar berikut.

Membuat tabel di postingan blog sangat mudah dan gampang sekali teman-teman namun untuk desain agar lebih responsive maka kita harus menambahkan beberapa kode pada template anda. Jika anda berminat maka ikuti langkah - langkah bagaimana cara memasang css tabel pada template blog pada berikut ini.

Cara Membuat Tabel Responsive di Postingan Blogspot

1. Masuk dan login ke dalam dashboard blog. Kemudian masuk ke bagan menu Template > Edit HTML.

2. Tambahkan kode di bawah ini tepat di atas kode ]]</b:skin> atau </style> 

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

3. Simpan kembali template blog anda.

Kemudian jika anda membuat postingan dengan menggunakan tabel maka kode pemanggilan tabel keterangan seperti blog arlina design seperti pada di bawah ini. Silahkan anda simpan ke dalam notepad sewaktu anda menggunakan agar tidak lupa.

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>

Nah demikianlah cara pembuatan tabel di blogspot dengan design responsive dan juga unik. semoga bermanfaat.