Dapatkan diskon: Template 50% hanya bulan ini! Beli sekarang! Harga diskon Template: 50% hanya bulan ini! ×

Cara Memasang Table di Postingan Blog Blogger dan WordPress

Cara Memasang Table di Postingan Blog Blogger dan WordPress Images @rian_seo
12 Share
Cara Memasang Table di Postingan Blog Blogger dan WordPress

Table ini berfungsi untuk menyusun sebuah daftar kata yang sudah kita tentukan setiap postingan blog, biasanya table ini sangat berguna bagi pengelola blog / website yang membahas masalah harga maupun perbandingan barang.

Bagi kamu yang baru saja mengenal dunia blogging, mungkin akan sedikit bingung cara membuat sebuah table yang rapi dan juga responsive disemua layar. Untuk lebih jelasnya apa itu table post dan bagaimana tampilannya didalam postingan blog, berikut contoh gambar yang bisa kamu lihat.

Cara Memasang Table di Postingan Blog Blogger dan WordPress
Images from tablepress

Dalam halaman ini kami juga akan memberikan sulosi buat kamu yang masih belum bisa untuk membuat sebuah table didalam postingan blog. yang pastinya ada 2 platrom blogging yang bisa kamu ikuti dalam langkah kali ini, yaitu Blogger dan WordPress.


Setiap platrom blogging memiliki cara tersendiri, jadi untuk membuat table postingan ini tidak akan pernah sama dan caranya beda-beda.

Membuat Table Postingan di Blogger


Cara ini berlaku untuk pengguna blogspot, dimana yang perlu kamu lakukan hanyalah menyalin sebuah kode HTML dan memasangnya dibagian postingan.

Buka Blogger > Theme > edit HTML

Pertama adalah menyalin kode CSS Table post dibawah ini.
/* TABLE POST BLOGGER */
table {
color:#333;
width:100%;
border-spacing:1px;
border-collapse:separate;
padding:0 3px;
}
td, th {
height:30px;
transition:all .3s;
text-align:center;
width:auto;
}
th {
background:#B1B6AF;
font-weight:700;
border-radius: 5px;
}
td {
background:#FAFAFA;
}
tr:nth-child(even) td {
background:#F1F1F1;
}
tr:nth-child(odd) td {
background:#E1DDDD;
}
tr td:hover {
background:#666;
color:#FFF
}
Fungsi kode CSS ini untuk merapikan atau mempercantik tampilan table didalam post.
/* CSS TABLE POST STYLE 2 */
table {
color:#333;
width:100%;
border:1px solid #e6e6e6;
border-spacing:1px;
padding: 10px 10px 10px 33px;
}
td, th {
height:35px;
transition:all .3s;
text-align:center;
width:auto;
padding: 10px 10px 10px 33px;
border-left:1px solid #e6e6e6;
}
th {
color:#a4286a;
font-weight:700;
width:50%;
border-left:1px solid #e6e6e6;
font-size:21px;
padding: 10px 10px 10px 33px;
}
td {
background:#FAFAFA;
}
tr:nth-child(even) td {
border-top:1px solid #e6e6e6;
border-bottom:1px solid #e6e6e6;
}
tr:nth-child(odd) td {
}
tr td:hover {
color:#000;
text-decoration: underline;
}
/* CSS TABLE POST STYLE 3 */
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
Letakan kode CSS table post diatas dibagian atas kode ]]></b:skin>

Klik ' SIMPAN '

Memasang Table Post dibagian Postingan Blogger


Buka Blogger > Postingan

Salin dan letakan kode HTML dibawah ini dimode postingan HTML.
<table>
<tbody>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
<th>Heading 3</th>
</tr>
<tr>
<td>Table A</td>
<td>Table B</td>
<td>Table C</td>
</tr>
<tr>
<td>Blogger</td>
<td>Wordpress</td>
<td>Joomla</td>
</tr>
<tr>
<td>CSS3</td>
<td>HTML5</td>
<td>Javascript</td>
</tr>
<tr>
<td>Sylesheet</td>
<td>Script</td>
<td>Coding</td>
</tr>
</tbody>
</table>
<table cellpadding="0" cellspacing="0" style="text-align: left;">
  <tbody>
    <tr>
      <th>Specification :</th>
      <th></th>
    </tr>
    <tr>
      <td>Color</td>
      <td>Black / Silver</td>
    </tr>
    <tr>
      <td>Internal storage</td>
      <td>eMCP 32GB / 64GB</td>
    </tr>
    <tr>
      <td>MicroSD card</td>
      <td>Supports up to 2TB</td>
    </tr>
    <tr>
      <td>Google Drive</td>
      <td>100GB free space (1 year)</td>
    </tr>
    <tr>
      <td>Weight</td>
      <td>180 grams</td>
    </tr>
    <tr>
      <td>Dimension (W x D x H)</td>
      <td>159mm x 8.45mm x 76mm</td>
    </tr>
    <tr>
      <td>Display</td>
      <td>6-inch Full HD<br/>
      Front 2.5D curved<br/>
      1500:1 contrast ratio</td>
    </tr>
    <tr>
      <td>Processor</td>
      <td><b>CPU:</b> Qualcomm® Snapdragon™ 636<br/>
        <b>GPU:</b> Qualcomm® Adreno™ 509</td>
    </tr>
    <tr>
      <td>Memory</td>
      <td>LPDDR4X 3GB / 4GB / 6GB</td>
    </tr>
    <tr>
      <td>Main Rear Camera</td>
      <td>13MP / 16MP<br/>
