Cara Membuat Tabel Keren Di Postingan Blogger
Cara Membuat Tabel Keren Di Dalam Artikel - Tabel Atau Sering Di Sebut Kolom Sangat Berguna Untuk Merapihkan Atau Mempercantik Tampilan Postingan Artikel .. Salah Satu Yang Seharusnya Wajib Memakai Tabel Ini Adalah Blogger Yang Membagikan Postingan Nya Seperti Sepsifikasi Handphone Laptop Tempalate Dan Masih Banyak Lagi .. Nah Kegunaan Template Ini Pun Sangat Berpengaruh Terhadap Pengunjung Karna Dengan Menggunakan Tabel Di Dalam Sebuah Artikel Bisa Memanjakan Sang Pengujung Untuk Melihat Post Lainya Karna Tampilan Menarik Dan Rapih Tentu Saja Sang Pengunjung Blogger/Website Sangat Nyaman .. Langsung Saja Ke Tutorial Cara Membuat Tabel Keren Di Postingan Blogger
Langkah Pertama : Masuk Ke Blogger > Template > Edit Html
Langkah Kedua : Masukan Kode Di Bawah Ini Tepat Di Bawah ]]></b:skin> atau </style>
/* CSS Post Table Shared By Mafsyah*/
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}
Langkah Ketika : Buat Postingan/Halaman baru Pilih Html Bukan Compose Copy Kan Kode Di Bawah Ini dan edit sesuai kebutuhan
<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody> <tr> <th>Daftar</th> <th>Spesifikasi</th> </tr> <tr> <td>Harga</td> <td>2.000.000</td> </tr> <tr> <td><span style="background-color: white; color: #444444; font-family: "arial" , "helvetica" , sans-serif; font-size: 14px; font-weight: bold;">Tahun</span></td> <td>2016</td> </tr> <tr> <td><span style="background-color: white; color: #444444; font-family: "arial" , "helvetica" , sans-serif; font-size: 14px; font-weight: bold;">Network</span></td> <td>Banner, Rich media, pop up/under, text</td> </tr> <tr> <td><span style="background-color: white; color: #444444; font-family: "arial" , "helvetica" , sans-serif; font-size: 14px; font-weight: bold;">Tipe</span></td> <td>Paypal, Wire Transfer, Payoneer</td> </tr> <tr> <td><span style="background-color: white; color: #444444; font-family: "arial" , "helvetica" , sans-serif; font-size: 14px; font-weight: bold;">Ukuran</span></td> <td>Paypal $20, Wire transfer $500, Payoneer $20</td> </tr> <tr> <td><span style="background-color: white; color: #444444; font-family: "arial" , "helvetica" , sans-serif; font-size: 14px; font-weight: bold;">Ukuran/Berat</span></td> <td>100%</td> </tr> <tr> <td><span style="background-color: white; color: #444444; font-family: "arial" , "helvetica" , sans-serif; font-size: 14px; font-weight: bold;">Fitur</span></td> <td>NET 30</td> </tr> <tr> <td>Kamera</td> <td>US, Europe traffic</td> </tr> <tr> <td>Batre</td> <td>Seluruh negara</td> </tr> <tr> <td><span style="background-color: white; color: #444444; font-family: "arial" , "helvetica" , sans-serif; font-size: 14px; font-weight: bold;">OS</span></td> <td>Yes</td> </tr> <tr> <td><span style="background-color: white; color: #444444; font-family: "arial" , "helvetica" , sans-serif; font-size: 14px; font-weight: bold;">CPU</span></td> <td>Yes</td> </tr> <tr> <td>Affiliasi</td> <td>Yes</td> </tr> <tr> <td><span style="background-color: white; color: #444444; font-family: "arial" , "helvetica" , sans-serif; font-size: 14px; font-weight: bold;">GPS</span></td> <td>Yes</td> </tr> <tr> <td>Bluethoot </td> <td>Yes</td> </tr> <tr> <td>Fitur Tambahan</td> <td>Hight risk</td> </tr> </tbody> </table>
Demo
Posting Komentar untuk "Cara Membuat Tabel Keren Di Postingan Blogger"