Cara Membuat Tabel di Blog yang Responsive dan Keren - Tuan Siput
Kali ini saya akan coba membagikan kepada anda cara mudah untuk membuat tabel di blog. Tabel digunakan untuk berbagai tujuan yang diharapkan dapat membantu pengunjung agar lebih mudah dalam memahami isi artikel.

Tabel mungkin saja sudah sering anda lihat di blog yang menyediakan template. Hal tersebut dapat membantu pengunjung dalam mengetahui hal-hal penting pada setiap fitur template tersebut.

Kali ini saya akan membagikan tabel responsive dengan 2 column yang di dalamnya terdapat tombol yang bisa anda gunakan untuk memasukkan link.

Namun sebelum itu perlu anda tahu bahwa tabel ini saya dapatkan dari Namina, dan tidak saya ubah sedikitpun.

Tampilannya akan seperti di bawah ini:

Judul 1 Judul 2
Kiri True Cek
Kiri True Cek
Kiri True Cek
Kiri True Cek
Kiri True
Kiri True
Kiri True
Kiri True
Kiri True
Kiri True
Kiri True
Kiri True
Kiri True
Kiri True
Kiri True
Kiri True
Kiri True
Kiri True
Kiri Pro Version
Keren bukan tampilannya? Jika tertarik, anda bisa ikuti cara berikut ini untuk memasangnya.

1. Pertama, masuk ke Blogger.com > pilih menu "Tema" > klik "Edit HTML"

2. Copy kode di bawah ini dan letakkan di atas atau sebelum kode </b:skin> atau </style>

