Membuat Sebuah Tabel Posting Menjadi Responsive

Setelah anda memahami cara membuat sebuah tabel pada postingan blog nah tidak ada salahnya anda membuat sebuah tabel postingan itu sendiri menjadi responsive karena keresponsive-an pada sebuah blogger bisa menaikkan SEO pada mesin pencari juga.

Cara Membuat Tabel Responsive di Postingan Blogspot
Ilustrasi Tabel Responsive

Dan ini adalah cara membuat sebuah tabel postingan menjadi responsive
Pertama anda masuk ke dashboard blogger
Kemudian anda lihat pada bagian pojok bawah kiri Tema-Edit HTML
Lalu masukan kode dibwah ini tepat dibawah ]]></b:skin>
/* 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}
Kemudian anda tinggal menyimpan saja lalu buatlah sebuah tabel untuk postingan dan lihatlah hasilnya. Selamat mencoba

Terima kasih anda telah membaca artikel Membuat Sebuah Tabel Posting Menjadi Responsive. Jika anda kurang paham silahkan berkomentar dibawah & Ada baiknya jika artikel ini bermanfaat Share ke saudara atau teman anda.

Related Posts:

1 Response to "Membuat Sebuah Tabel Posting Menjadi Responsive"

  1. Halo semuanya, saya Rika Nadia, saat ini tinggal orang Indonesia dan saya warga negara, saya tinggal di JL. Baru II Gg. Jaman Keb. Lama Utara RT.004 RW.002 No. 26. Saya ingin menggunakan media ini untuk memberikan saran nyata kepada semua warga negara Indonesia yang mencari pinjaman online untuk berhati-hati karena internet penuh dengan penipuan, kadang-kadang saya benar-benar membutuhkan pinjaman , karena keuangan saya buruk. statusnya tidak begitu baik dan saya sangat ingin mendapatkan pinjaman, jadi saya jatuh ke tangan pemberi pinjaman palsu, dari Nigeria dan Singapura dan Ghana. Saya hampir mati, sampai seorang teman saya bernama EWITA YUDA (ewitayuda1@gmail.com) memberi tahu saya tentang pemberi pinjaman yang sangat andal bernama Ny. ESTHER PATRICK Manajer cabang dari Access loan Firm, Dia adalah pemberi pinjaman global; yang saya hubungi dan dia meminjamkan saya pinjaman Rp600.000.000 dalam waktu kurang dari 12 jam dengan tingkat bunga 2% dan itu mengubah kehidupan seluruh keluarga saya.

    Saya menerima pinjaman saya di rekening bank saya setelah Nyonya. LADY ESTHER telah mentransfer pinjaman kepada saya, ketika saya memeriksa saldo rekening bank saya dan menemukan bahwa jumlah Rp600.000.000 yang saya terapkan telah dikreditkan ke rekening bank saya. dan saya punya buktinya dengan saya, karena saya masih terkejut, emailnya adalah (ESTHERPATRICK83@GMAIL.COM)

    Jadi untuk pekerjaan yang baik, LADY ESTHER telah melakukannya dalam hidup saya dan keluarga saya, saya memutuskan untuk memberi tahu dan membagikan kesaksian saya tentang LADY ESTHER, sehingga orang-orang dari negara saya dan kota saya dapat memperoleh pinjaman dengan mudah tanpa stres. Jadi, jika Anda memerlukan pinjaman, hubungi LADY ESTHER melalui email: (estherpatrick83@gmail.com) silakan hubungi LADY ESTHER Dia tidak tahu bahwa saya melakukan ini tetapi saya sangat senang sekarang dan saya memutuskan untuk memberi tahu orang lain tentang dia, Dia menawarkan semua jenis pinjaman baik untuk perorangan maupun perusahaan dan juga saya ingin Tuhan memberkati dia lebih banyak,

    Anda juga dapat menghubungi saya di email saya: (rikanadia6@gmail.com). Sekarang, saya adalah pemilik bangga seorang wanita bisnis yang baik dan besar di kota saya, Semoga Tuhan Yang Mahakuasa terus memberkati LADY ESTHER atas pekerjaannya yang baik dalam hidup dan keluarga saya.
    Tolong lakukan dengan baik untuk meminta saya untuk rincian lebih lanjut tentang Ibu dan saya akan menginstruksikan, dan ada bukti pinjaman, hubungi LADY ESTHER melalui email: (estherpatrick83@gmail.com) Terima kasih semua

    ReplyDelete

Jika ada kurang paham atau mau memberikan tambahan ilmu tentang hal serupa segera layangkan pada kolom komentar. Karena ilmu yang kita miliki mesti kita amakan karena itu akan berbuah pahala bagi pengamal dan pemberi ilmunya.

"Barangsiapa yang menunjuki kepada kebaikan maka dia akan mendapatkan pahala seperti pahala orang yang mengerjakannya.” (HR. Muslim no. 1893).

Kode Emoticon :



Your Ads Here 970x90
Di desain dengan sepenuh oleh Marwan Abdul Anwar | Font & Ikon : SSP ▪ Fontawesome