Creating a phone review site on a Blogger platform is simpler than you might think. You mainly need three things:
Latest Phone Release Information: Keep your readers updated on the latest phone releases.
Discuss Phone Design, Display, and Hardware: Provide insights into the design, display quality, and hardware features of the phones you review.
Smartphone Specification Table: This is crucial. You'll need a table to neatly display smartphone specifications. Many bloggers believe this is difficult to achieve on Blogger, so they opt for WordPress instead, investing in domain and hosting.
However, with some simple tricks, you can easily convert your Blogger site into a phone review platform without the need for expensive hosting or a domain.
How To Create a Beautiful Mobile Specification Table For Blogger Blog Post?
The Blogger platform has seen significant improvements lately, including support for Smartphone Specification tables. However, to add these tables, you'll need to manually insert the code. Here's how to do it:
Step 1: Go to https://www.blogger.com and Sign in to your account
Step 2: From Blogger Dashboard click on > Theme > Edit HTML
Step 3: And locate the ]]></b:skin> by pressing Ctrl+F (Windows) or CMD+F (Mac)
Step 4: Finally copy the following line of table script and paste it before/above ]]></b:skin>
/* Phone Specification Table by www.bloggerspice.com */ .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:#426694; color:#ffffff;} .post-body th:hover{background:#1f2024;} .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;} |
Customization
To change the Table header color please alter #059FD8 with a different color code.
To change the Table header font color please alter #181818 with a different color code.
To change the table border thickness and color please alter 1px solid #F1F1F1; with a different code.
Step 5: Now save your theme
We've designed a table to display phone specifications using the provided CSS code. Now, let's create the structure of the table. You'll need to use this code each time you want to make a table displaying phone specifications in a post.
Step 6: Create a new post from the post editor and switch to HTML view. Now Please paste the script below to add a table frame..
<body><div class="container my-5"><div class="table-responsive"><table class="table table-bordered"><tbody><body><div class="container my-5"><h1 class="text-center mb-4">SPECIFICATION</h1><div class="table-responsive"><table class="table table-bordered"><tbody><table class="full"><tr><th colspan="2" scope="col" style="text-align:center"><span style="font-size:large">PRICE (Approx.)</span></th></tr><tr><td>US Dollar</td><td>$199</td></tr><tr><td>Bangladeshi Taka</td><td>BDT 17,999</td></tr><tr><td>Indian Rupees</td><td>Rs. 13,999</td></tr><tr><th colspan="2" scope="col" style="text-align:center"><span style="font-size:large">LAUNCH</span></th></tr><tr><td>Announced</td><td>2022, February 24</td></tr><tr><td>Status</td><td>Available. Released 2022, March 03</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>164.1 x 75.5 x 8.5 mm (6.46 x 2.97 x 0.33 in)</td></tr><tr><td>Weight</td><td>194 g (6.84 oz)</td></tr><tr><td>Build</td><td>Glass front, plastic frame, plastic back</td></tr><tr><td>SIM</td><td>Dual SIM (Nano-SIM, dual stand-by)</td></tr><tr><td>Colors</td><td>Speed Blue, Speed Black</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>IPS LCD, 120Hz</td></tr><tr><td>Size</td><td>6.6 inches, 104.8 cm2 (~84.6% screen-to-body ratio)</td></tr><tr><td>Resolution</td><td>1080 x 2412 pixels, 20:9 ratio (~400 ppi density)</td></tr><tr><td>Protection</td><td>Unspecified</td></tr><tr><td>Sensors</td><td>Fingerprint (side-mounted), accelerometer, gyro, proximity, compass</td></tr><tr><th colspan="2" scope="col" style="text-align:center"><span style="font-size:large">HARDWARE</span></th></tr><tr><td>OS</td><td>Android 11, Realme UI 2.0</td></tr><tr><td>Chipset</td><td>Mediatek MT6781 Helio G96 (12 nm)</td></tr><tr><td>CPU</td><td>Octa-core (2x2.05 GHz Cortex-A76 & 6x2.0 GHz Cortex-A55)</td></tr><tr><td>GPU</td><td>Mali-G57 MC2</td></tr><tr><th colspan="2" scope="col" style="text-align:center"><span style="font-size:large">NETWORK</span></th></tr><tr><td>Technology</td><td>GSM / HSPA / LTE</td></tr><tr><td>2G bands</td><td>GSM 850 / 900 / 1800 / 1900 - SIM 1 & SIM 2</td></tr><tr><td>3G bands</td><td>HSDPA 850 / 900 / 1900 / 2100</td></tr><tr><td>4G bands</td><td>1, 3, 5, 8, 38, 40, 41</td></tr><tr><td>Speed</td><td>HSPA, LTE</td></tr><tr><th colspan="2" scope="col" style="text-align:center"><span style="font-size:large">MAIN CAMERA</span></th></tr><tr><td>Triple</td><td>50 MP, f/1.8, 26mm (wide), 1/2.76", 0.64µm, PDAF 2 MP, f/2.4, (macro) 2 MP, f/2.4, (depth)</td></tr><tr><td>Features</td><td>LED flash, HDR, panorama</td></tr><tr><td>Video</td><td>1080p@30/120fps</td></tr><tr><th colspan="2" scope="col" style="text-align:center"><span style="font-size:large">SELFIE CAMERA</span></th></tr><tr><td>Single</td><td>16 MP, f/2.1, (wide), 1/3.0", 1.0µm</td></tr><tr><td>Features</td><td>Panorama</td></tr><tr><td>Video</td><td>1080p@30fps</td></tr><tr><th colspan="2" scope="col" style="text-align:center"><span style="font-size:large">MEMORY</span></th></tr><tr><td>Card slot</td><td>microSDXC (dedicated slot)</td></tr><tr><td>Internal</td><td>64GB 4GB RAM, 128GB 4GB RAM, 128GB 6GB RAM UFS 2.1</td></tr><tr><th colspan="2" scope="col" style="text-align:center"><span style="font-size:large">COMMUNICATIONS</span></th></tr><tr><td>WLAN</td><td>Wi-Fi 802.11 a/b/g/n/ac, dual-band</td></tr><tr><td>Bluetooth</td><td>5.1, A2DP, LE</td></tr><tr><td>Positioning</td><td>GPS, GLONASS, GALILEO, BDS</td></tr><tr><td>NFC</td><td>No</td></tr><tr><td>Radio</td><td>No</td></tr><tr><td>USB</td><td>USB Type-C 2.0, OTG</td></tr><tr><th colspan="2" scope="col" style="text-align:center"><span style="font-size:large">SOUND</span></th><tr><td>Loudspeaker</td><td>Yes</td></tr><tr><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</span></th></tr><tr><td>Type</td><td>5000 mAh, non-removable</td></tr><tr><td>Charging</td><td>33W wired</td></tr></tbody></table></tbody></table></div> |
Step 7: After that switch to Compose View and publish your Post. That’s it. You can now see Smartphone specifications within a beautiful table. Feel free to utilize our HTML Editor to modify and update the code as needed.
No comments: