Cara Menciptakan Table Keren Di Postingan Blog

Cara Membuat Table Keren Di Postingan Blog: Post table bisanya di gunakan pada postingan artikel yang ingin menampilkan jumblah atau formulir data tertentu, saya juga memakai post table pada postingan saya, saya memakai 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 banyak sekali 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 menciptakan Post table ini cukup gampang kau hanya perlu melaksanakan sedikit tahap dalam pemasangnya.

Cara Membuat Table Keren Di Postingan Blog

Langkah Pertama

Langkah Pertama Kamu masuk ke Blogger kamu, kemudian pilih hidangan Tema, pilih Edit Html. Pada Edit Html silahkan kau cari aba-aba ]]</b:skin>, kemudian pastekan aba-aba CSS berikut sempurna sebelum aba-aba yang di cari tadi, untuk mempercepat pencarian silahkan klik tombol

CTRL

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 kau sudah terpasang CSS Post Table sebelumnya kau sanggup menghapusnya atau eksklusif menggantinya dengan CSS Post Table di atas

Nah jikalau sudah kini silahkan kau save tema/simpan, Lalu silahkan ikuti cara ke dua berikut ini.

Langkah Kedua

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

Silahkan kau Pindahkan Mode Compose ke mode HTML, kemudian pastekan aba-aba 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 kau ubah sesuai dengan cita-cita kamu, jikalau kau kreatif kau niscaya tidak pusing untuk problem menyerupai ini, Terakhir siklahkan kau save/Publikasikan.

Silahkan kau lihat kembali postingan kamu, Jika sudah terpasang selamat.
mungkin sampe di sini dulu postingan saya kali ini, supaya bermanfaat, jikalau ada kesusahan sanggup di tanyakan dengan berkomentar di bawah ini.