Up to F2.0 aperture</td>
    </tr>
    <tr>
      <td>Second Rear Camera</td>
      <td>5MP<br/>
Portrait mode for depth sensing</td>
    </tr>
    <tr>
      <td>Front Camera</td>
      <td>8MP / 16MP</td>
    </tr>
    <tr>
      <td>Video Recording</td>
      <td>4K UHD (3840 by 2160 pixels)</td>
    </tr>
  </tbody>
</table>
Selanjutnya klik ' Publikasikan '

Selesai.

Membuat Tabel Post di Blog WordPress


WordPess unggulnya adalah segi penggunan yang begitu mudah dan simple, maka dari itu pengguna wordpress ini banyak dari seluruh penjuru dunia. Sangat cocok buat yang tidak paham masalah coding sebab semua kebutuhan disediakan menggunakan plugin saja yang siap pasang dan siap pakai.

Membuat table postingan di wordpress kali ini, kita hanya perlu memasang plugin gratis dari Tablepress, Jadi kamu tidak perlu pusing-pusing menyalin atau memasang kode yang rumit seperti di blogger tadi.

Buka dashbor Wordpress dengan cara https://namablogkamu/wp-admin

Dimenu dashbor klik Plugin > Tambah Baru > TablePress

Cari plugin dengan cara memasukan kata kunci di kolom pencarian " Table Press "

Apabila sudah ketemu, langsung saja instal plugin dan aktifkan.

Selanjutnya jika sudah kamu aktifkan plugin tablepress, Silahkan pilih menu TabelPress > Add New Table


Cara Memasang Table di Postingan Blog Blogger dan WordPress

Masukan data nama table dan juga penjelasan singkat isi table, dan atur juga jumlah table yang ingin kamu tampilkan

Setelah itu, klik SIMPAN dengan menekan tombol Add Table. Untuk lebih mudah dipahami, silahkan lihat contoh gambar dibawah ini.

Cara Memasang Table di Postingan Blog Blogger dan WordPress

Silakan masukkan tulisan data ke dalam tabel yang sudah kamu buat pada bagian kolom Table Content.

Cara Memasang Table di Postingan Blog Blogger dan WordPress
images by rianseo.com

Di bagian atas kamu akan melihat shortcode/code yang nantinya dapat kamu salin dan memasukannya didalam postingan untuk menampilkan data dalam tabel post.

Cara Memasang Table di Postingan Blog Blogger dan WordPress

Untuk mengatur bagian table postingan, kamu bisa atur beberapa opsi yang ingin kamu tampilkan lewat pilihan dibawahnya.

Kamu bisa mengatur bagian table dengan cara memasukan gambar, memberikan link aktif, menambah baris, memasukan kolom dan lainnya.

Cara Memasang Table di Postingan Blog Blogger dan WordPress

Apabila pengaturan sudah selesai, silakan kamu klik simpan dengan cara menekan tombol Save Changes.

Cara Memasang Table di Postingan Blog Blogger dan WordPress

Untuk melihat tampilan demo table, kamu juga bisa klik Preview untuk melihat hasil table yang kamu buat.

Memasang Table Post di Postingan WordPress


Buka menu > Pos > Tambah Baru > Mode Visual

Cara pertama kamu cukup menyalin dan menempelkan shurtcode yang sudah kamu salin tadi di dalam postingan WordPress menggunakan mode visual.

Cara Memasang Table di Postingan Blog Blogger dan WordPress

Dan untuk cara kedua, bisa dengan melalui tombol Insert Table from TablePress


Cara Memasang Table di Postingan Blog Blogger dan WordPress

Dibawah ini contoh tampilan table post atau table press yang sudah di publikasikan di artikel blog.

Cara Memasang Table di Postingan Blog Blogger dan WordPress

Pengaturan Tambahan  Plugin TablePress


Disini kamu bisa memodifikasi tampilan table menggunakan CSS Costom, Jika kamu tidak ahli di bidang CSS ini mungkin akan sedikit sulit untuk kamu ikuti.

Buka TabelPress > Plugin Option >

Cara Memasang Table di Postingan Blog Blogger dan WordPress

Disini saya hanya menggubah bagian warna navibar table saja, kode CSS nya adalah .tablepress thead th

Cara Memasang Table di Postingan Blog Blogger dan WordPress

Silahkan kamu modifikasi sendiri bagaimana tampilan warna table yang kamu inginkan, cara dengan menabah kode background: #kodewarna; color: #kodewarna_tulisan.

Kesimpulan


Demikian trik tutorial membuat table post di blogger dan wordpress. Wordpress lebih menawarkan kemudahan dalam membuat table menggunakan plugin dukungan tablepress. Kamu hanya perlu melakukan pemasangan plugin dan tabel sudah bisa dipasang pada postingan.

Jika kamu memiliki pertanyaan mengenai tutorial atau ada yang kurang dipahami, silahkan tulis komentar di blog ini.
Bagaimana reaksi Anda tentang artikel ini?
Previous article
Next article

Komentar (0)

Post a Comment

Kami memiliki kebijakan dalam berkomentar di blog ini :

- Dilarang promosi suatu barang
- Dilarang memasang link aktif di komentar
- Dilarang promosi iklan yang berbau judi, pornografi dan kekerasan
- Dilarang menulis komentar yang berisi sara atau cemuhan

Kebijakan komentar yang bisa Anda temukan selengkapnya disini

Dukungan :

Jika menyukai dengan artikel blog kami, silahkan subscribe blog ini

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Subscribe now

Signup now to my exclusive newsletter