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 ibarat fitur apa saja yang ada pada template yang anda dibagikan misalnya.

Selain itu pada tabel keterangan responsive ini dapat anda gunakan di aneka macam jenis postingan, misal dari postingan materi 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 mampu melihatnya pada gambar berikut.

Membuat tabel di postingan blog sangat mudah dan gampang sekali teman-teman namun untuk desain biar lebih responsive maka kita harus menambahkan beberapa aba-aba 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 denah menu Template > Edit HTML.

2. Tambahkan aba-aba di bawah ini sempurna di atas aba-aba ]]</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 kalau anda membuat postingan dengan menggunakan tabel maka aba-aba pemanggilan tabel keterangan ibarat blog arlina design ibarat pada di bawah ini. Silahkan anda simpan ke dalam notepad sewaktu anda menggunakan biar 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.

Tweet