Cara Menciptakan Tabel Responsive Keren Di Blogger
Tabel mungkin saja sudah sering anda lihat di blog yang menyediakan template. Hal tersebut sanggup membantu pengunjung dalam mengetahui hal-hal penting pada setiap fitur template tersebut.
Kali ini aku akan membagikan tabel responsive dengan 2 column yang di dalamnya terdapat tombol yang sanggup anda gunakan untuk memasukkan link.
Namun sebelum itu perlu anda tahu bahwa tabel ini aku dapatkan dari Namina, dan tidak aku ubah sedikitpun.
Tampilannya akan menyerupai 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 | True |
Keren bukan tampilannya? Jika tertarik, anda sanggup ikuti cara berikut ini untuk memasangnya.
1. Pertama, masuk ke Blogger.com > pilih sajian "Tema" > klik "Edit HTML"
2. Copy instruksi di bawah ini dan letakkan di atas atau sebelum instruksi </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, adalah masuk ke sajian "Postingan" klik "Entri baru" lalu masukkan instruksi 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 instruksi yang ditandai di atas dengan link milik anda.
Semoga bermanfaat ya.. Sumber https://www.tikusmales.com/
