Cara Menciptakan Table Untuk Blog Valid Amp

Table biasa di gunakan untuk menciptakan rincian atau spesifikasi baik untuk informasi harga atau ke unggulannya, dan bagi blog yang membahas tutorial blog biasanya di gunakan untuk fitur fitur sebuah Template.

Dan kali ini aku akan memperlihatkan cara menciptakan Table di blog Valid AMP Html. Jika table untuk blog non AMP di pasang untuk blog valid AMP akan menciptakan blog menjadi kritis, dan salah satu artikel blog akan menjadi eror AMP atau blog tidak lagi jadi blog AMP.

Berikut yaitu demonya

Fitur	Fitur
Valid AMP	Yes
Responsif(Mobile freindly)	Yes
2 button Menu via Mobile	Yes
Popular Post Carousel di atas Footer	Yes
Grid style post (Responsif)	Yes
fixed Social Share	Yes
Space iklan	Yes
Navigasi Blog-pager di Home post dan post	Yes
Dan Lain Lain

bagaimana tertarik untuk memasangnya ?

Silahkan simpan instruksi CSS di bawah ini di dalam style amp-custom untuk postingan baik untuk versi desktop ataupun versi mobile bila di pisahkan

/* Table by CzRandy.Net */ .post-body table[border="1"] th,.post-body table[border="1"] td,.post-body table[border="1"] caption{border:1px solid;padding:.2em .5em;text-align:left;vertical-align:top} .post-body table.tr-caption-container{border:1px solid #e5e5e5} .post-body th{font-weight:bold} .post-body table[border="1"] caption{border:none;font-style:italic} .post-body table{background:#f6f6f6;width:100%} .post-body td,.post-body th{vertical-align:top;text-align:left;font-size:13px;padding:3px 5px;border:1px solid #e5e5e5} .post-body th{padding-left:13px;background:#eee} .post-body table.tr-caption-container td{background:#f6f6f6;border:none;padding:8px} .post-body img{max-width:100%;height:auto} .post-body img,.post-body table.tr-caption-container{max-width:100%;height:auto} .post-body .separator img{max-width:92%;height:auto} .post-body td.tr-caption{color:#666;font-size:80%;padding:0 8px 8px} img{max-width:100%;height:auto;border:0} table{max-width:100%} .clear{clear:both} .clear:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0} body{background:#dddddd none repeat scroll top left;margin:0 0 0 0;padding:0 0 0 0;color:#333333;font:normal normal 13px Droid Sans,Arial,sans-serif;text-align:left}

Untuk cara menggunakannya teman dapat memakai instruksi di bawah ini di mode Html postingan

<table cellpadding="0" cellspacing="0"> <tbody> <tr> <th>Fitur</th> <th>Fitur</th> </tr> <tr> <td>Valid AMP</td> <td>Yes</td> </tr> <tr> <td>Responsif(Mobile freindly)</td> <td>Yes</td> </tr> <tr> <td>2 button Menu via Mobile</td> <td>Yes</td> </tr> <tr> <td>Popular Post Carousel di atas Footer</td> <td>Yes</td> </tr> <tr> <td>Grid style post (Responsif)</td> <td>Yes</td> </tr> <tr> <td>fixed Social Share</td> <td>Yes</td> </tr> <tr> <td>Space iklan</td> <td>Yes</td> </tr> <tr> <td>Navigasi Blog-pager di Home post dan post</td> <td>Yes</td> <tr> <td>Dan Lain Lain</td> <td> </td> </tr> </tbody> </table>

Untuk tulisannya dapat teman ubah di notepad sesuai dengan kebutuhan sobat

Semoga bermanfaat !