Membuat Table Responsive Blogger Keren

Membuat Table Responsive Blogger - Kesempatan kali ini saya akan berbagi Tutorial Membuat Table Rensponsive dan tampilan nya seperti di bawah ini, Table juga berfungsi sebagai rangkuman informasi yang rapi dan mempermudah pengunjung  untuk melihat nya untuk membuat table seperti di bawah ini silahkan ikuti langkah - langkah di bawah ini juga.

Features	Availability
Full Responsive 100%	True
SEO Friendly	True
Struktur Valid 100%	True
Fast Loading	True
Support Designer Theme	True
Custom Page Error 404	True
Ready Ads Optimaze	True
Mega & Slider Menu Navigation	True
Support Icon SVG	True
Latest Lazy Load Images	True
Slider Corousel	True
Widget News Ticker	True
Widget Social Media	True
Related Posts	True
Live View Posts	True
Blogger Comments Latest Version	True
Author Box Design	True
Featured Video Youtube	True

Cara Membuat Table Responsive Di Blogger

1. Login ke Blogger 

2. Pilih Tata Letak > Tema > Edit HTML

3. Kemudian silahkan cari kode ini]]</b:skin>

4. Salin kode di bawah ini kemudian taruh di atas kode di atas

/* Table Responsive ArsadPedia */
.post-body .tr-caption-container{width:auto;margin:0;border:0}
.post-body .tr-caption-container td{background-color:transparent !important;border:0 !important}
.post-body .tr-caption{display:block;font-size:12px;color:#223343}
.post-body table{width:100%;margin:20px 0px;border:1px solid rgba(0,0,0,.05);border-radius:10px;font-size:.9rem;overflow:hidden}
.post-body table th{background-color:#223343;color:#fff;padding:10px;border-right:1px solid rgba(255,255,255,.25);}
.post-body table th:last-child, .post-body table tr td:last-child{border-right:0 !important;}
.post-body table tr:nth-child(2n+1) td{border-right:1px solid rgba(0,0,0,.05)}
.post-body table td{padding:10px 15px;vertical-align:middle;}
.post-body table tr:nth-child(2n) td{background-color:rgba(0,0,0,.05);border-right:1px solid rgba(0,0,0,.06)}

5. Kemudian Simpan Tema.

Untuk Mengganti Warnanya Silahkan Cari Kode #223343 Dan Ganti Dengan Kode Warna Yang Kamu Suka

Cara Menggunakan Table Di Blogger

1. Buka Entri Baru > Buka Mode HTML bukan Compose 

2. Kemudian masukan kode dibawah ini

<table cellpadding="0" cellspacing="0" style="text-align: left;">
  <tbody>
<tr>
    <th>Features</th>
    <th>Availability</th>
   </tr>
<tr>
    <td>Full Responsive 100%</td>
    <td>True</td>
   </tr>
<tr>
    <td>SEO Friendly</td>
    <td>True</td>
   </tr>
<tr>
    <td>Struktur Valid 100%</td>
    <td>True</td>
   </tr>
<tr>
    <td>Fast Loading</td>
    <td>True</td>
   </tr>
<tr>
    <td>Support Designer Theme</td>
    <td>True</td>
   </tr>
<tr>
    <td>Custom Page Error 404</td>
    <td>True</td>
   </tr>
<tr>
    <td>Ready Ads Optimaze</td>
    <td>True</td>
   </tr>
<tr>
    <td>Mega &amp; Slider Menu Navigation</td>
    <td>True</td>
   </tr>
<tr>
    <td>Support Icon SVG</td>
    <td>True</td>
   </tr>
<tr>
    <td>Latest Lazy Load Images</td>
    <td>True</td>
   </tr>
<tr>
    <td>Slider Corousel</td>
    <td>True</td>
   </tr>
<tr>
    <td>Widget News Ticker</td>
    <td>True</td>
   </tr>
<tr>
    <td>Widget Social Media</td>
    <td>True</td>
   </tr>
<tr>
    <td>Related Posts</td>
    <td>True</td>
   </tr>
<tr>
    <td>Live View Posts</td>
    <td>True</td>
   </tr>
<tr>
    <td>Blogger Comments Latest Version</td>
    <td>True</td>
   </tr>
<tr>
    <td>Author Box Design</td>
    <td>True</td>
   </tr>
<tr>
    <td>Featured Video Youtube</td>
    <td>True</td>
   </tr>
</tbody>
 </table>

3. Silahkan rubah sesuai kebutuhan kamu
4. Kemudian Simpan.

Penutup

Nah demikian lah artikel kali ini semoga bermanfaat bagi kamu jika ada pertanyaan silahkan tinggalkan komentar atau hubingi saya via Contacts Trimakasih See You again