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>
Nah, jika anda masih belum memehami dengan penjelasan ini, silahkan tinggalkan komentar, akan saya jelaskan ketidak-pahaman anda, hehe. Happy Blogging.
gan! blog ane kalau pake css ini, artikel kagak nampak saat dilihat melalui handpone, sedangkan dengan PC nampak. salahnya dimana ya
BalasHapuskemungkinan besar agan belum non aktifkan template mode mobile kang... dicoba deh
HapusKeren nih kang, bisa aku coba :)
BalasHapusMangga kang andi nugraha di peraktikkan hehe
HapusKang kalai tiga kolom rancau punya saya ..
BalasHapusKenapa yah ?
Rancau bagaimana kang?
Hapusmantap gan, mau dicoba dulu..
BalasHapusKo jadi berat ya blog saya gan.. apa yg lain jg sama jadi berat..
BalasHapus