 |
| Cara Membuat Tabel di Postingan Blog |
Pengunjung Sebuah Situs web atau Blog tentunya ingin mendapatkan pengalaman terbaik ketika berselancar di Blog anda, Salah satu yang mempengaruhi betah atau tidak nya pengunjung adalah Tampilan yang menarik.
Salah satunya adalah penggunaan Tabel Keterangan di Postingan Blog anda. Untuk itu, dalam postingan ini, kami akan membagikan Tutorial atau Cara membuat Tabel Responsif di dalam Postingan Blog sederhana dan mudah.Memasang CSS Tabel Responsive di Template
Tabel Keterangan di dalam postingan berikut ini kami sajikan guna tampil responsif di semua perangkat, baik itu di perangkat Desktop ataupun Mobile.
Berikut adalah langkah - langkah Cara membuat Tabel di dalam Postingan Blog
1. Login ke Blogger
2. Klik Tema atau Template
3. Klik Edit HTML ( untuk Blogger versi lama )
Untuk Blogger versi Baru, klik tombol , kemudian klik Edit HTML ( Lihat Gambar )
 |
| Ilustrasi Blogger versi Terbaru |
</b:skin>/* CSS Responsive Table from okegugel.com */
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;font-size:16px;padding:10px;text-align:left;vertical-align:top;}
.post-body table tr th {border:1px solid #E6E6FA;font-weight:bold;color:#fff;padding:10px 10px;text-align:left;vertical-align:top;font-size:16px}
.post-body table th {background:#1e90ff}
.post-body table.tr-caption-container {border:1px solid #1e90ff;}
.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:#E6E6FA;}
.post-body td a{display:inline-block}
.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%}
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%}5. Simpan / Save Template
Membuat Tabel Responsive di Postingan Blog
Untuk memasang kode pemanggil nya, anda harus menggunakan mode HTML dalam tab Postingan.
Berikut adalah kode pemanggil Tabel Responsive untuk Postingan Blog
<table cellpadding="0" cellspacing="0" style="text-align: left;">
<tbody>
<tr><th>Nama Situs</th> <th>DA / PA</th> <th>Alexa Rank</th> <th>SEO</th></tr>
<tr><td>Situs 1</td> <td>4 / 15</td> <td>4.654.464</td> <td>Yes</td></tr>
<tr><td>Situs 2</td> <td>7 / 64</td> <td>235.000</td> <td>Yes</td></tr>
<tr><td>Situs 3</td> <td>3 / 10</td> <td>3.965</td> <td>Yes</td></tr>
<tr><td>Situs 4</td> <td>4 / 22</td> <td>0</td> <td>Yes</td></tr>
<tr><td>Situs 5</td> <td>6 / 32</td> <td>43.557</td> <td>Yes</td></tr>
</tbody>
</table>Sesuaikan dengan isi Artikel yang akan anda Buat. Kode HTML di atas adalah sebagai contoh. Anda bisa memodifikasi nya sesuai selera anda.
Hasilnya akan seperti berikut :
 |
| Contoh Tabel dalam Postingan Blog |