How To Create Phone Specification Table for Mobile Review Site?
There is most demandable niche in Blogging is the Phone review site. You can make your Blog site popular within the shortest period of time by providing a phone review. But most of the newbie blogger doesn’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 a 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 A phone review site can create. Because creating a Smartphone Specification table is a bit hard to create on the Blogger platform. As a result, most Blogger switch to WordPress platform and spend a big amount of money on Domain and Hosting.
How To Create Beautiful Mobile Specification Table For Blogger Blog?
The Blogger platform has improved a lot. So many things have updated recently. Now it supports the Smartphone Specification table. But you have to add the code manually. To add the Smartphone Specification the table just follow the below steps-
Step 1: Go to https://www.blogger.com and Sign in to your accountStep 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 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:#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 colour please alter #059FD8 with a different colour code.
- To change the Table header font colour please alters #181818 with a different colour code.
- To change the table border thickness and colour please alter 1px solid #F1F1F1; with different code.
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 the Post editor switch to HTML view. Now paste the below script for adding a 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 & 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>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>
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 the below link
I hope you are now able to create your Smartphone review Blog successfully.
If you face any trouble implementing the code then feel free to leave a comment below. And let me know what do you think about this tutorial? Thank you.
62 comments
^_^
http://www.bloggerspice.com/p/html-editor.html
This table is 100% mobile responsive. You can test this post on a responsive testing tool and you would see the table will adjust the smart device.
I have used all percentage so table width and height is automatically adjustable. ^_^
Is the template code structure supposed to be like that in the screenshot or something else? Please if possible, kindly mail me the post template code of this particular template on my email mungerald@gmail.com. Thank you!
you have to add the table code in HTML view not in Compose view and publish your Post. That’s it. You can now see Smartphone specification within a beautiful table. If you add code in Compose or writing panel then it will display plain HTML.
^_^
I think your Blogger template already have custom script for table. First you have to remove the previous script and after that add my script. You will find table script like below--
<table>
<tbody>
<tr><th></th></tr>
</tbody>
</table>
and for make the table script work always paste the table script in "HTML" View. :up
You're the best, i Used your table Code on my Blog http://www.dingdroid.in/
thanks for this
Blue color code #059FD8 just replace this color code by below code.
Orange Color Code #FF7F00
Thank you. :-bd
To make the table script work always paste the table script in "HTML" View from Blogger post editor. This is working 100%.
Its actually Amazing for blogspot blog, I was in search of this for a while and thanks to Bloggerspice I finally got it, Working perfectly..
Thanks for your comment. I hope it will help to create your Phone specification Blog in Blogger platform.
Thanks once more again.
Am really your blog fan intisipeting and surfing this blog for cool blogger widgets. Commenting From Virgintech
http://pinoytut.blogspot.com/2017/09/huawei-mate-10-pro.html
WOW! Its looking good. :)
Yes you can. This is very simple step. Just look at the script.. for 1 row and column the script is like below:
<tbody>
<tr><th colspan="2" scope="col" style="text-align: center;"><span style="font-size: large;">
Samsung Galaxy Phone Specification</span></th></tr>
</tbody>
For creating 2 column and 1 row the script is like below
<tbody>
<tr><td>Network</td><td>GSM / HSPA / LTE</td></tr>
</tbody>
I hope now it is clear to you. :up
also to add code more code like:
WIRELESS COMM then below it leave 6 column
OTHER FEATURES then below it leave 6 colunm
Post template will help to get ride from copying the script every time while you make post. Simple you can add the CSS script in your WordPress CSS section. And HTML script in your post editor but in HTML view. It will work 100%.
This is very easy to show icons beside of text. Just add FontAwesome code before the text in HTML view. And publish it to see icons. That's it.
But how to create an compare product..??
For comparison you need to modify the table. Please look at the code carefully.
To get details tutorial you can visit my another tutorial from below URL
https://www.bloggerspice.com/2015/01/Create-multicolored-table-In-Blogger-blog-post-using-HTML.html
Thank you.
I really appreciate you provide best content and helping needy persons. your site just amazing and you're doing hard work.
https://jobquizinfopk.blogspot.com
However, be cautious about the Google penalty. Don't leave your Blog URL in the comment section without any reason. Your site's SPAM score will increase and Google will remove your blog posts from the search engine.
https://www.bloggerspice.com/p/html-editor.html
Thank you.
فقد اعجبني
اريد منك خدمة هل اعطيتني قالب مدونتك هذا فقد اعجبني كثيرا
its help me lot!