Cara Mudah Membuat Tabel Responsive Di Blogspot

Bagi anda para blogger , tentu saja ingin selalu menawarkan gosip 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 supaya para pengunjung mampu senang dengan gosip yang kalian tampilkan di blog , ialah dengan menawarkan gosip yang bermanfaat , dan tentu terlihat rapi dan mudah untuk dipahami.

"Prinsip Blogger , Memudahkan Yang Sulit , Bukan Sebaliknya"

Salah satu cara supaya pengunjung mampu dengan mudah menyerap gosip , ialah dengan mendesain gosip tersebut dalam bentuk tabel-tabel.

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

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

Ya alasannya tabel yang dibuat tidak mengikuti kriteria blog ketika ini , yakni harus responsive , artinya mampu ditampikan dengan baik , pada banyak sekali perangkat , termasuk handphopne.

Pada kesempatan kali ini , Kang Oim akan mengembangkan tips mudah membuat tabel responsive pada blogspot. Makara bagi anda yang kebetulan sedang mencari goresan pena 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 arahan </b:skin> atau </style> , untuk mempermudah pencarian arahan , gunakan ctrl+F
  • Setelah ketemu salah satu arahan diatas , copy arahan / script CSS tabel responsive di bawah ini , dan paste/ taruh sempurna diatas salah satu arahan </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 arahan HTML tabel responsive dibawah ini , dan pasang pada elemen blog yang anda inginkan , anda mampu memasangnya pada postingan , dengan cara merubah mode HTML dari mode Compose , ketika meletakkan arahan .
<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 arahan tabel diatas , dan jikalau anda ingin :

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

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

Comments

Post a Comment

Popular posts from this blog

Cara Mengetahui MAC dan IP Address Pada Handphone Xiaomi Note 2 Dengan Mudah

Image
Pernakah kalian datang kesebuah cafe atau kawasan yang ada kemudahan wifi dan hostpotnya , selanjutnya kalian ingin mengkoneksikan sebuah perangkat yang kalian bawa , baik berupa handphone maupun komputer atau laptop. pernah kan? Pada ketika kalian sudah kegirangan akan mampu berselancar di internet dengan wifi gratis (dasar suka gratisan , hehe) , duduk perkara mulai menghadang. Bagi pengguna laptop , duduk perkara yang sering terjadi yakni munculnya notifikasi atau peringatan " windows was unable to connect ". Untuk mengatasi hal ini , sudah saya jelaskan di goresan pena sebelumnya pada blog ini , silahkan cari sendiri jangan manja. Bagi penggun smartphone , duduk perkara yang mungkin terjadi yakni munculnya pesan error apada proses authenticating , sehingga menimbulkan handphone tidak tersamnbung. Ada beberapa karena munculnya pesan eror pada proses" authenticating..." tersebut. Sebelum kalian mengatasinya , coba perhati...
Read more

Cara Mudah Bikin Atribut About/ Tentang Di Blog

Image
Membuat About/ Tentang Di Blog - Melanjutkan goresan pena sebelumnya perihal atribut/ kelengkapan blog yang wajib teman pasang diblog , kali ini kang oim akan menyebarkan ide untuk membuat laman "About/ Tentang" di Blog , khususnya Blogspot/ Blogger. Sebelum dilanjutkan , ada baiknya gua jelaskan disini , apasih atribut "About/Tentang" di blog itu? kenapa harus ada di blog? dan lain sebagainya. Apa Atribut "About/ Tentang" di Blog? Laman "About/ Tentang" , merupakan halaman khusus di blog yang berisi gosip atau deskripsi blog yang teman kelola. Bianya , deskripsi tersebut lebih panjang daripada deskripsi blog dibawah judul , ibarat rujukan dalam blog ini. Sahabat mampu lihat dibawah judul diatas , itu yaitu deskripsi blog secara singkat , yang mampu menggambarkan secara umum konten blog ini. Bedahalnya dengan Atribut Tentang / About , tentu isinya lebih terperinci , dan mendetail. Apa Fungsi Dari Atribut Laman ...
Read more

Ini Jenis Cache Memory dan Fungsinya Pada Processor

Image
Pada kesempatan kali ini kembali Oim Info akan membagikan sebuah berita yang pasti diharapkan kalian untuk berguru komputer. Apa itu? Ya menyerupai judul diatas ,  Jenis Cache Memory dan Fungsinya Pada Processor . Kenapa Penting? alasannya yaitu menyerupai yang telah dijelaskan pada goresan pena sebelumnya , Cache Memory berfungsi menyimpan sementara , baik kode ataupun data terakhir yang dioperasikan oleh CPU. Alasan mengetahui Jenis Cache Memory , khususnya bagi teknisi komputer , tentunya semoga tidak salah memperbaiki kerusakan pada processor. Ok eksklusif saja , Cache Memory dalam dunia komputerisasi terbagi menjadi tiga , tergantung levelnya. 1. Level One , First Level biasa disingkat dengan L1 Cache Cache memory pada jenis yang pertama ini merupakan media penyimpanan atau memori pertama kali diakses oleh processor , dikala mencari atau membutuhkan sebuah data. Cache Memory First Level yang juga biasa diseb...
Read more