Analisyuki
  • Blogger
  • WordPress
  • AdSense
  • Tips SEO
  • Komputer
No Result
View All Result
Analisyuki
  • Blogger
  • WordPress
  • AdSense
  • Tips SEO
  • Komputer
No Result
View All Result
Analisyuki
No Result
View All Result
Home CSS

Cara Membuat Tabel Spesifikasi Handphone di Blogger

25 Maret 2019
in CSS, HTML, Tutorial Blogger
Share on FacebookShare on Twitter

Cara Membuat Tabel Spesifikasi Handphone di Blogger – Sudah beberapa kali saya telah membagikan cara membuat tabel responsive di blogger. Kali ini saya akan membagikan tutorial cara membuat tabel spesifikasi handphone (Smartphone)/laptop/PC atau untuk spesifikasi barang elektronik lainnya.

Jika anda pengguna blogger/blogspot yang membahas tentang spesifikasi handphone atau barang elektronik lainnya, tidak ada salahnya menggunakan tabel spesifikasi di dalam artikel anda. Tabel spesifikasi handphone/handphone dalam postingan blog dapat memudahkan para pembaca untuk melihat spesifikasi HP dengan mudah/

Tentunya dengan tabel ini pengunjung dapat merasa nyaman dalam membaca postingan tabel spesifikasi dibandingkan dengan teks panjang dan padat. tanpa panjang lebar, mari kita simak baik-baik cara membuat tabel spesifikasi ini.

Cara Membuat Tabel Spesifikasi Handphone di 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)
    <table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody>
    <tr><th colspan="2" scope="col" style="text-align: center;">Spesifikasi VIVO V15 PRO</th></tr>
    <tr><td>NETWORK</td><td>GSM / HSPA / LTE</td> </tr>
    <tr><td>LAUNCH</td><td>2019, February</td> </tr>
    <tr><td>SIM</td><td>Dual SIM (Nano-SIM, dual stand-by)</td> </tr>
    <tr><td>MEMORY</td><td>microSD, up to 256 GB (dedicated slot)</td> </tr>
    <tr><td>BATTERY</td><td>Non-removable Li-Po 3700 mAh battery</td> </tr>
    <tr><th colspan="2" scope="col" style="text-align: center;">OS & Hardware</th></tr>
    <tr><td>OS</td><td>Android 9.0 (Pie); Funtouch 9</td> </tr>
    <tr><td>Chipset</td><td>Qualcomm SDM675 Snapdragon 675 (11 nm)</td> </tr>
    <tr><td>CPU</td><td>Octa-core (2x2.0 GHz Kryo 460 Gold &amp; 6x1.7 GHz Kryo 460 Silver)</td> </tr>
    <tr><td>GPU</td><td>Adreno 612</td> </tr>
    <tr><th colspan="2" scope="col" style="text-align: center;">BODY</th></tr>
    <tr><td>Dimensions</td><td>157.3 x 74.7 x 8.2 mm (6.19 x 2.94 x 0.32 in)</td> </tr>
    <tr><td>Weight</td><td>185 g (6.53 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>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</td> </tr>
    <tr><td>Features</td><td>LED flash, HDR, panorama</td> </tr>
    <tr><td>Video</td><td>2160p@30fps, 1080p@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 32 MP, f/2.0</td> </tr>
    <tr><td>Features</td><td>HDR</td> </tr>
    <tr><td>Video</td><td>1080p@30fps</td> </tr>
    </tbody> </table>
  4. Untuk mempermudah dalam proses mengetik, kalian bisa mengedinya dalam menu Compose kembali
DEMO

Demikianlah tutorial singkat Cara Membuat tabel Spesifikasi Handphone di Blogger, semoga artikel ini dapat bermanfaat bagi kita semua, Terimakasih.

Leave Comment

You might also like

Cara Setting Robots txt Blogger

Cara Setting Robots.txt di Blogger yang Benar untuk SEO

1 Januari 2021
Template Blogger Terbaik 2021

Template Blogger Terbaik Tahun 2021

1 Januari 2021
Cara Memasang Kode Google Analytics Wordpress

Cara Memasang Kode Google Analytics Terbaru di WordPress

15 Desember 2020
Cara Memasang Kode Google Analytics Terbaru

Cara Memasang Kode Google Analytics Terbaru di Blogger

13 Desember 2020
Cara Update Google Analytics ke Versi Terbaru

Cara Update Tampilan Google Analytics ke Versi Terbaru

13 Desember 2020
Matched Content

Memodifikasi Iklan Matched Content Menjadi Bentuk Grid

2 Desember 2020
  • Disclaimer
  • Sitemap
  • Privacy Policy
  • Contact
Call us: Contact From

© 2020 Analisyuki - All Right Reserved

No Result
View All Result
  • Blogger
  • WordPress
  • AdSense
  • Tips SEO
  • Komputer

© 2020 Analisyuki - All Right Reserved

Welcome Back!

Login to your account below

Forgotten Password?

Create New Account!

Fill the forms below to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In