Cara Membuat Tabel Spesifikasi Di Blogspot Dengan Mudah Dan Responsive


omiska.com - Seperti yang kita ketahui, tabel merupakan susunan data yang bentuk baris dan kolom. Mungkin kamu sering melihat tabel di situs-situs lainnya seperti situs toko online, situs edukasi, lowongan kerja, dan lain sebagainya. Sadar akkan pentingnya tabel yang akan membuat data tersusun rapi dan kompleks, maka dari itu banyak blogger telah menyisipkan tabel ke postingan-postingan blog mereka. 

Nah, pada kesempatan kali ini saya akan memberikan tutorial bagaimana menambahkan tabel spesifikasi pada blog yang menggunakan platform blogger / blogspot. Tabel spesifikasi ini banyak digunakan di toko online, misalnya toko online mesin untuk mencantumkan spesifikasi mesin, situs gadget untuk mencantumkan spesifikasi gadget dalam bentuk tabel, dan banyak digunakan pada situs-situs produk lainnya.

Untuk membuat tabel spesifikasi yang sederhana mengharuskanmu menambahkan kode CSS pada template blog kamu, namun jangan khawatir karena saya akan memberikan cara yang mudah kamu pahami.

Pertama buka Dashboard Blogger kamu

Lalu klik Tema/Theme

Klik Edit HTML

Lalu tekan CTLR + F untuk menggunakan fitur Find

Lalu tulis kode ]]></b:skin> lalu Enter 

Lalu copy kode CSS dibawah ini :


/* 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 #089401;padding:10px;text-align:left;vertical-align:top;background:#08a100 !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}

Pastekan kode CSS tepat diatas kode ]]></b:skin>


Keterangan

Jika ingin mengubah warna header pada tabel, kamu dapat menggantikan kode warna yang berawarna Merah dengan kode warna yang kamu sukai.

Jika kamu ingin mengganti warna garis pada tabel, kamu cukup ganti kode warna yang berwarna Biru dengan kode warna yang kamu sukai.

Cara menambahkan tabel pada postingan blog adalah sebagai berikut : 

klik HTML seperti gambar dibawah ini



Lalu pastekan kode dibawah ini dibawah kode 


<table cellpadding="0" cellspacing="0" style="text-align: left;">
  <tbody>
    <tr>
      <th>Spesifikasi :</th>
      <th></th>
    </tr>
    <tr>
      <td>CPU</td>
      <td>Kosong</td>
    </tr>
    <tr>
      <td>Penyimpanan</td>
      <td>Kosong</td>
    </tr>
    <tr>
      <td>RAM</td>
      <td>Kosong</td>
    </tr>
    <tr>
      <td>Layar</td>
      <td>Kosong</td>
    </tr>
    <tr>
      <td>Berat</td>
      <td>Kosong</td>
    </tr>
    <tr>
      <td>Dimensi (W x D x H)</td>
      <td>Kosong</td>
    </tr>
    <tr>
      <td>Kamera Belakang</td>
      <td>Kosong<br/>
(Keterangan lainnya)</td>
    </tr>
    <tr>
      <td>Kamera Depan</td>
      <td>kosong<br/>
(keterangan lainnya)</td>
    </tr>
    <tr>
      <td>Baterai</td>
      <td>Kosong</td>
    </tr>
    <tr>
      <td>Jaringan</td>
      <td>Kosong</td>
    </tr>
    <tr>
      <td>Harga</td>
      <td>Kosong</td>
    </tr>
  </tbody>
</table>
Setelah itu, kamu dapat menyesuaikan dengan kebutuhanmu. 

Note :
Jika ingin menambahkan isi tabel, maka kamu harus menambahkan kode berikut ini:

    <tr>
      <td>Contoh Judul</td>
      <td>Contoh Keterangan</td>
    </tr>

Pastekan kode diatas tepat dibawah kode </tr>

Jadi, tabel spesifikasi akan tampak seperti dibawah ini :

Tabel spesifikasi akan tampak seperti ini

Nah, begitulah cara menambahkan tabel spesifikasi pada postingan blog yang menggunakan platfom Blogger / Blogspot. Semoga artikel ini bermanfaat dan jangan lupa bagikan artikel ini ke teman kamu supaya mereka tau apa yang kamu tau. 

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel