Cara Mudah Membuat Tabel Responsive Di Blogspot

Bagi anda para blogger, tentu saja ingin selalu memberikan informasi terbaik bagi para pembaca dan pengunjung blog kan? jawabannya pasti "ya"

Membuat Tabel Responsive

Tidak mungkin, pemilik blog, ingin blognya sepi pengunjung, atau bahkan tidak pernah terindeks oleh mesin pencari.

Nah, salah satu cara agar para pengunjung bisa senang dengan informasi yang kalian tampilkan di blog, adalah dengan memberikan informasi yang bermanfaat, dan tentu terlihat rapi dan mudah untuk dipahami.

"Prinsip Blogger, Memudahkan Yang Sulit, Bukan Sebaliknya"

Salah satu cara agar pengunjung bisa dengan mudah menyerap informasi, adalah dengan mendesain informasi tersebut dalam bentuk tabel-tabel.

Masalahnya adalah, tidak semua blogger tahu cara membuat tabel di blog [khususnya berpplatform blogspot], banyak diantara mereka dengan santai mengcopy-paste dari MS Word.

Sehingga tabel yang ditampilkan tidak enak dibaca, terutama saat dilihat dari perangkat mobilephone / smartphone maupun tablet. Kenapa?

Ya sebab tabel yang dibuat tidak mengikuti kriteria blog saat ini, yakni harus responsive, artinya bisa ditampikan dengan baik, pada berbagai perangkat, termasuk handphopne.

Pada kesempatan kali ini, Kang Oim akan berbagi tips mudah membuat tabel responsive pada blogspot. Jadi bagi anda yang kebetulan sedang mencari tulisan ini, jangan beranjak dari topik ini.

Cara Membuat Tabel Responsive Di Blogspot
Ikuti saja langkah-langkah berikut ini :
  • Masuk pada akun blogger anda, silahkan masuk pada link ini : www.blogger.com [masukkan email dan password anda]
  • Setelah anda masuk pada dashbor blog anda, selanjutnya masuk ke "Tema", dan Edit HTML
  • Cari kode </b:skin> atau </style>, untuk mempermudah pencarian kode, gunakan ctrl+F
  • Setelah ketemu salah satu kode diatas, copy kode / script CSS tabel responsive di bawah ini, dan paste/ taruh tepat diatas salah satu 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 #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}
  • Untuk menampilkan hasil tabel, silahkan gunakan kode HTML tabel responsive dibawah ini, dan pasang pada elemen blog yang anda inginkan, anda bisa memasangnya pada postingan, dengan cara merubah mode HTML dari mode Compose, saat meletakkan kode .
<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody>
<tr> <th>Nama</th> <th>Keterangan</th> </tr>
<tr> <td>Forex</td> <td>Bisnis Online</td> </tr>
<tr> <td>Blogger</td> <td>Platform</td> </tr>
<tr> <td>Iklan</td> <td>Google Adsense</td> </tr>
<tr> <td>Pembayaran</td> <td>Transfer Rekening, Paypal</td> </tr>
<tr> <td>Investasi</td> <td>Terpadu</td> </tr>
</tbody> </table>

Bagaimana hasilnya? silahkan lihat saja :

Nama Keterangan
Forex Bisnis Online
Blogger Platform
Iklan Google Adsense
Pembayaran Transfer Rekening, Paypal
Investasi Terpadu

CATATAN, Perhatikan kode tabel diatas, dan jika anda ingin :

  • Menambah Tabel kesamping pada bagian atas, maka tambahlah kode <th>......</th>, didalam / diantara kode <tr> dan </tr>, sementara bagian bawahnya, silahkan tambah kode <td>......</td> diantara kode <tr> dan </tr>.
  • Menambah tabel kebawah, silahkan tambahkan dan atau copypaste kode <td>Investasi</td> <td>Terpadu</td>, yang ditutup diantara kode <tr> dan </tr>
Baca Juga : Cara Paling Mudah Merubah Warna Tampilan Blog

Nah, jika anda masih belum memehami dengan penjelasan ini, silahkan tinggalkan komentar, akan saya jelaskan ketidak-pahaman anda, hehe. Happy Blogging.

Info Menarik Lainnya:

Previous
Next Post »

8 comments

Click here for comments
24 Maret 2017 21.50 ×

gan! blog ane kalau pake css ini, artikel kagak nampak saat dilihat melalui handpone, sedangkan dengan PC nampak. salahnya dimana ya

Reply
avatar
25 Maret 2017 21.47 ×

kemungkinan besar agan belum non aktifkan template mode mobile kang... dicoba deh

Reply
avatar
16 April 2017 16.48 ×

Keren nih kang, bisa aku coba :)

Reply
avatar
17 April 2017 07.22 ×

Mangga kang andi nugraha di peraktikkan hehe

Reply
avatar
24 Agustus 2017 18.04 ×

Kang kalai tiga kolom rancau punya saya ..
Kenapa yah ?

Reply
avatar
25 Agustus 2017 18.40 ×

Rancau bagaimana kang?

Reply
avatar
13 Desember 2017 01.53 ×

mantap gan, mau dicoba dulu..

Reply
avatar
14 Maret 2018 10.10 ×

Ko jadi berat ya blog saya gan.. apa yg lain jg sama jadi berat..

Reply
avatar

Kalau emang artikel ini bermanfaat, tidak ada salahnya meninggalkan komentar, tanya-tanya, tapi jangan tinggalkan link ya? jika masih ngeyel tahu sendiri apa akibatnya? ya betul dihapus selamanya hehe, tenang akan ada kunjungan balik kok.. sabar ConversionConversion EmoticonEmoticon