How To Create Phone Specification Table for Mobile Review Site?

Smartphone specification table

There are most demandable niche in Blogging is Phone review site. You can make your Blog site popular within shortest period of time by providing phone review. But most of the newbie blogger don’t get any suitable Blogger template for creating a Phone review site.

There are very simple tricks that you can apply to convert your Blog site into Phone review site. First of all we should know what is requiring for creating a phone review site?
  • Latest Phone release information
  • Talk about phone design, display and hardware
  • And finally we need a Smartphone Specification table.

That’s it. But the main important component is Smartphone Specification table. Most of the newbie don’t believe that in Blogger platform Phone review site can create. Because creating a Smartphone Specification table is bit hard to create on Blogger platform. As a result most of the Blogger switch to WordPress platform and spend big amount of money on Domain and Hosting.

But luckily Blogger support Smartphone Specification table. But you have to add the code manually. To add the Smartphone Specification table just follow the below steps-

Step 1 Go to https://www.blogger.com and Sign in to your account
Step 2 From Blogger Dashboard click on ->Template ->Edit HTML 
Step 3 And locate the]]></b:skin> by pressing Ctrl+F (Windows) or CMD+F (Mac)
Step 4 Finally copy following line of table script and paste it before/above]]></b:skin>

/* Post 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:#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;}

Customization

  • To change the Table header color please alter #059FD8 with different color code.
  • To change the Table header font color please alters #181818 with different color code.
  • To change the table border thickness and color please alter 1px solid #F1F1F1; with different code.
Note that those who are using my designed template then you don’t need to add this above table code. Because I have already added the specification table script in my all latest templates.

Step 5 Now save your template

The above CSS code has added for designing the Phone specification table. Now this time we will add the table structure code. And this code you have to use every time while creating a phone specification data table in post.

Step 6 Create a New post from and from Post editor switch to HTMLview. Now paste the below script for adding table frame.

<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 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>[email protected]</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>


Step 7 After that switch to Compose view and publish your Post. That’s it. You can now see Smartphone specification within a beautiful table.
Samsung Galaxy Phone Specification
NetworkGSM / HSPA / LTE
2G bandsGSM 850 / 900 / 1800 / 1900 - SIM 1 & SIM 2
3G bandsHSDPA 850 / 900 / 1900 / 2100
4G bandsLTE band 1(2100), 3(1800), 7(2600), 38(2600), 39(1900), 40(2300), 41(2500) - SM-J7008
SpeedHSPA 21.1/5.76 Mbps
GPRSYes
EDGEYes
OS And Hardware
OSAndroid OS, v5.1.1 (Lollipop) || Custom UI
ProcessorQuad-core 1.5 GHz Cortex-A53
ChipsetQualcomm MSM8916 Snapdragon 410
GPUAdreno 306
Body
Dimensions134.5 x 65.2 x 7.3 mm (5.30 x 2.57 x 0.29 in)
Weight132 g (4.66 oz)
ColorsWhite, Black, Gold
Display
TypeSuper AMOLED capacitive touchscreen, 16M colors
Screen Size4.7 inches (~69.4% screen-to-body ratio)
Resolution720 x 1280 pixels (~312 ppi pixel density)
MultitouchYes
ProtectionCorning Gorilla Glass 4
SensorsAccelerometer, Proximity, Compass
Memory
Card slotmicroSD, up to 128 GB
Internal16 GB
RAM1.5 GB
Camera
Primary13 MP, 4128 x 3096 pixels, autofocus, LED flash
FeaturesGeo-tagging, touch focus, face detection, panorama
Video[email protected]
Secondary5 MP
Multimedia
Music playYes
RadioFM Radio
GamesYes
Alert typesVibration; MP3, WAV ringtones
LoudspeakerYes
3.5mm jackYes
Battery and Power
TypeRemovable Li-Ion 3000 mAh battery
Stand-by42 Hours
Talk time12 Hours
Releasing Date
Announced2015, December
StatusReleasing on 2015, December
Expected Price
US Dollor$200
Bangladeshi TakaBDT15,000
Indian Rs.Rs. 13,000


You can see the above Demo. However the code is bit messy. You can use my HTML Editor to edit the code and change the data.

How to Add Phone specification code automatically on Blog Post?

However you may think manually adding table code is irritating. But Blogger has a smart feature where we can set the Table frame code permanently, but you can change the code later. The feature is called Post Template. So we will set the table frame code as Post Template. To add the code on Blogger Post Template you can follow my another tutorial by visiting below link


I hope you are now able to create your Smartphone review Blog successfully. If you face any trouble to implement the code then feel free to leave a comment below. And let me know what do you think about this tutorial? Thank you. 

0 nhận xét