Belakangan ini banyak sekali blogger yang mencari cara untuk membuat tabel di postingan blognya. Apalagi bagi seorang blogger download template gratis, karena biasanya tabel digunakan untuk mempermudah dan memperjelas mengenai spesifikasi template tersebut. Saya juga bisa menggunakan tabel supaya pengunjung bisa dengan mudah mengetahui hal - hal tertentu, seperti harga beberapa barang.
Di google memang banyak yang share cara membuat tabel di postingan blog, namun kebanyakan biasa saja. Jadi pada kesempatan kali ini Saya ingin membagikan cara membuat tabel keren di postingan blog secara lengkap. Script tabel yg akan Saya bagikan sekarang, adalah script tabel yang Saya pakai di template ini (VioMagz).
Berikut cara membuat tabel keren pada postingan blog
1. Buka blog Anda, masuk ke Tema > Edit HTML
2. Simpan kode dibawah ini tepat diatas kode </style> atau ]]></b:skin>
/* Table Post */
table,caption,tbody{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
table{border-collapse:collapse;border-spacing:0;}
.post-body table td,.post-body table caption{border:1px solid #e9e9e9;padding:10px;text-align:left;vertical-align:top;}
.post-body table tr th {border:1px solid #457fdf;font-weight:bold;color:#fff;padding:15px 10px;text-align:left;vertical-align:top;font-size:14px}
.post-body table th {background:#4285f4;}
.post-body table.tr-caption-container {border:1px solid #f1f1f1;}
.post-body table caption{border:none;font-style:italic;}
.post-body td, .post-body th{vertical-align:top;text-align:left;font-size:13px;padding:3px 5px;}
.post-body table tr:nth-child(even) > td {background-color:#f9f9f9;}
.post-body table tr:nth-child(even) > td:hover {background-color:#fbfbfb;}
.post-body td a{color:#768187;padding:0 6px;font-size:85%;float:right;display:inline-block;border-radius:3px}
.post-body td a:hover {color:#7f9bdf;border-color:#adbce0;}
.post-body td a[target="_blank"]:after {margin-left:5px;}
.post-body table.tr-caption-container td {border:none;padding:8px;}
.post-body table.tr-caption-container, .post-body table.tr-caption-container img, .post-body img {max-width:100%;height:auto;}
.post-body td.tr-caption {color:#666;font-size:80%;padding:0px 8px 8px !important;}
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:33.33%}
table.columns-4 td.columns-cell{width:25%}
table.section-columns td.columns-cell{vertical-align:top}
table.tr-caption-container{padding:4px;margin-bottom:.5em}
td.tr-caption{font-size:80%}3. Klik Simpan (Save)
4. Kemudian untuk membuat tabel di dalam postingan, Anda buat postingan seperti biasanya. Lalu rubah dari mode
<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody>
<tr> <th>BLOG</th> <th>SIDDIQRN</th> </tr>
<tr> <td>Oke</td> <td>Oke</td> </tr>
<tr> <td>Good</td> <td>Good</td> </tr>
</tbody> </table>Maka hasil akhirnya akan seperti ini
| JUDUL | KETERANGAN |
|---|---|
| Nama | Siddiq Rasyid N |
| Website | www.siddiqrn.net |
| YouTube | youtube.com/siddiqrn |
| instagram.com/siddiqrn |
Jadi itulah cara membuat tabel keren di postingan blog. Script tabel ini bukan milik Saya, jadi mohon gunakan dengan bijak dan jangan mengaku buatan Anda sendiri hehe. Terimakasih dan semoga bermanfaat
No comments:
Post a Comment