Untuk Tabel Keterangan Sekeren Milik Arlina Design mungkin seperti berikut :
| Features | Availability |
|---|---|
| Responsive | True |
| Google Testing Tool Validator | True Cek |
| SEO Friendly | True Cek |
| Mobile Friendly | True Cek |
| Dynamic Heading | True |
| High CTR | True |
| Personal Blog | True |
| Custom Threaded Comment | True |
| 2 Column | True |
| Auto Read More with Thumbnail | True |
| Responsive Ad Slot | True |
| Breadcrumbs | True |
| Related Posts with Thumb | True |
| Search Box | True |
| Social Share Button | True |
| Responsive Dropdown Menu | True |
| Social Links Widget | True |
| Smooth Back to Top | True |
| Custom Subscribe Box Widget | True |
| Sitemap Widget | True |
| Shortcodes | True |
| Remove Footer Credit | Premium |
| Without Encryption Code | Premium |
| 2 Color Option | Premium |
| Valid Schema.org | Premium |
| Unlimited Page Numbered | Premium |
| Well Documentation | True |
Diatas hanya sebagai gambaran namun sobat bisa ubah atau kreasikan desain sesenang sobat dengan cara edit CSS nya.
Untuk membuatnya ikuti langkah berikut dengan benar!
Salin kode CSS yang ada didalam box dibawah! dan tempelkan atau paste tepat di atas kode ]]></b:skin> atau </style>
/* CSS Post Table */
.post-body table td,.post-body table caption{border:1px solid #e9e9e9;padding:5px 10px;text-align:left;vertical-align:top;}
.post-body table th {border:1px solid #e9e9e9;padding:10px;text-align:left;vertical-align:top;}
.post-body table.tr-caption-container {border:1px solid #e9e9e9;}
.post-body table caption{border:none;font-style:italic;}
.post-body table{}
.post-body td, .post-body th{vertical-align:top;text-align:left;font-size:13px;padding:3px 5px;}
.post-body table tr:nth-child(even) > td {background-color:#f9f9f9;}
.post-body table tr:nth-child(even) > td:hover {background-color:#fbfbfb;}
.post-body th{background:#fff;font-weight:400;text-transform:uppercase;font-size:14px}
.post-body th:hover{background:#fdfdfd;}
.post-body td a{color:#768187;padding:0 6px;font-size:85%;float:right;display:inline-block;border-radius:3px}
.post-body td a:hover {color:#7f9bdf;border-color:#adbce0;}
.post-body td a[target="_blank"]:after {margin-left:5px;}
.post-body table.tr-caption-container td {border:none;padding:8px;}
.post-body table.tr-caption-container, .post-body table.tr-caption-container img, .post-body img {max-width:100%;height:auto;}
.post-body td.tr-caption {font-size:80%;padding:0px 8px 8px !important;}
.post-body li {list-style-type:square;}
img {max-width:100%;height:auto;border:none;}
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:33.33%}
table.columns-4 td.columns-cell{width:25%}
table.section-columns td.columns-cell{vertical-align:top}
table.tr-caption-container{padding:4px;margin-bottom:.5em}
td.tr-caption{font-size:80%}
.widget ul {padding:0;}Dan untuk memasang tabel keterangan nya salin dan tempel atau paste kode dibawah ke dalam Postingan atau Halaman dengan cara Pilih HTML pada menu yang ada diatas disamping tulisan Compose
<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody>
<tr> <th>Features</th> <th>Availability</th> </tr>
<tr> <td>Responsive</td> <td>True</td> </tr>
<tr> <td>Google Testing Tool Validator</td> <td>True <a href="https://developers.google.com/structured-data/testing-tool?url=http%253A%252F%252Fnubiebanget.blogspot.co.id%252F" rel="nofollow" target="_blank">Cek</a></td> </tr>
<tr> <td>SEO Friendly</td> <td>True <a href="http://chkme.com/seo-nubiebanget.blogspot.com" rel="nofollow" target="_blank">Cek</a></td> </tr>
<tr> <td>Mobile Friendly</td> <td>True <a href="https://www.google.com/webmasters/tools/mobile-friendly/?url=http%3A%2F%2Fnubiebanget.blogspot.com" target="_blank">Cek</a></td> </tr>
<tr> <td>Dynamic Heading</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>Custom Threaded Comment</td> <td>True</td> </tr>
<tr> <td>2 Column</td> <td>True</td> </tr>
<tr> <td>Auto Read More with Thumbnail</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>Related Posts with Thumb</td> <td>True</td> </tr>
<tr> <td>Search Box</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>Social Links Widget</td> <td>True</td> </tr>
<tr> <td>Smooth Back to Top</td> <td>True</td> </tr>
<tr> <td>Custom Subscribe Box Widget</td> <td>True</td> </tr>
<tr> <td>Sitemap Widget</td> <td>True</td> </tr>
<tr> <td>Shortcodes</td> <td>True</td> </tr>
<tr> <td>Remove Footer Credit</td> <td>Premium</td> </tr>
<tr> <td>Without Encryption Code</td> <td>Premium</td> </tr>
<tr> <td>2 Color Option</td> <td>Premium</td> </tr>
<tr> <td>Valid Schema.org</td> <td>Premium</td> </tr>
<tr> <td>Unlimited Page Numbered</td> <td>Premium</td> </tr>
<tr> <td>Well Documentation</td> <td>True</td> </tr>
</tbody> </table>Selesai... Mudah Bukan nah sekarang praktekan dan jika masih cara nya tidak berhasil silakhan berkomentar.
Sekian, Terima Kasih. Semoga Bermanfaat
kalo cara nambah kolom di tabelnya gimana ? maksud saya itukan cuma 2 ( features dan availability) saya pengen ada 6
ReplyDeleteEdit saja CSS nya mas. Kemudian disesuaikan.
Delete