Teknotes.id – Sekarang ini banyak sekali website yang memberikan info seputar spesifikasi gadget, dan dikemas dengan menggunakan tabel yang responsive ketika dibuka menggunakan perangkat berbeda seperti mobile, desktop, dan tablet.
Sebenarnya ada salah satu plugin WordPress yang bernama ACF (Advanced Custom Fields), tetapi sayangnya saya belum bisa custom sendiri, alhasil saya menggunakan script code html. Dengan menggunakan code ini sangat berguna sekali untuk memudahkan pengunjung dalam melihat dan memahami spesifikasi gadget karena sudah berdasarkan data spesifikasi tertentu, jadi pengunjung tidak kebingungan.
Jika blog kamu tentang ponsel maka kamu bisa menggunakan kode ini untuk mempercantik tampilan spesifikasi ponsel kamu, selain itu kamu juga bebas memodifikasi kode kode ini sesua kemauan kamu.
Berikut ini artikel Tutorial Membuat Tabel Spesifikasi Gadget Dengan Script Html yang sudah saya tulis untuk kamu.
Daftar Isi
1. Script Code
Salin dan tempelkan script code dibawah ini.
<table style="text-align: left;" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<th style="text-align: left"valign="top" bgcolor="#7b68ee" ; colspan="2" scope="col"width="auto"><span style="color: #F5FFFA;">PELUNCURAN</th>
<tr>
<td style="text-align: left" width="200px">Dirilis</td>
<td style="text-align: left">24 Maret 2020</td>
</tr>
</tr>
<tr>
<td style="text-align: left">Negara</td>
<td style="text-align: left">China</td>
</tr>
<!------------------------------------------------------------------------------------------------------------------------------------!-->
<tr>
<th style="text-align: left"valign="top" bgcolor="#7b68ee" ; colspan="2" scope="col"width="auto"><span style="color: #F5FFFA;">PLATFORM</th>
<tr>
<td style="text-align: left" colspan="0">OS</td>
<td style="text-align: left">Android 10, MIUI 11</td>
</tr>
</tr>
<tr>
<td style="text-align: left">Chipset</td>
<td style="text-align: left">Qualcomm SM8250 Snapdragon 865 (7 nm+)</td>
</tr>
<tr>
<td style="text-align: left">CPU</td>
<td style="text-align: left">Octa-core (1x2.84 GHz Kryo 585 & 3x2.42 GHz Kryo 585 & 4x1.80 GHz Kryo 585)</td>
</tr>
<tr>
<td style="text-align: left">GPU</td>
<td style="text-align: left">Adreno 650</td>
</tr>
<tr>
<td style="text-align: left">Slot Kartu</td>
<td style="text-align: left">MicroSDXC</td>
</tr>
<tr>
<td style="text-align: left">Memori Internal</td>
<td style="text-align: left">6/128 GB, 8/128 GB, 12/256 GB</td>
</tr>
<tr>
<td style="text-align: left">Baterai</td>
<td style="text-align: left">5000 mAh</td>
</tr>
<!------------------------------------------------------------------------------------------------------------------------------------!-->
<tr>
<th style="text-align: left"valign="top" bgcolor="#7b68ee" ; colspan="2" scope="col"width="auto"><span style="color: #F5FFFA;">BODI</th>
<tr>
<td style="text-align: left">Dimensi</td>
<td style="text-align: left">-</td>
</tr>
</tr>
<tr>
<td style="text-align: left">Berat</td>
<td style="text-align: left">-</td>
</tr>
<tr>
<td style="text-align: left">Build</td>
<td style="text-align: left">Glass front (Gorilla Glass 5), glass black (Gorilla Glass 5), aluminium frame</td>
</tr>
<tr>
<td style="text-align: left">SIM</td>
<td style="text-align: left">Hybrid Dual Sim, (dual stand-by)</td>
</tr>
<!------------------------------------------------------------------------------------------------------------------------------------!-->
<tr>
<th style="text-align: left"valign="top" bgcolor="#7b68ee" ; colspan="2" scope="col"width="auto"><span style="color: #F5FFFA;">TAMPILAN</th>
<tr>
<td style="text-align: left">Layar</td>
<td style="text-align: left">Super Amoled capacitive touchscreen, 16M colors</td>
</tr>
</tr>
<tr>
<td style="text-align: left">Ukuran</td>
<td style="text-align: left">6.67 inci, 107.4 cm2</td>
</tr>
<tr>
<td style="text-align: left">Resolusi</td>
<td style="text-align: left">1080 x 2400 pixels, 20:9 ratio (`395 ppi density)</td>
</tr>
<tr>
<td style="text-align: left">Perlindungan</td>
<td style="text-align: left">Corning Gorilla Glass 5</td>
</tr>
<tr>
<td style="text-align: left">Warna</td>
<td style="text-align: left"></td>
</tr>
<!------------------------------------------------------------------------------------------------------------------------------------!-->
<tr>
<th style="text-align: left"valign="top" bgcolor="#7b68ee" ; colspan="2" scope="col"width="auto"><span style="color: #F5FFFA;">HARGA</th>
<tr>
<td style="text-align: left">Varian 1</td>
<td style="text-align: left">6/128 GB = 2999 yuan (Rp. 7 juta)</td>
</tr>
<tr>
<td style="text-align: left">Varian 2</td>
<td style="text-align: left">8/128 GB = 3999 yuan (Rp. 7.9 juta)</td>
</tr>
<tr>
<td style="text-align: left">Varian 1</td>
<td style="text-align: left">12/256 GB = 3699 yuan (Rp. 8.6 juta)</td>
</tr>
</tr>
</tbody>
</table>
2. Pemasangan
Kamu dapat memasang script kode di atas di postingan kamu dengan cara tambahkan Custom HTML.
See the Pen Script Spesifikasi Gadget by Etgar Kurniawan (@teknotesid) on CodePen.
3. Demo
Kesimpulan
Demikian artikel Tutorial Membuat Tabel Spesifikasi Gadget Dengan Script Html ini yang bisa saya bagikan. Terima kasih telah membaca hingga akhir, dan semoga bermanfaat ya.
