Banyak blog dan chanel youtube yang membahas dan mengulas mengenai spesfikasikasi smartphone. Kedepan blog saya juga akan lebih banyak membahas mengenai teknologi dan spesifikasi Smartphone pada khususnya atau barang elektronik.
Seperti Laptop, Pc, Console Game oleh sebab itu dibutuhkan sebuah tabel yang dapat disisipkan pada postingan blog. Tabel tersebut haruslah responsive dalam postingan blog agar dapat memudahkan para pembaca untuk melihat spesifikasi smartphone dengan mudah.
Oleh sebab itu pada kesempatan kali ini saya akan memberikan sebuah tutorial bagaimana Cara Mudah Membuat Tabel Spesifikasi Smartphone Pada Postingan Blogger. Dengan tutorial ini diharapkan dapat mempermudah para pembaca dalam melihat spesifikasi Smartphone pada khususnya atau barang elektronik.
Seperti Laptop, Pc, Console Game dalam bentuk tabel yang responsive. Berikut adalah langkah-langkah yang harus anda terapkan untuk membuat tabel spesifikasi Smartphone pada postingan blogger.
Cara Mudah Membuat Tabel Spesifikasi Smartphone Pada Postingan Blogger
1. Login ke Blog anda > pilih menu Tema > kemudian pilih menu Edit HTML
2. Letakkan kode ini tepat berada 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;}3. Untuk menerapkannya di dalam postingan anda pada menu Postingan > pilih Entri Baru > kemudian letakkan kode ini pada menu HTML (bukan Compose)
| Spesifikasi Xiaomi Redmi Note 8 | |
|---|---|
| NETWORK | GSM / HSPA / LTE |
| LAUNCH | 2019, Oktober |
| SIM | Dual SIM (Nano-SIM, dual stand-by) |
| MEMORY | microSD, up to 256 GB (dedicated slot) |
| BATTERY | Non-removable Li-Po 4000 mAh battery |
| OS & Hardware | |
| OS | Android 9.0 (Pie); Funtouch 9 |
| Chipset | Qualcomm SDM675 Snapdragon 665 (11 nm) |
| CPU | Octa-core (2x2.0 GHz Kryo 460 Gold & 6x1.7 GHz Kryo 460 Silver) |
| GPU | Adreno 612 |
| BODY | |
| Dimensions | 158.3 x 75.3 x 8.4 mm (6.19 x 2.94 x 0.32 in) |
| Weight | 190 g (6.53 oz) |
| Build | Front glass, plastic body |
| MAIN CAMERA | |
| Triple | 48 MP, f/1.8, 1/2", 0.8µm, PDAF, 8 MP, f/2.2, 13mm (ultrawide), 5 MP, f/2.4, depth sensor |
| Features | LED flash, HDR, panorama |
| Video | 2160p@30fps, 1080p@30/60fps |
| SELFIE CAMERA | |
| Single | Motorized pop-up 32 MP, f/2.0 |
| Features | HDR |
| Video | 1080p@30fps |
4. Untuk mempermudah dalam proses mengetik, kalian bisa mengeditnya dalam menu Compose kembali
Demikian tutorial mengenai Cara Mudah Membuat Tabel Spesifikasi Smartphone Pada Postingan Blogger. Bila anda merasa kesulitan menerapkan tutorial di atas pada blog kalian, jangan sungkan untuk bertanya pada kolom komentar dibawah. Semoga informasi yang diberikan bermanfaat dan sampai jumpa pada tutorial berikutnya.