Tutorial Cara Membuat Tabel Responsive di Blogger

Bisa memberikan informasi yang sesuai dan disampaikan dengan cara terbaik pastinya merupakan keinginan para blogger. Tidak akan juga seorang blogger mau mendapati kalau blognya sepi pengunjung atau bahkan tidak terindeks oleh search engine Google. Jadi, semaksimal mungkin mereka pasti bakal berusaha untuk memberikan konten blog yang berkualitas.

Sedikit tips agar pengunjung blog Anda betah membaca postingan-postingan di blog Anda, yakni dengan membuat informasi yang bermanfaat, menggunakan bahasa yang mudah dipahami, dan usahakan rapi. Tentunya pengunjung blog akan merasa senang jika mereka dapat memahami informasi yang Anda share lewat postingan dengan jelas dan baik. Bisa jadi juga mereka akan melakukan kunjungan ulang ke blog Anda.

Hal tersebut sangat bagus untuk menaikkan angka page view dan klik postingan. Jika rating kedaunya tinggi, sudah pasti akan mendatangkan keuntungan besar bagi sebuah blog, yakni reputasi blog yang semakin positif di mata mesin pencari. Maka dari itu, sangat penting untuk memperhatikan konten blog agar tetap berkualitas. Karena akan membuat pengunjung blog setia berlama-lama membaca semua konten blog.

tabel responsive di Blogger
tabel responsive di Blogger

Nah, salah satu cara untuk memudahkan pengunjung memahami konten blog Anda adalah dengan mendesain informasi yang ingin Anda bagikan dalam bentuk tabel. Bila Anda masih mengcopy-paste dari Ms Word atau Ms Excel, sebaiknya ikuti tutorial cara membuat tabel responsive di Blogger berikut ini. Tabel tidak akan berantakan lagi seperti saat Anda copas lewat Ms Word/ Excel dan enak dibaca. Tabel juga bisa ditampikan dengan baik di berbagai perangkat termasuk ponsel, karena sudah bernilai responsive.

Baca Juga : Cara Memperkuat Sinyal Wifi Android Tanpa Aplikasi yang Ampuh

Baik, berikut cara membuatnya :

1. Masuk ke blog blogger Anda.

2. Setelah Anda berhasil masuk, silahkan pergi ke menu “Tema” atau “Template”.

3. Klik “Edit HTML”, lalu cari kode </b:skin> atau </style>. Untuk mempercepat pencarian gunakan shortcut CTRL+F.

4. Jika sudah ketemu, selanjutnya copy skrip kode CSS di bawah ini dan pastekan di atas salah satu kode tadi.
/* CSS Tabel Responsive */
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 #5a97ff;padding:10px;text-align:left;vertical-align:top;background:#4588f3 !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}

5. Simpan tema atau template.

6. Setelah itu, silahkan buat postingan baru dan masuk ke mode HTML bukan Compose. Lalu masukan kode pemanggil berikut ini.
<table cellpadding=”0″ cellspacing=”0″ style=”text-align: left;”><tbody>
<tr> <th>Nama</th> <th>Keterangan</th> </tr>
<tr> <td>Nama 1</td> <td>Nilai 1</td> </tr>
<tr> <td>Nama 2</td> <td>Nilai 2</td> </tr>
<tr> <td>Nama 3</td> <td>Nilai 3</td> </tr>
<tr> <td>Nama 4</td> <td>Nilai 4</td> </tr>
<tr> <td>Nama 5</td> <td>Nilai 5</td> </tr>
</tbody> </table>

7. Selesai.

Keterangan : Jika Anda mau menambah tabel ke samping pada bagian atas, tambahkan kode <th>……</th> di antara kode <tr> dan </tr>. Untuk menambah pada bagian bawah, bisa tambahkan kode <td>……</td> di antara kode <tr> dan </tr>.

Sekian tutorial Cara Membuat Tabel Responsive di Blogger. Jika Anda memiliki pertanyaan seputar artikel ini, jangan sungkan untuk bertanya di kolom komentar di bawah ya. Semoga bermanfaat.

Baca Juga : 7 Aplikasi untuk Melihat Unfollow IG Paling Recommended

Previous Post
Next Post
Bagikan:

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *