Cara membuat tabel spesifikasi di blogger

Tanahsurga.com - Cara membuat tabel spesifikasi di blog sangatlah simpel. Tabel spesifikasi responsive seperti ini biasanya di pasang di situs situs yang membahas mengenai handphone atau elektronik lainnya.

Memasang tabel pada blog adalah pilihan yang tepat jika blog anda membahas tentang hal tersebut. Karena selain membuat blog anda lebih terlihat profesional, pembaca akan lebih nyaman jika artikel anda tersusun dengan rapi.

Cara membuat tabel spesifikasi hp di blog

Cara membuat tabel spesifikasi hp di blog
Contoh tabel spesifikasi di blog

  • Masuk ke menu Tema
  • Kemudian Edit HTML
  • Salin kode di bawah ini kemudian Tempel/paste tepat diatas kode  ]]></b:skin> atau </style>

/* Tabel Spesifikasi Responsive */
table,caption,tbody{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
table{border-collapse:collapse;border-spacing:0;}
.post-body table td,.post-body table caption{border:1px solid #e9e9e9;padding:7px;text-align:left;vertical-align:top;}
.post-body table tr th {border:1px solid #6f7785;color:#fff;padding:8px 10px;text-align:left;vertical-align:top;font-size:16px}
.post-body table th {background:#747d8c;}
.post-body table tr th:hover{background:#57606f}
.post-body table.tr-caption-container {border:1px solid #f6f8f9;}
.post-body table caption{border:none;font-style:italic;}
.post-body td, .post-body th{color:#57606f;vertical-align:top;text-align:left;font-size:15px;padding:3px 5px;}
.post-body table tr:nth-child(even) > td {background-color:#ecf0f1;}
.post-body table tr:nth-child(odd) > td {background-color:#f6f8f9;}
.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 {color:#666;font-size:80%;padding:0px 8px 8px !important;}
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%}
.post-body table tr:hover td {background:#b0b1b4;color:#FFFFFF;border-top: 1px solid #22262e;}
table tr:nth-child(odd):hover td {background:#b0b1b4;}


  • Jika sudah terpasang dengan baik, selanjutnya Salin kode di bawah ini kemudian pasang di postingan Mode HTML bukan di compose.

<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody>
<tr><th colspan="2" scope="col" style="text-align: center;">TANAHSURGA.COM</th></tr>
<tr><td>NETWORK</td><td>GSM / HSPA / LTE</td> </tr>
<tr><td>LAUNCH</td><td>2019, Desember</td> </tr>
<tr><td>SIM</td><td>Dual SIM (Nano-SIM, dual stand-by)</td> </tr>
<tr><td>MEMORY</td><td>microSD, up to 582 GB (dedicated slot)</td> </tr>
<tr><td>BATTERY</td><td>Non-removable Li-Po 8700 mAh battery</td> </tr>
<tr><th colspan="2" scope="col" style="text-align: center;">OS & Hardware</th></tr>
<tr><td>OS</td><td>Android 8.0 (Pie); Funtouch 9</td> </tr>
<tr><td>Chipset</td><td>Qualcomm SDM785 Snapdragon 995 (11 nm)</td> </tr>
<tr><td>CPU</td><td>Octa-core (2x2.0 GHz Kryo 470 Gold &amp; 10x1.7 GHz Kryo 470 Silver)</td> </tr>
<tr><td>GPU</td><td>Adreno 712</td> </tr>
<tr><th colspan="2" scope="col" style="text-align: center;">BODY</th></tr>
<tr><td>Dimensions</td><td>155.3 x 78.7 x 5.2 mm (6.17 x 2.44 x 0.32 in)</td> </tr>
<tr><td>Weight</td><td>185 g (6.93 oz)</td> </tr>
<tr><td>Build</td><td>Front glass, plastic body</td> </tr>
<tr><th colspan="2" scope="col" style="text-align: center;">MAIN CAMERA</th></tr>
<tr><td>Triple</td><td>980 MP, f/1.8, 1/2", 0.8┬Ám, PDAF, 7 MP, f/2.2, 93mm (ultrawide), 1 MP, f/8.4, depth sensor</td> </tr>
<tr><td>Features</td><td>LED flash, HDR, panorama</td> </tr>
<tr><td>Video</td><td>2560p@30fps, 1990p@30/60fps</td> </tr>
<tr><th colspan="2" scope="col" style="text-align: center;">SELFIE CAMERA</th></tr>
<tr><td>Single</td><td>Motorized pop-up 92 MP, f/5.0</td> </tr>
<tr><td>Features</td><td>HDR</td> </tr>
<tr><td>Video</td><td>1990p@38fps</td> </tr>
</tbody> </table>

  • Agar lebih mudah melakukan pengeditan kembali lagi ke mode compose

Anda bisa mengubah warna sesuka hati kalian jika menurut anda warnanya kurang cocok.

Cukup sekian artikel cara membuat tabel spesifikasi di bloggger kali ini, semoga bermanfaat.

Posting Komentar