Cara membuat tabel spesifikasi smartphone pada blog

Faronesia.com - Hallo blogger, apakah anda pernah melihat website yang memberikan info seputar spesifikasi smartphone? Pastinya sering dong, dan melihat tabel spesifikasi yang dikemas menggunakan tabel yang bagus serta responsive. Bagaimana cara membuat tabel spesifikasi tersebut? Jika memang anda ingin membuatnya berarti anda berkunjung pada web yang tepat karena web faronesia.com sengaja dibangun untuk memberikan tutorial bagi para blogger.

Keunggulan dari menggunakan tabel dalam penerapan info spesifikasi ini sangat berguna sekali. Dengan menggunakan tabel pengunjung akan merasa mudah memahami serta terlihat tidak membingungkan karena semua data spesifikasi terperinci namun terkesan rapi dan tidak berantakan dibandingkan tanpa tabel atau bahkan dengan artikel.

Sangat direkomendasikan dan cocok sekali untuk anda yang memang ingin membuat sebuah web ataupun blog tentang spesifikasi smartphone maupun online store smartphone. Selain itu, tabel ini bisa juga bisa dimodifikasi sesuai keinginan anda dan spesifikasi barang lainnya.

Dibawah ini adalah tata cara penerapan membuat tabel spesifikasi smartphone pada blog. Admin harap simak dan teliti agar tutorial terlaksana secara baik dan menghasilkan tabel yang diinginkan.

Melihat demo klik tombol dibawah ini:

demo

Cara membuat tabel spesifikasi smartphone pada blog

• Masuk dashboard blog anda
• Lalu masuk ke menu tema
• Cari kode ]]></b:skin>
• Tempelkan kode dibawah ini tepat diatas kode ]]></b:skin>

/* Tabel Spesifikasi Smartphone */ 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;}

• Selanjutnya simpan tema.

Cara penerapannya tabel spesifikasi smartphone

• Buat lah postingan baru
• Lalu klik Html (disamping compose)
• Selanjutnya letakkan kode dibawah ini

<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody>
<tr><th colspan="2" scope="col" style="text-align: center;">Spesifikasi www.faronesia.com</th></tr>
<tr><td>NETWORK</td><td>Isi sesuai spesifikasi</td> </tr>
<tr><td>LAUNCH</td><td>Isi sesuai spesifikasi</td> </tr>
<tr><td>SIM</td><td>Isi sesuai spesifikasi</td> </tr>
<tr><td>MEMORY</td><td>Isi sesuai spesifikasi</td> </tr>
<tr><td>BATTERY</td><td>Isi sesuai spesifikasi</td> </tr>
<tr><th colspan="2" scope="col" style="text-align: center;">OS &amp; Hardware</th></tr>
<tr><td>OS</td><td>Isi sesuai spesifikasi</td> </tr>
<tr><td>Chipset</td><td>Isi sesuai spesifikasi</td> </tr>
<tr><td>CPU</td><td>Isi sesuai spesifikasi</td> </tr>
<tr><td>GPU</td><td>Isi sesuai spesifikasi</td> </tr>
<tr><th colspan="2" scope="col" style="text-align: center;">BODY</th></tr>
<tr><td>Dimensions</td><td>Isi sesuai spesifikasi</td> </tr>
<tr><td>Weight</td><td>Isi sesuai spesifikasi</td> </tr>
<tr><td>Build</td><td>Isi sesuai spesifikasi</td> </tr>
<tr><th colspan="2" scope="col" style="text-align: center;">MAIN CAMERA</th></tr>
<tr><td>Triple</td><td>Isi sesuai spesifikasi</td> </tr>
<tr><td>Features</td><td>Isi sesuai spesifikasi</td> </tr>
<tr><td>Video</td><td>Isi sesuai spesifikasi</td> </tr>
<tr><th colspan="2" scope="col" style="text-align: center;">SELFIE CAMERA</th></tr>
<tr><td>Single</td><td>Isi sesuai spesifikasi</td> </tr>
<tr><td>Features</td><td>Isi sesuai spesifikasi</td> </tr>
<tr><td>Video</td><td>Isi sesuai spesifikasi</td> </tr>
</tbody> </table>

• Selesai, lalu lihat hasilnya

Demikianlah cara membuat tabel spesifikasi smartphone pada blog semoga bermanfaat dan menambah wawasan para sahabat blogger. jangan lupa share dan jika ada tanggapan serta masukkan silahkan masukkan pada kolom komentar yang telah tersedia.

Share this post