Cara Membuat Tabel di Blogger Seperti Arlina Design

Membuat Tabel Seperti Arlina Design
Saya sangat tertarik dengan tabel yang ada di blog Arlina Design, sampai-sampai saya mencari berbagai tutorial tentang cara membuat tabel di Blogger seperti Arlina Design.

Sayangnya tidak ada yang sama persis yang saya temukan, atau mungkin saya saja yang kurang berusaha dalam mencari panduan tersebut.

Tapi akhirnya sampai pada suatu waktu di mana saya akhirnya menemukan salah satu blog yang mempunyai tabel mirip arlina design. Blog tersebut adalah Namina Kiky, saya kemudian meminta kodenya dan ternyata diberikan oleh Admin blog tersebut.

Cara Membuat Tabel di Blogger Seperti Blog Arlina Design


Kabar baiknya kali ini saya akan coba memberikan panduan tentang cara membuat tabel seperti Arlina Design. Bagi Anda yang tertarik bisa mengikuti langkah di bawah ini.

1. Pertama, login ke Blogger.com > pilih Tema kemudian klik Edit HTML.

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

/* Table Post */
.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:#222;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:#222}.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:#222;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. Setelah itu klik Simpan tema.

Cara menggunakannya


Masuk pada menu Postingan > buat Entri baru (artikel baru) > setelah itu letakan kode di bawah ini pada kolom HTML (bukan Compose).

<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody>
<tr> <th>Features</th> <th>Availability</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>True</td> </tr>
<tr> <td>Kiri</td> <td>True</td> </tr>
<tr> <td>Kiri</td> <td>True</td> </tr>
</tbody></table>

Itulah caranya untuk membuat tabel yang mirip dengan Arlina Design. Meski begitu cara ini saya dapatkan dari blog Namina Kiky, jadi saya sangat berterima kasih kepada Admin Namina Kiky karena sudah bisa memberikan kode ini.

Hasilnya

Contoh tabelnya dapat Anda lihat di bawah ini.

Features Availability
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
Kiri True
Kiri True
Berikan Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel