Cara Membuat Post Table Pada Blogger

Cara Membuat Post Table Pada Blogger
Bismillaahirrahmaanirrahiim
Assalaamu'alaikum Wr Wb!

Suatu laman web atau blog yang memuat sebuah jadwal atau catatan yang harus disusun dengan teratur tentunya memerlukan adanya pendukung seperti Microsoft Office Excel, tetapi tidak mungkin Microsoft Office Excel dapat dipasang pada blogspot karena belum adanya fitur tersebut. Maka didalam artikel ini saya akan memberi alternatif untuk para Bogger yang memerlukan sebuah table list atau post table untuk blognya, post table ini gayanya atau tampilannya diatur dengan CSS yang diterapkan kedalam template blog dan ini isi atau list diterapkan pada artikel atau halaman statik.
Saya desain dengan CSS yang simpel dan modern, sehingga rapi dan indah. Desain dizaman modern seperti sekarang ini tidak lagi banyak pernak pernik yang bukannya membuat indah tetapi malah membuat tidak jelasnya suatu desain, tetapi desain yang simpel dan rapi adalah sangat indah dan mengagumkan yang kini disebut minimalis. Kata "Minimalis" mungkin terbayang dalam fikiran anda adalah suatu yang kurang karena ada kata "Minim", minim disini maksudnya adalah simpel dan indah.
Saya rasa alangkah baiknya jika anda melihat dahulu hasilnya di Result berikut⇩
Result
Click To View
Jika anda menyukainya, mari ketutorialnya⇨

1. Letakkan CSS berikut diatas / sebelum tag ]]></b:skin>
/**************************************
Post Table By www.BloggerAutodidact.com
**************************************/
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 #009900;padding:10px;text-align:left;vertical-align:top;background:#006600 !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}

2. Letakkan HTML berikut kedalam halaman statik atau artikel baru dalam mode HTML (Bukan Compose) dan anda bisa menyesuaikan tulisan pada kepala tabel dan badan tabel sesuai dengan keinginan anda⇩
<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody>
<tr> <th><b>WEBSITE</b></th> <th><b>DESCRIPTION<b></b></b></th> </tr>
<tr> <td><a href="URL/" target="_blank"><b>Title<b></b></b></a></td> <td>Description</td></tr>
</tbody></table>
</div>

3. Alhamdulillaah, tutorial sudah siap.
Note
Jikalau ada pertanyaan, silakan anda bertanya kepada Admin melalui komen!
Terima Kasih.
Share
Silakan anda kongsikan artikel ini kepada rakan-rakan anda di media sosial, supaya mereka juga boleh mengambil manfaat daripada artikel ini!
Alhamdulillaah
Insyaa Allaah, semoga artikel saya dapat membantu rakan-rakan!
Wallaahu'alam
Wassalaamu'alaikum Wr Wb!
Previous
Next Post »

Silakan Anda Komen Dengan Budi Bahasa Yang Sopan Dan Arif! ConversionConversion EmoticonEmoticon