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"

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.

Berbagi :