Cara Membuat Table Responsif Di Blogspot - DP BBM 23

Breaking

Post Top Ad

Post Top Ad

Friday, December 22, 2017

Cara Membuat Table Responsif Di Blogspot

DP BBM 23 adalah sebuah blog gratis, yang menyajikan seputar kata - kata, DP BBM, AdSense, Blogger, Tutorial, Windows 10, ISO, Theme Wind0ws 10, etc! dan sobat saat ini sedang membuka halaman Cara Membuat Table Responsif Di Blogspot, jika suka jangn sungkan untuk klik, like, share dan subcribe ya gaes!

Loading...

Baca Juga



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} 
    
  6. 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...

  7. <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>
    
  8. 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 !!!
thumbnail Title : Cara Membuat Table Responsif Di Blogspot
Posted by : Al Qur'an Online
Published : 2017-12-22T19:59:00Z
Rating : 90.5%
Reviewer : 9.998 Votes

Post Top Ad

Loading...