Cara Memasang Table Post di Template VioMagz

Cara Memasang Table Post di Template VioMagz
Cara Memasang Table Post di Template VioMagz

blog.rianseo.com - Mungkin sebagian dari kalian ada yang belum mengetahui tentang cara membuat table post di template VioMagz, karena untuk panduan memasang tabel post ini juga tidak di jelaskan lewat halaman panduan template VioMagz oleh mas sugeng sendiri.

Berikut ini saya akan membagikan beberapa intruksi tambahan buat sobat semua, yang ingin memasang tabel post ini untuk mempercantik tampilan artikel kamu saat ada beberapa informasi yang memang perlu dikasih table.

Misalnya saja seperti daftar harga, daftar produk, daftar nama dan lain-lain. Tabel ini sangat berguna untuk kamu terapkan di setiap artikel agar terlihat rapi dan juga tidak berantakan jika kamu menggunakan tabel ini.

Memasang Tabel Post di Blogger


Langkah 1


Salin kode CSS di bawah ini.
/* Post Table */
.post-body table {width:100%;}
.post-body table td,.post-body table caption{background:#fff;border:1px solid #f5f5f5;padding:10px;text-align:left;vertical-align:top}
.post-body table th{background:#4D99D0;color:#fff;border:1px solid #f5f5f5;border-bottom:0;padding:10px;text-align:left;vertical-align:top}
.post-body table.tr-caption-container {border:1px solid #f5f5f5;margin:0;}
.post-body th{font-weight:500;}
.post-body table caption{border:none;font-style:italic;}
.post-body td, .post-body th{vertical-align:top;text-align:left;font-size:13px;padding:3px 5px;border:1px solid #97b28e;}
.post-body th{}
.post-body th:hover{color:#fff;}
.post-body td a{color:#444;}
.post-body td a:hover{color:#cf4d35;}
.post-body table.tr-caption-container td{border:0;padding:8px;background:#fff;line-height:17px;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap;font-weight:700;color:#000;}
.post-body table.tr-caption-container, .post-body table.tr-caption-container img, .post-body img {max-width:100%;height:auto;}
.post-body li {list-style-type:square;}
.post-body td.tr-caption {color:#666;font-size:80%;padding:0px 8px 8px!important;}

Letakan kode CSS Table tadi tempat di bagian atas ]]></b:skin>

Langkah 2


Jika ingin menampilkan table post, kamu harus menyalin kode dibawah ini dan meletakannya dalam postingan dengan mode HTML bukan mode Compase.
<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody>
<tr>             <td>Adsense Ready</td>             <td>True</td>         </tr>
<tr>             <td>Valid Schema.org</td>             <td>True</td>         </tr>
<tr>             <td>High CTR</td>             <td>True</td>         </tr>
<tr>             <td>Personal Blog</td>             <td>True</td>         </tr>
<tr>             <td>2 Column</td>             <td>True</td>         </tr>
<tr>             <td>Responsive Ad Slot</td>             <td>True</td>         </tr>
<tr>             <td>Breadcrumbs</td>             <td>True</td>         </tr>
<tr>             <td>Featured Post</td>             <td>True</td>         </tr>
<tr>             <td>Social Share Button</td>             <td>True</td>         </tr>
<tr>             <td>Responsive Dropdown Menu</td>             <td>True</td>         </tr>
<tr>             <td>Smooth Back to Top</td>             <td>True</td>         </tr>
<tr>             <td>Shortcodes</td>             <td>True</td>         </tr>
</tbody></table>

Contoh Tampilan Table Post

Daftar Availability
Adsense Ready True
Valid Schema.org True
High CTR True
Personal Blog True
2 Column True
Responsive Ad Slot True
Breadcrumbs True
Featured Post True
Social Share Button True
Responsive Dropdown Menu True
Smooth Back to Top True
Shortcodes True
Demikian trik singkat yang bisa saya tulis di artikel ini, jik ada pertanyaan yang kurang Anda pahami, silahkan kirim pertanyaan lewat kolom komentar Disqus.
Previous article
Next article

0 Response to "Cara Memasang Table Post di Template VioMagz"

Post a Comment

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel