Cara Membuat Tabel Responsive di Postingan Blogspot

Cara Membuat Tabel Responsive di Postingan Blogspot - Sebagai seorang blogger, kenyamanan pengunjung merupakan hal yang harus diperhatikan. Terutama dibagian postingan. Seringkali dipostingan blog terdapat data-data atau keterangan yang harus disediakan dalam bentuk tabel. Akan tetapi pihak blogger sendiri tidak menyediakan fasilitas untuk membuat tabel berikut. Sehingga membuat beberapa blogger tidak menyajikan data tersebut dalam bentuk tabel. Sehigga data tersebut menjadi sulit untuk dipahami oleh pengunjung.

Sebenanya kita bisa saja me-copy paste tabel dari ms. Word atau ms. Excell. Akan tetapi tabel tersebut tentunya tidaklah bagus dan tidak responsive. Artinya lebar kolomnya tidak bisa menyesuaikan ukuran layar. Sehingga membuat blog kurang dari segi SEO. Pada artikel saya kali ini saya akan membahas bagaimana cara membuat tabel yang responsive di postingan blogger.
Cara Membuat Tabel Responsive di Postingan Blogspot
Cara membuat tabel responsive

Cara membuat tabel resposive di postingan blogger

Cara untuk membuat tabel responsive di postingan blogger adalah dengan menggunakan html dan css, cara ini memang agak sulit dan memakan banyak waktu, akan tetapi hasilnya akan sangat memuaskan. Oke langsung saja ke langkah-langkahnya :

1. Pertama, masuk terlebih dahulu ke dashboard blog anda
2. Selanjutnya masuk ke Tema, Kemudian klik Edit HTML
3. Kemudian cari kode ]]></b:skin> dengan cara menekan Ctrl + F, Jika kode ]]></b:skin> tidak ada, maka cari kode </style>, Setelah itu pastekan kode ini tepat diatas kode ]]></b:skin> atau </style>

/* CSS Post Table */
table{border-collapse:collapse;border-spacing:0;}
.post-body table td {border:1px solid #e9e9e9;padding:10px;text-align:left;vertical-align:top;}
.post-body table th {border:1px solid #00CC00;padding:10px;text-align:left;vertical-align:top;background:#009933 !important;color:#fff}
.post-body td, .post-body th{vertical-align:top;text-align:left;font-size:13px;padding:3px 5px;}
.post-body th{background:#fff;font-weight:400;text-transform:uppercase;font-size:14px}
table {max-width:100%;width:100%;margin:1.5em auto;}
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:50%}
table.columns-4 td.columns-cell{width:30%}
table.section-columns td.columns-cell{vertical-align:top}
table.tr-caption-container{padding:4px;margin-bottom:.5em}
td.tr-caption{font-size:80%}
.post-body td img, .post-body th img {list-style:none;max-width:100%;height:auto;padding:0 !important;margin:0 !important}
.post-body table.tr-caption-container img, .post-body table.tr-caption-container img, .post-body img {list-style:none;max-width:100%;height:auto;padding:0 !important;margin:0 !important}
.post-body table.tr-caption-container td {border:none;padding:0 !important;margin:0 !important}
.post-body table caption{max-width:100%;height:auto;border:none !important;padding:0 !important}
.post-body img.video-thumbnail,.youtube-thumb{visibility:hidden !mportant;display:none !important;height:0}

4. Setelah itu klik simpan tema.
5. Sekarang kita coba dengan membuat postingan, Silahkan masuk ke Entri baru, lalu klik HTML, Pastekan kode ini di sana.

<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody>
<tr><th>Nama</th><th>Alamat</th></tr>
<tr><td>Aji</td><td>Jogja</td></tr>
<tr><td>Budi</td><td>Semarang</td></tr>
<tr><td>Cahya</td><td>Jakarta</td></tr>
<tr><td>Dimas</td><td>Bandung</td></tr>
<tr><td>Edwin</td><td>Bali</td></tr>
<tr><td>Fahry</td><td>Kalimantan Utara</td></tr>
<tr><td>Ganang</td><td>Sumatra Utara</td></tr>
<tr><td>Haris</td><td>Cilacap</td></tr>
<tr><td>Ika</td><td>Kebumen</td></tr>
</tbody></table>

6. Setelah itu klik publikasikan. Dan lihat hasilnya di blog anda.
Cara Membuat Tabel Responsive di Postingan Blogspot
Tampilan dekstop

Cara Membuat Tabel Responsive di Postingan Blogspot
Tampilan mobile

Bagaimana cara memodifikasi tabel diatas?

1. Untuk menambahkan heading atau judul pada tabel gunakan kode tag <th>.....</th>
2. Untuk menambahkan baris baru pada tabel gunakan kode tag <tr>.....</tr>
3. Untuk menambahkan kolom baru pada tabel gunakan kode tag <td>.....</td>
4. Untuk mengubah warna header tabel silahkan ganti kode #00CC00 (warna border) dan #009933 (warna header)

Untuk memudahkan dalam memahami bagaimana cara memodifikasi, silahkan buat postingan dengan menggunakan kode ini, kemudian bandingkan dengan kode diatas tadi.

<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody>
<tr> <th>Nama</th> <th>Alamat</th> <th>No. Handphone</th></tr>
<tr><td>Aji</td><td>Jogja</td><td>087485363274</td></tr>
<tr><td>Budi</td><td>Semarang</td><td>087485363475</td></tr>
<tr><td>Cahya</td><td>Jakarta</td><td>087485362097</td></tr>
<tr><td>Dimas</td><td>Bandung</td><td>087485364677</td></tr>
<tr><td>Edwin</td><td>Bali</td><td>087485361231</td></tr>
<tr><td>Fahry</td><td>Kalimantan Utara</td><td>087485368909</td></tr>
<tr><td>Ganang</td><td>Sumatra Utara</td><td>087485365598</td></tr>
<tr><td>Haris</td><td>Cilacap</td><td>087485363701</td></tr>
<tr><td>Ika</td><td>Kebumen</td><td>087485363910</td></tr>
</tbody></table>

Yak, kurasa itulah cara membuat tabel responsive ditengah postingan blogger, bagaimana cukup mudah bukan? Sekarang postingan anda akan lebih menarik dengan menyajikan data-data pada tabel yang responsive. Hal itu tentu akan menambah kenyamanan pengunjung. Terimakasih telah berkunjung di www.bloggerkoplo.com. Salam koplo.


Berlangganan update artikel terbaru via email:

0 Response to "Cara Membuat Tabel Responsive di Postingan Blogspot"

Post a Comment

Iklan Tengah Artikel 2

Iklan Bawah Artikel