Cara Membuat Table Keren Di Postingan Blog

Cara Membuat Table Keren Di Postingan Blog: 
 Ok , Selamat Malam ,  Baiklahh Saya Akan Beri Tutorial Deangan Cara Membuat Table Keren Di Postingan Blog Jadi? Post table bisanya di gunakan pada postingan artikel yang ingin menampilkan jumblah atau formulir data tertentu, saya juga menggunakan post table pada postingan saya, saya menggunakan post table untuk menampilkan Fitur-fitur template yang saya bagikan namun dengan tampilan yang sedikit berbeda.
Post table ini cocok untuk di gunakan di blog/website yang menyediakan resfrensi berbagai jenis penjualan maupun pembelian. Post table ini di gunakan untuk mempercantik artikle yang di publikasikan apalagi artikel tersebut berisikan daftar (Isi atau Fitur) terntentu.

Untuk membuat Post table ini cukup mudah kamu hanya perlu melakukan sedikit tahap dalam pemasangnya.

Cara Membuat Table Keren Di Postingan Blog

Langkah Pertama

Langkah Pertama Kamu masuk ke Blogger kamu, lalu pilih menu Tema, pilih Edit Html. Pada Edit Html silahkan kamu cari kode ]]</b:skin>, lalu pastekan kode CSS berikut tepat sebelum kode yang di cari tadi, untuk mempercepat pencarian silahkan klik tombol

CTRL+F

pada keyboard kamu.

/* CSS Post Table */
table{border-collapse:collapse;border-spacing:0;}
.post-body table td{border:1px solid #e9e9e9;padding:10px;text-align:center;vertical-align:top;}
.post-body table th {border:1px solid #029864;padding:15px 8px!important;text-align:center;vertical-align:top;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:bold;text-transform:capitalize;font-size:15px;}
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 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}
.services_list{text-align:left !important}
.services{background:#0f9d58!important;width:28%;overflow:hidden;text-align:center!important;border-left:0}
.free_version,.premi_version,.theme_instal{background:#1dc087!important;width:22%;overflow:hidden;text-align:center!important}
.premi_version{background:#0f9d58!important}
.post-body i.fa-check,.post-body i.fa-times,.post-body i.fa-minus{height:27px;width:27px;line-height:27px;text-align:center;border-radius:99em;color:#fff}
.post-body i.fa-check{background:#83cd30}
.post-body i.fa-times{background:#f13a3a}
.post-body i.fa-minus{background:#ffbd2e}

Jika di template kamu sudah terpasang CSS Post Table sebelumnya kamu bisa menghapusnya atau langsung menggantinya dengan CSS Post Table di atas

Nah jika sudah sekarang silahkan kamu save tema/simpan, Lalu silahkan ikuti cara ke dua berikut ini.

Langkah Kedua

Langkah kedua yang harus kamu lakukan adalah masuk ke menu postingan kamu, buat postingan baru. atau pilih postingan yang ingin kamu sisipkan Post Tablenya,
Pada menu postingan terdapat pilihat Compose dan HTML

Silahkan kamu Pindahkan Mode Compose ke mode HTML, lalu pastekan kode HTML berikut terserah di mau di mana posisinya, tergantung selera kamu.

<div class="buy_now"><table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody>
<tr><th class="services">Services</th><th class="free_version">Free Version</th><th class="premi_version">Premium Version</th><th class="theme_instal">Theme + Installation</th></tr>
<tr><td class="services_list">File Documentation</td><td><i class="fa fa-minus" aria-hidden="true"></i></td><td><i class="fa fa-check fa-6" aria-hidden="true"></i></td><td><i class="fa fa-check fa-6" aria-hidden="true"></i></td></tr>
<tr><td class="services_list">Remove Footer Credits</td><td><i class="fa fa-times" aria-hidden="true"></i></td><td><i class="fa fa-check fa-6" aria-hidden="true"></i></td><td><i class="fa fa-check fa-6" aria-hidden="true"></i></td></tr>
<tr><td class="services_list">One Time Payment</td><td><i class="fa fa-times" aria-hidden="true"></i></td><td><i class="fa fa-check fa-6" aria-hidden="true"></i></td><td><i class="fa fa-check fa-6" aria-hidden="true"></i></td></tr>
<tr><td class="services_list">No Encrypted Scripts</td><td><i class="fa fa-times" aria-hidden="true"></i></td><td><i class="fa fa-check fa-6" aria-hidden="true"></i></td><td><i class="fa fa-check fa-6" aria-hidden="true"></i></td></tr>
<tr><td class="services_list">Lifetime Premium Support</td><td><i class="fa fa-times" aria-hidden="true"></i></td><td><i class="fa fa-check fa-6" aria-hidden="true"></i></td><td><i class="fa fa-check fa-6" aria-hidden="true"></i></td></tr>
<tr><td class="services_list">For Unlimited Domains</td><td><i class="fa fa-times" aria-hidden="true"></i></td><td><i class="fa fa-check fa-6" aria-hidden="true"></i></td><td><i class="fa fa-check fa-6" aria-hidden="true"></i></td></tr>
<tr><td class="services_list">Lifetime Template Updates</td><td><i class="fa fa-times" aria-hidden="true"></i></td><td><i class="fa fa-check fa-6" aria-hidden="true"></i></td><td><i class="fa fa-check fa-6" aria-hidden="true"></i></td></tr>
<tr><td class="services_list">Theme Installation Service</td><td><i class="fa fa-times" aria-hidden="true"></i></td><td><i class="fa fa-times" aria-hidden="true"></i></td><td><i class="fa fa-check fa-6" aria-hidden="true"></i></td></tr>
</tbody> </table></div>

Silahkan kamu ubah sesuai dengan keinginan kamu, jika kamu kreatif kamu pasti tidak pusing untuk masalah seperti ini, Terakhir siklahkan kamu save/Publikasikan.

Silahkan kamu lihat kembali postingan kamu, Jika sudah terpasang selamat.
mungkin sampe di sini dulu postingan saya kali ini, semoga bermanfaat, jika ada kesusahan bisa di tanyakan dengan berkomentar di bawah ini.