Cara Menciptakan Tabel Spesifikasi Responsif Di Blog

Cara Membuat Tabel Spesifikasi Responsif di Blog - Tabel Spsifikasi yang responsif yang biasanya dicari oleh blogger yang mempunyai konten menyerupai Spesifikasi Hp-Hp untuk konten blognya, konten spesifikasi tanpa mempunyai tabel spesifikasi rasanya kurang responsif untuk dilihat bener nggak? terasa awut-awutan dan orang yang mengunjungi suka kurang fokus.

Tabel Spesifikasi ini terlihat simple tapi mempunyai kesan yang berbeda dan pastinya terlihat responsif misalkan dilihat melalui Hp.

Oke jikalau tertarik pribadi saja ke caranya

Cara Membuat Tabel Spesifikasi Responsif

Pertama teman masuk terlebih dahulu ke Blogger > Tema > Edit HTML Copy Kode CSS dibawah ini pastekan sempurna diatas kode ]]></b:skin> atau ]]&gt;&lt;/b:skin&gt;

/* TABEL SPESIFIKASI RESPONSIF */ .post-body table {width:100%;} .post-body table td, .post-body table caption{border:1px solid #F1F1F1;padding:10px;text-align:left;vertical-align:top;} .post-body table th {border:1px solid #e6e6e6;padding:10px;text-align:left;vertical-align:top;} .post-body table.tr-caption-container {border:1px solid #eee;} .post-body th{font-weight:700;} .post-body table caption{border:none;font-style:italic;} .post-body td, .post-body th{vertical-align:top;text-align:left;font-size:13px;padding:3px 5px;border:1px solid #eee;} .post-body th{background:#059FD8; color:#181818;} .post-body th:hover{background:#2AA4D1;} .post-body td a{color:#444;} .post-body td a:hover{color:#FEFEFE;} .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;}

Jika sudah klik Simpan pada tema.

Nah jikalau sudah menerapkan instruksi CSS diatas kini saatnya menerapkan instruksi HTML pada postingan sobat, Pemasangan instruksi HTML diabawh ini menyerupai biasa dalam mode HTML bukan Compose.

<table class="full"> <tbody> <tr><th colspan="2" scope="col" style="text-align: center;"><span style="font-size: large;"> Samsung Galaxy Phone Specification</span></th></tr> </tbody> <tbody> <td>Network</td><td>GSM / HSPA / LTE</td></tr> <tr><td>2G bands</td><td>GSM 850 / 900 / 1800 / 1900 - SIM 1 &amp; SIM 2</td></tr> <tr><td>3G bands</td><td>HSDPA 850 / 900 / 1900 / 2100</td></tr><tr><td>4G bands</td><td>LTE grup band 1(2100), 3(1800), 7(2600), 38(2600), 39(1900), 40(2300), 41(2500) - SM-J7008</td></tr> <tr><td>Speed</td><td>HSPA 21.1/5.76 Mbps</td></tr> <tr><td>GPRS</td><td>Yes</td></tr><tr><td>EDGE</td><td>Yes</td></tr> <tr><th colspan="2" scope="col" style="text-align: center;"><span style="font-size: large;">OS And Hardware</span></th></tr> <tr><td>OS</td><td>Android OS, v5.1.1 (Lollipop) || Custom UI</td></tr> <tr><td>Processor</td><td><span style="text-align: justify;">Quad-core 1.5 GHz Cortex-A53</span></td></tr> <tr><td>Chipset</td><td>Qualcomm MSM8916 Snapdragon 410</td></tr> <tr><td>GPU</td><td>Adreno 306</td></tr> <tr><th colspan="2" scope="col" style="text-align: center;"><span style="font-size: large;">Body</span></th></tr> <tr><td>Dimensions</td><td>134.5 x 65.2 x 7.3 mm (5.30 x 2.57 x 0.29 in)</td></tr> <tr><td>Weight</td><td>132 g (4.66 oz)</td></tr> <tr><td>Colors</td><td>White, Black, Gold</td></tr> <tr><th colspan="2" scope="col" style="text-align: center;"><span style="font-size: large;">Display</span></th></tr> <tr><td>Type</td><td>Super AMOLED capacitive touchscreen, 16M colors</td></tr> <tr><td>Screen Size</td><td>4.7 inches ( 69.4% screen-to-body ratio)</td></tr> <tr><td>Resolution</td><td>720 x 1280 pixels ( 312 ppi pixel density)</td></tr> <tr><td>Multitouch</td><td>Yes</td></tr> <tr><td>Protection</td><td>Corning Gorilla Glass 4</td></tr> <tr><td>Sensors</td><td>Accelerometer, Proximity, Compass</td></tr> <tr><th colspan="2" scope="col" style="text-align: center;"><span style="font-size: large;">Memory</span></th></tr> <tr bgcolor="#ffffff" class="config_table"><td>Card slot</td><td>microSD, up to 128 GB</td></tr> <tr bgcolor="#FFFFFF" class="config_table"><td>Internal</td><td>16 GB</td></tr> <tr bgcolor="#ffffff" class="config_table"><td>RAM</td><td>1.5 GB</td></tr> <tr><th colspan="2" scope="col" style="text-align: center;"><span style="font-size: large;">Camera</span></th></tr> <tr><td>Primary</td><td>13 MP, 4128 x 3096 pixels, autofocus, LED flash</td></tr> <tr><td>Features</td><td>Geo-tagging, touch focus, face detection, panorama</td></tr> <tr><td>Video</td><td>1080p@30fps</td></tr> <tr><td>Secondary</td><td>5 MP</td></tr> <tr><th colspan="2" scope="col" style="text-align: center;"><span style="font-size: large;">Multimedia</span></th></tr> <tr><td>Music play</td><td>Yes</td></tr> <tr><td>Radio</td><td>FM Radio</td></tr> <tr><td>Games</td><td>Yes</td></tr> <tr><td>Alert types</td><td>Vibration; MP3, WAV ringtones</td></tr> <tr bgcolor="#ffffff" class="config_table"><td>Loudspeaker</td><td>Yes</td></tr> <tr bgcolor="#ffffff" class="config_table"><td>3.5mm jack</td><td>Yes</td></tr> <tr><th colspan="2" scope="col" style="text-align: center;"><span style="font-size: large;">Battery and Power</span></th></tr> <tr><td>Type</td><td>Removable Li-Ion 3000 mAh battery</td></tr> <tr><td>Stand-by</td><td>42 Hours</td></tr> <tr><td>Talk time</td><td>12 Hours</td></tr> <tr bgcolor="#ffffff" class="config_table"></tr> <tr><th colspan="2" scope="col" style="text-align: center;"><span style="font-size: large;">Releasing Date</span></th></tr> <tr><td>Announced</td><td>2015, December</td></tr> <tr><td>Status</td><td>Releasing on 2015, December </td></tr> <tr bgcolor="#ffffff" class="config_table"></tr> <tr><th colspan="2" scope="col" style="text-align: center;"><span style="font-size: large;">Expected Price</span></th></tr> <tr><td>US Dollor</td><td>$200</td></tr> <tr><td>Bangladeshi Taka</td><td>BDT15,000</td></tr> <tr><td>Indian Rs.</td><td>Rs. 13,000</td></tr> </tbody></table> 

Diedit sesuai impian sobat, jikalau sudah klik publikasikan.

Tambahan Nih 2 style Tabel Spesifikasi Responsif yang jual atau review template. Untuk penerapan sama kaya diatas.

Style 1

CSS

/* Post Table */ .post-body table{width:100%;max-width:auto;border-radius:3px;overflow:hidden} .post-body table td,.post-body table caption{border:0;padding:12px 10px;text-align:left;vertical-align:top;color:#57606f;font-size:.9rem;font-weight:700} .post-body table td:first-child{border-right:0} .post-body table th{background:#4B77BE;color:#fff;border:0;padding:12px 20px;text-align:left;vertical-align:top;font-size:16px;font-weight:700} .post-body table tr th:hover{background:#1F3A93} .post-body table.tr-caption-container{border:0;margin:0} .post-body table caption{border:none;font-style:italic} .post-body td,.post-body th{vertical-align:top;text-align:left;font-size:13px;padding:3px 5px;border:0} .post-body td a{background:#4B77BE;color:#fff;padding:3px 10px;font-size:70%;float:right;display:inline-block;border-radius:3px;text-transform:uppercase} .post-body td a[target="_blank"]:after{margin-left:5px} .post-body table.tr-caption-container td{border:0;padding:0;background:#fff;line-height:17px;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap;font-weight:700;color:#57606f} .post-body table.tr-caption-container,.post-body table.tr-caption-container img,.post-body img{max-width:100%;height:auto} .post-body table tr:nth-of-type(even) td{background-color:#fafafa} .post-body table tr:nth-of-type(odd) td{background-color:#f5f5f5} .post-body table tr td:nth-of-type(even){border-left:1px solid rgba(0,0,0,0.03)} .post-body table tr th:nth-of-type(even){border-left:1px solid rgba(255,255,255,0.03)} .post-body li{list-style-type:square} .post-body td.tr-caption{background:#465158!important;color:#fff!important;font-size:85%;padding:10px!important} .sr {visibility:hidden;width:0;height:0;} .clear{clear:both} html{-webkit-font-smoothing:antialiased} ::selection {background:#f33846;color:#fff;text-shadow:none} .post-body ::selection {background:#f33846;color:#fff} h1.post-title.entry-title,h2.post-title.entry-title{background:#fff;color:#000;padding:0 20px;font-size:1r;margin:20px;height:42px;line-height:42px;letter-spacing:1px;border-radius:3px;text-align:center} .post-body td a{background:#4B77BE;color:#fff;padding:0 12px;font-size:80%;float:right;display:inline-block;border-radius:3px;font-weight:700;text-transform:lowercase} .post-body td a:hover {background:#c4655b;color:#fff;} .post-body td a[target="_blank"]:after {margin-left:12px;} .post-body .addthis_inline_share_toolbox td{background:transparent;border-color:rgba(0,0,0,0.05);margin:0;line-height:normal} .post-body .addthis_inline_share_toolbox table{margin:0 0 10px 0} .post-body .at4-jumboshare .at4-count-container {border-right:1px solid rgba(0,0,0,0.05);} .tab-padding {padding:20px}

HTML

<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody> <tr> <th>Features</th><th>Availability</th></tr> <tr> <td>Responsive</td>             <td>True <a href="http://www.responsinator.com/?url=https%3A%2F%2Findzign.blogspot.com%2F" rel="nofollow noopener" target="_blank">Cek</a></td>         </tr> <tr> <td>Mobile Friendly</td>             <td>True <a href="https://search.google.com/test/mobile-friendly?id=NZfkzdB-SJSm2pp7LlszOw" rel="nofollow noopener" target="_blank">Cek</a></td>         </tr> <tr> <td>Google Testing Tool Validator (Index)</td> <td>True <a href="https://search.google.com/structured-data/testing-tool#url=https%3A%2F%2Findzign.blogspot.com%2F" rel="nofollow noopener" target="_blank">Cek</a></td>  </tr> <tr> <td>Google Testing Tool Validator (Item)</td> <td>True <a href="https://search.google.com/structured-data/testing-tool#url=https%3A%2F%2Findzign.blogspot.com%2F2018%2F08%2Fkenali-karakter-diri-lewat-tulisan.html" rel="nofollow noopener" target="_blank">Cek</a></td>  </tr> <tr> <td>SEO Friendly</td>             <td>True</td>         </tr> <tr> <td>Personal Blog</td>             <td>True</td>         </tr> <tr> <td>2 Column</td>             <td>True</td>         </tr> <tr> <td>Top Navigation</td>             <td>True</td>         </tr> <tr> <td>Breadcrumbs</td>             <td>True</td>         </tr> <tr> <td>2 Option Search Box</td>             <td>True</td>         </tr> <tr> <td>Back to Top Button</td>             <td>True</td>         </tr> <tr> <td>Footer Menu</td>             <td>True</td>         </tr> <tr> <td>ShareThis Share Button</td>             <td>True</td>         </tr> <tr> <td>Featured Recent Post</td>             <td>Pro Version</td>         </tr> <tr> <td>2 Option Comment System</td>             <td>Pro Version</td>         </tr> <tr> <td>Fast Version</td>             <td>Pro Version</td>         </tr> <tr> <td>Newsletter Widget</td>             <td>Pro Version</td>         </tr> <tr> <td>Related Post</td>             <td>Pro Version</td>         </tr> <tr> <td>Sticky Sidebar</td>             <td>Pro Version</td>         </tr> <tr> <td>Image Lightbox</td>             <td>Pro Version</td>         </tr> <tr> <td>Sitemap Widget</td>             <td>Pro Version</td>         </tr> <tr> <td>Contact Form Widget</td>             <td>Pro Version</td>         </tr> <tr> <td>Fixed Menu on Mobile</td>             <td>Pro Version</td>         </tr> <tr> <td>Shortcodes</td>             <td>Pro Version</td>         </tr> </tbody></table>

Style 2

CSS

/* CSS Post Table */ table{border-collapse:collapse;border-spacing:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;border-left:1px solid #e9e9e9;border-right:1px solid #e9e9e9} .post-body table td{border:1px solid #e9e9e9;border-left:none;padding:10px;text-align:center;vertical-align:top;} .post-body table th {padding:15px 8px!important;text-align:center;vertical-align:top;color:#fff;} .post-body td, .post-body th{vertical-align:top;text-align:left;padding:3px 5px;} .post-body th{background:#fff;font-weight:bold;text-transform:capitalize;font-size:95%;} 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:50%} table.columns-4 td.columns-cell{width:30%} 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-caption-container td {border:none;padding:0 !important;margin:0 !important} .post-body table caption{max-width:100%;height:auto;border:none !important;padding:0 !important} .services_list{text-align:left !important} .services{background:#31333a!important;width:28%;overflow:hidden;text-align:center!important} .free_version,.premi_version,.theme_instal{background:#1dc087;width:22%;overflow:hidden;text-align:center!important} .premi_version{background:#10a15b !important} .free_version{background:#ec472c !important} .post-body i.fa-check,.post-body i.fa-times,.post-body i.fa-minus{height:27px;width:27px;line-height:27px;text-align:center;border-radius:99em;color:#fff} .post-body i.fa-check{background:#10a15b} .post-body i.fa-times{background:#ec472c} .post-body i.fa-minus{background:#ffbd2e} .price_wrap{position:relative;margin:7px auto 0;font-family:'Oswald', Arial;font-weight:normal!important} .price_wrap sup{font-size:15px!important;font-weight:normal!important} .price_wrap .rupiah{font-weight:bold!important;font-size:13px!important} .price_wrap b{font-size:35px} .price_wrap .rupiah{color:#888} /* Button */ a.down_but,span.down_but{text-decoration:none;color:#fff!important;line-height:1.3em!important;} a.down_but .fa,span.down_but .fa{display:block;width:100%;overflow:hidden;position:relative} .down_but{text-decoration:none;color:#fff;display:inline-block;font-size:12.5px;font-weight:normal;padding:8px 5px;text-align:center;margin:2px auto 7px;cursor:pointer;display:block}   .down_but{background:#10a15b;border:1px solid #0a894c;}   a.down_but{background:#ec472c;border:1px solid #c63720;} .down_but i{font-size:25px!important;margin-bottom:3px!important} a.no_but,.no_but{cursor:not-allowed;background:#aaa!important;border-color:#999!important}

HTML

<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody> <tr><th class="services">Notes</th><th class="free_version">Free Version</th><th class="premi_version">Paid Version</th></tr> <tr><td class="services_list">Remove Footer Credits:</td><td><i class="fa fa-times"></i></td><td><i class="fa fa-check fa-6"></i></td></tr> <tr><td class="services_list">No Encrypted Scripts:</td><td><i class="fa fa-check fa-6"></i></td><td><i class="fa fa-check fa-6"></i></td></tr> <tr><td class="services_list">Lifetime Premium Support:</td><td><i class="fa fa-times"></i></td><td><i class="fa fa-check fa-6"></i></td></tr> <tr><td class="services_list">For Unlimited Domains:</td><td><i class="fa fa-check fa-6"></i></td><td><i class="fa fa-check fa-6"></i></td></tr> <tr><td class="services_list">Regular Template Updates:</td><td><i class="fa fa-times"></i></td><td><i class="fa fa-check fa-6"></i></td></tr> <tr><td class="services_list">Get Premium Support:</td><td><i class="fa fa-times"></i></td><td><i class="fa fa-check fa-6"></i></td></tr> <tr><td class="services_list"></td><td><div class="price_wrap" id="buy_premium"> <b><sup>$</sup>0</b><span class="rupiah">/ Rp. 0,-</span>  <br /> <div class="toggle_price"> <span class="down_but" href="http://www.paywithapost.de/pay?id=b1a933be-9182-4f49-b93a-b071b5c9f7c3" rel="nofollow"><i aria-hidden="true" class="fa fa-download"></i> Download Free</span></div> </div> </td><td><div class="price_wrap"> <span class="item_price"><b><sup>$</sup>10</b></span><span class="rupiah">/ Rp. 130.000,-</span>  <br /> <div class="toggle_price"> <span class="down_but"><i aria-hidden="true" class="fa fa-cart-plus"></i> Paid Theme</span></div> </div> </td></tr> </tbody> </table>

Oke sekian yang dapat aku jelaskan tentang Cara Membuat Tabel Spesifikasi Responsif di Blog Terima Kasih yang sduah berkunjung supaya bermanfaat bagi kalian semua.

Bagikan Artikel ini