.post-body table{width:100%;max-width:100%;border-radius:3px;overflow:hidden}.post-body table td,.post-body table caption{border:0;padding:10px 15px;text-align:left;vertical-align:top;color:#57606f;font-size:.9rem}.post-body table td:first-child{border-right:0}.post-body table th{background:#333;color:#fff;border:0;padding:10px 15px;text-align:left;vertical-align:top;font-size:15px;font-weight:700}.post-body table.tr-caption-container{border:0;margin:0}.post-body table caption{border:none;font-style:italic}.post-body td,.post-body th{vert
 ical-align:top;text-align:left;font-size:13px;padding:3px 5px;border:0}.post-body table.tr-caption-container td{border:0;padding:0;background:#fff;line-height:17px;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap;font-weight:700;color:#57606f}.post-body table.tr-caption-container,.post-body table.tr-caption-container img,.post-body img{max-width:100%;height:auto}.post-body table tr:nth-of-type(even) td{background-color:#fafafa}.post-body table tr:nth-of-type(odd) td{background-color:#f0f0f0}.post-body table tr td:nth-of-type(even){border-left:1px solid rgba(0,0,0,0.03)}.post-body table tr th:nth-of-type(even){border-left:1px solid rgba(255,255,255,0.03)}
.post-body td a{background:#fff;color:#57606f;padding:3px 8px;font-size:70%;float:right;display:inline-block;border-radius:3px;text-transform:uppercase;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1)}

3. Simpan tema.

4. Cara menerapkannya di postingan, yaitu masuk ke menu "Postingan" klik "Entri baru" kemudian masukkan kode berikut ini di tab "HTML" (bukan Compose)

<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody>
<tr> <th>Judul 1</th> <th>Judul 2</th> </tr>
<tr> <td>Kiri</td> <td>True <a href="#" rel="nofollow noopener" target="_blank">Cek</a></td> </tr>
<tr> <td>Kiri</td> <td>True <a href="#" rel="nofollow noopener" target="_blank">Cek</a></td> </tr>
<tr> <td>Kiri</td> <td>True <a href="#" rel="nofollow noopener" target="_blank">Cek</a></td>  </tr>
<tr> <td>Kiri</td> <td>True <a href="#" rel="nofollow noopener" target="_blank">Cek</a></td>  </tr>
<tr> <td>Kiri</td> <td>True</td> </tr>
<tr> <td>Kiri</td> <td>True</td> </tr>
<tr> <td>Kiri</td> <td>True</td> </tr>
<tr> <td>Kiri</td> <td>True</td> </tr>
<tr> <td>Kiri</td> <td>True</td> </tr>
<tr> <td>Kiri</td> <td>True</td> </tr>
<tr> <td>Kiri</td> <td>True</td> </tr>
<tr> <td>Kiri</td> <td>True</td> </tr>
<tr> <td>Kiri</td> <td>True</td> </tr>
<tr> <td>Kiri</td> <td>True</td> </tr>
<tr> <td>Kiri</td> <td>True</td> </tr>
<tr> <td>Kiri</td> <td>True</td> </tr>
<tr> <td>Kiri</td> <td>True</td> </tr>
<tr> <td>Kiri</td> <td>True</td> </tr>
<tr> <td>Kiri</td> <td>Pro Version</td> </tr>
</tbody></table>

5. Setelah itu tinggal di "Publish" dan lihat hasilnya.

Note: Ganti kode yang ditandai di atas dengan link milik anda.

Semoga bermanfaat ya..

Cara Membuat Tabel di Blog yang Responsive dan Keren

Kali ini saya akan coba membagikan kepada anda cara mudah untuk membuat tabel di blog. Tabel digunakan untuk berbagai tujuan yang diharapkan dapat membantu pengunjung agar lebih mudah dalam memahami isi artikel.

Tabel mungkin saja sudah sering anda lihat di blog yang menyediakan template. Hal tersebut dapat membantu pengunjung dalam mengetahui hal-hal penting pada setiap fitur template tersebut.

Kali ini saya akan membagikan tabel responsive dengan 2 column yang di dalamnya terdapat tombol yang bisa anda gunakan untuk memasukkan link.

Namun sebelum itu perlu anda tahu bahwa tabel ini saya dapatkan dari Namina, dan tidak saya ubah sedikitpun.

Tampilannya akan seperti di bawah ini:

Judul 1 Judul 2
Kiri True Cek
Kiri True Cek
Kiri True Cek
Kiri True Cek
Kiri True
Kiri True
Kiri True
Kiri True
Kiri True
Kiri True
Kiri True
Kiri True
Kiri True
Kiri True
Kiri True
Kiri True
Kiri True
Kiri True
Kiri Pro Version
Keren bukan tampilannya? Jika tertarik, anda bisa ikuti cara berikut ini untuk memasangnya.

1. Pertama, masuk ke Blogger.com > pilih menu "Tema" > klik "Edit HTML"

2. Copy kode di bawah ini dan letakkan di atas atau sebelum kode </b:skin> atau </style>

.post-body table{width:100%;max-width:100%;border-radius:3px;overflow:hidden}.post-body table td,.post-body table caption{border:0;padding:10px 15px;text-align:left;vertical-align:top;color:#57606f;font-size:.9rem}.post-body table td:first-child{border-right:0}.post-body table th{background:#333;color:#fff;border:0;padding:10px 15px;text-align:left;vertical-align:top;font-size:15px;font-weight:700}.post-body table.tr-caption-container{border:0;margin:0}.post-body table caption{border:none;font-style:italic}.post-body td,.post-body th{vert
 ical-align:top;text-align:left;font-size:13px;padding:3px 5px;border:0}.post-body table.tr-caption-container td{border:0;padding:0;background:#fff;line-height:17px;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap;font-weight:700;color:#57606f}.post-body table.tr-caption-container,.post-body table.tr-caption-container img,.post-body img{max-width:100%;height:auto}.post-body table tr:nth-of-type(even) td{background-color:#fafafa}.post-body table tr:nth-of-type(odd) td{background-color:#f0f0f0}.post-body table tr td:nth-of-type(even){border-left:1px solid rgba(0,0,0,0.03)}.post-body table tr th:nth-of-type(even){border-left:1px solid rgba(255,255,255,0.03)}
.post-body td a{background:#fff;color:#57606f;padding:3px 8px;font-size:70%;float:right;display:inline-block;border-radius:3px;text-transform:uppercase;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1)}

3. Simpan tema.

4. Cara menerapkannya di postingan, yaitu masuk ke menu "Postingan" klik "Entri baru" kemudian masukkan kode berikut ini di tab "HTML" (bukan Compose)

<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody>
<tr> <th>Judul 1</th> <th>Judul 2</th> </tr>
<tr> <td>Kiri</td> <td>True <a href="#" rel="nofollow noopener" target="_blank">Cek</a></td> </tr>
<tr> <td>Kiri</td> <td>True <a href="#" rel="nofollow noopener" target="_blank">Cek</a></td> </tr>
<tr> <td>Kiri</td> <td>True <a href="#" rel="nofollow noopener" target="_blank">Cek</a></td>  </tr>
<tr> <td>Kiri</td> <td>True <a href="#" rel="nofollow noopener" target="_blank">Cek</a></td>  </tr>
<tr> <td>Kiri</td> <td>True</td> </tr>
<tr> <td>Kiri</td> <td>True</td> </tr>
<tr> <td>Kiri</td> <td>True</td> </tr>
<tr> <td>Kiri</td> <td>True</td> </tr>
<tr> <td>Kiri</td> <td>True</td> </tr>
<tr> <td>Kiri</td> <td>True</td> </tr>
<tr> <td>Kiri</td> <td>True</td> </tr>
<tr> <td>Kiri</td> <td>True</td> </tr>
<tr> <td>Kiri</td> <td>True</td> </tr>
<tr> <td>Kiri</td> <td>True</td> </tr>
<tr> <td>Kiri</td> <td>True</td> </tr>
<tr> <td>Kiri</td> <td>True</td> </tr>
<tr> <td>Kiri</td> <td>True</td> </tr>
<tr> <td>Kiri</td> <td>True</td> </tr>
<tr> <td>Kiri</td> <td>Pro Version</td> </tr>
</tbody></table>

5. Setelah itu tinggal di "Publish" dan lihat hasilnya.

Note: Ganti kode yang ditandai di atas dengan link milik anda.

Semoga bermanfaat ya..