Home / Blogger

Cara Membuat Table Responsif Di Blogspot

DP BBM 23 - Cara Membuat Table Responsif Di Blogspot - Selamat malam dan selamat berkunjung kembali, setelah kemarin malam membahas dan berbagi mengenai Sobat Suka Dengan Blog DP BBM 23 ?? Download Aplikasi DP BBM 23 Untuk Android di kesempatan kali ini, sambil menunggu google mengindeks ulang semua artikel di sini ( karena beberapa jam lalu, saya mengganti URL / Link www.kata-anak.tk menjadi www.kumpulangambarkatakatadpbbm2018.cf ) dan berhubung belum ngantuk, saya buatkan postingan mengenai Cara Membuat Table Responsif Di Blogspot, untuk hasil jadinya seperti gambar dibawah ini...


OK Next... setelah kita melihat hasilnya, kita lanjut kecara pembuatannya, namun sebelum itu Bagi sobat 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... Salah satu cara agar pengunjung bisa dengan mudah menyerap informasi, adalah dengan mendesain informasi tersebut dalam bentuk tabel - tabel...

Masalahnya adalah, tidak semua blogger tau 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 responsif, artinya bisa ditampikan dengan baik, pada berbagai perangkat, termasuk handphopne... Nah, pada kesempatan kali ini, DP BBM 23 akan berbagi tips mudah membuat tabel responsif pada blogspot... Jadi bagi sobat yang kebetulan sedang mencari tulisan ini, jangan dulu beranjak dari topik ini ya !!...

Cara Membuat Table Responsif Di Blogspot


  1. Masuk pada akun blogger sobat, silahkan masuk pada link ini : www.blogger.com [ masukkan email dan password sobat ]
  2. Setelah sobat masuk pada dashbor blog sobat, selanjutnya masuk ke "Tema" dan Edit HTML
  3. Cari kode </b:skin> atau </style>, untuk mempermudah pencarian kode, gunakan ctrl+F
  4. Setelah ketemu salah satu kode diatas, copy kode / script CSS tabel responsif di bawah ini, dan paste / taruh tepat diatas salah satu kode </b:skin> atau </style>

    5. /* 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}
  5. Untuk menampilkan hasil tabel, silahkan gunakan kode HTML tabel responsif dibawah ini, dan pasang pada elemen blog yang sobat inginkan, sobat bisa memasangnya pada postingan, dengan cara merubah mode HTML dari mode Compose, saat meletakkan kode...

    6. <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>
  6. Dari hasil kode CSS dan HTML diatas, maka hasil jadinya seperti pada tabel dibawah ini...

Nama Keterangan
Forex Bisnis Online
Blogger Platform
Iklan Google Adsense
Pembayaran Transfer Rekening, Paypal
Investasi Terpadu
NOTE Perhatikan kode tabel bagian HTML diatas, jika sobat ingin :
  1. 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>
  2. Menambah tabel kebawah, silahkan tambahkan dan atau copypaste kode <td>Investasi</td> <td>Terpadu</td>, yang ditutup diantara kode <tr> dan </tr>

Itulah kiranya yang dapat admin blog DP BBM 23 sampaikan mengenai Cara Membuat Table Responsif Di Blogspot, semoga penjelasan / cara penyampaian saya tersebut, dapat sobat fahami dan semoga bermanfaat, selamat dini hari dan sampai jumpa lagi, dijam berikutnya !!!



Before you continue reading, it is necessary to underline that what is written is only a reference! so if there are errors in words and delivery methods, please understand! and below the recommendation article for you!


Content Disclaimer!

  • I as the owner of "BlogCaraOcha" thank you to all loyal readers, and those who accidentally stopped by here.

    And I apologize if there are many advertisements on the homepage or in the post.

    After "BlogCaraOcha" is accepted as a Google publisher, Google automatically places all advertisements.

  • If the content on "BlogCaraOcha" has similarities with other sites or blogs, it only provides a reference to each other by spreading the word in a simple article.

    With the aim, all internet visitors can easily and freely which if the article is easy to understand.

    In addition, so that readers can easily find what is on the search, with content that can provide content in surfing the internet!

  • All images posted in the article are not 100% owned by "BlogCaraOcha" but are taken from Google Search.

    So if there are similarities with the images on other sites, it is only for illustration only (to decorate the storyline as outlined in the article).

    For some of the images here, they are purely self-created, with the same purpose as illustration only.

    However, if there are inappropriate images and ask to be removed, please provide more detailed information via the contact at "BlogCaraOcha"

  • For content that discusses the product review or tutorial, if there are errors, please be advised that it may be an error in typing words or lacking in detail reviewing.

    So if there are typos and results that are not appropriate, can provide input where the location of the error or lack, so that the content is immediately deleted or corrected.

    But before submitting, try to see between the date / year the post was published with the current date / year.

    Because it could be other times what the written policy has changed.
    • '