How to make mobile review website in Blogger with table content

byMd Raju Molla -November 22, 2021

6

mobile review website with table content

How to make mobile review website in Blogger with table content

ব্লগিং করার জন্য অনেক ধরনের নিশ আছে। মোবাইল রিভিউ তাদের মধ্যে অন্যতম। বলতে গেলে মোবাইল রিভিউ নিশ হলো একটা ভাইরাল নিশ। আপনি যদি আপনার সাইটকে খুব কম সময়ে ভাইরাল করতে চান তাহলে আমি বলবো আপনি মোবাইল রিভিউ নিয়ে কাজ করেন। যেকোনো ওয়েবসাইটকে খুব কম সময়ে ভাইরাল করতে চাইলে মোবাইল রিভিউ নিশের বিকল্প নেই।

যেকোনো ব্লগ সাইটকে ফোন রিভিউ সাইটে রুপান্তর করার জন্য আপনাকে সর্বপ্রথমে জানতে হবে একটা মোবাইল রিভিউ সাইটের কনটেন্ট গুলো কি? কি?

সদ্য রেলিজ হওয়া ফোনের রিভিউ
যেকোনো ফোনের ডিজাইন, হার্ডওয়্যার বা সফটওয়্যার নিয়ে আলোচনা
সর্বশেষে সেই ফোন সম্পর্কে আপনার মতামত কি সেটা বলা

আর এই তিনটি বিষয় যে কোনো ওয়েবসাইটে সুন্দর করে প্রেজেন্ট করতে পারলে আপনার সাইটটি রেঙ্ক করা সম্ভব হবে ইনশাআল্লাহ। এছাড়াও একটা ওয়েবসাইট রেঙ্ক করানোর জন্য সবচেয়ে বেশি যেটা প্রয়োজন সেটা হলো ব্যাকলিংক। আপনি যদি না জেনে থাকে কীভাবে ব্যাকলিংক তৈরি করতে হয়? তাহলে আমাদের নিচের গাইডটি দেখে আপনার সাইটের জন্য ব্যাকলিংক তৈরি করে নিতে পারেন।

আরো পড়ুনঃ How to create backlink by Guest Posting?

উপরের তিনটি বিষয় যেকোনো ব্লগার সাইটে বা যেকোনো সাইটে সুন্দর করে প্রেজেন্ট করার জন্য আপনার প্রয়োজন Mobile Specification Table। ব্লগারে এই Mobile Specification Table টি HTML এবং CSS এর মাধ্যমে তৈরি করা হয়। আপনাদের সুবিধার্থে Mobile Specification Table কোড সহ সম্পূর্ণ একটা পোষ্টের টেমপ্লেটের কোড এবং কাস্টোমাইজেশন টিউটোরিয়াল নিচে দেওয়া হলোঃ

<h1 style="display: inline-block; font-size: 30px;"><b>Sony Xperia Pro-I</b></h1>
<div class="all-content">
<div class="mobile-img">
<img src="image url" />
</div>
<div class="mobile-price-text">
<h3 class="mobile-price"><b>Official ৳12000</b></h3> <span style="font-size: 15px;">4/32gb</span>
<p class="price-text"><b>Brand:</b> Vivo<br /><b>Category:</b> Smartphones<br /><b>Last updated:</b> 19th, Oct, 2021</p>
<div class="top-feature">
<h3 style="display: inline-block; font-size: 20px;"><b>Top Feature</b></h3>
<ul>
<li><i class="fas fa-camera"></i> <b>Camera:</b> 13mp 1080p</li>
<li><i class="fas fa-memory"></i> <b>RAM:</b> 2GB RAM Helio P35</li>
<li><i class="fas fa-mobile-alt"></i> <b>Display:</b> 6.51" 720x1600 pixel</li>
<li><i class="fas fa-battery-full"></i> <b>Battery:</b> 13mp 1080p</li>
</ul>
</div>
</div>
</div>

<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"></link>
<h3 style="display: inline-block; font-size: 20px;"><b>Our Rating</b></h3><span style="font-size: 13px;"> (58% out of 100%)</span>
<div class="w3-light-grey w3-round-xlarge" style="border: 0.5px solid rgb(221, 221, 221);">
<div class="w3-container w3-blue w3-round-xlarge" style="width: 70%;">Display 70%</div>
</div>
<div class="w3-light-grey w3-round-xlarge" style="border: 0.5px solid rgb(221, 221, 221);">
<div class="w3-container w3-blue w3-round-xlarge" style="width: 40%;">Design 40%</div>
</div>
<div class="w3-light-grey w3-round-xlarge" style="border: 0.5px solid rgb(221, 221, 221);">
<div class="w3-container w3-blue w3-round-xlarge resbar1" style="width: 30%;">Camera 30%</div>
</div>
<div class="w3-light-grey w3-round-xlarge" style="border: 0.5px solid rgb(221, 221, 221);">
<div class="w3-container w3-blue w3-round-xlarge" style="width: 60%;">Connectivity 60%</div>
</div>
<div class="w3-light-grey w3-round-xlarge" style="border: 0.5px solid rgb(221, 221, 221);">
<div class="w3-container w3-blue w3-round-xlarge" style="width: 70%;">Features 70%</div>
</div>
<div class="w3-light-grey w3-round-xlarge" style="border: 0.5px solid rgb(221, 221, 221);">
<div class="w3-container w3-blue w3-round-xlarge resbar2" style="width: 20%;">Performance 20%</div>
</div>
<div class="w3-light-grey w3-round-xlarge" style="border: 0.5px solid rgb(221, 221, 221);">
<div class="w3-container w3-blue w3-round-xlarge" style="width: 70%;">Battery 70%</div>
</div>
<div class="w3-light-grey w3-round-xlarge" style="border: 0.5px solid rgb(221, 221, 221);">
<div class="w3-container w3-blue w3-round-xlarge" style="width: 90%;">Usability 90%</div>
</div>

<h1 style="border-top: 0.5px dotted rgb(127, 140, 141); font-size: 20px; margin-top: 20px; padding-top: 5px;"><b>Launch</b></h1>
<div class="container table-responsive py-5">
<table class="table table-bordered table-hover">
<tbody>
<tr>
<th scope="row">Announced</th>
<td>2021, October</td>
</tr>
<tr>
<th scope="row">Status</th>
<td>Available. Released 2021, October 18</td>
</tr>
</tbody>
</table>
<h1 style="border-top: 0.5px dotted rgb(127, 140, 141); font-size: 20px; margin-top: 20px; padding-top: 5px;"><b>Network</b></h1>
<div class="container table-responsive py-5">
<table class="table table-bordered table-hover">
<tbody>
<tr>
<th scope="row">Technology</th>
<td>GSM / CDMA / HSPA / LTE</td>
</tr>
<tr>
<th scope="row">2G bands</th>
<td>GSM 850 / 900 / 1800 / 1900 - SIM 1 & SIM 2
CDMA 800 & TD-SCDMA</td>
</tr>
<tr>
<th scope="row">3G bands</th>
<td>HSDPA 850 / 900 / 2100</td>
</tr>
<tr>
<th scope="row">4G bands</th>
<td>1, 3, 5, 8, 34, 38, 39, 40, 41</td>
</tr>
<tr>
<th scope="row">Speed</th>
<td>ehfewfkjfhejfkrjekr</td>
</tr>
<tr>
<th scope="row">GPRS</th>
<td>❌</td>
</tr>
<tr>
<th scope="row">EDGE</th>
<td>✅</td>
</tr>
</tbody>
</table>
<h1 style="border-top: 0.5px dotted rgb(127, 140, 141); font-size: 20px; margin-top: 20px; padding-top: 5px;"><b>Body</b></h1>
<div class="container table-responsive py-5">
<table class="table table-bordered table-hover">
<tbody>
<tr>
<th scope="row">Dimensions</th>
<td>164.4 x 76.3 x 8.4 mm (6.47 x 3.00 x 0.33 in)</td>
</tr>
<tr>
<th scope="row">Weight</th>
<td>190 g (6.70 oz)</td>
</tr>
<tr>
<th scope="row">Build</th>
<td>Glass front, plastic back, plastic frame</td>
</tr>
<tr>
<th scope="row">SIM</th>
<td>Dual SIM (Nano-SIM, dual stand-by)</td>
</tr>
</tbody>
</table>
<h1 style="border-top: 0.5px dotted rgb(127, 140, 141); font-size: 20px; margin-top: 20px; padding-top: 5px;"><b>Display</b></h1>
<div class="container table-responsive py-5">
<table class="table table-bordered table-hover">
<tbody>
<tr>
<th scope="row">Type</th>
<td>IPS LCD capacitive touchscreen, 16M colors</td>
</tr>
<tr>
<th scope="row">Size</th>
<td>6.51 inches, 102.3 cm2 (~81.6% screen-to-body ratio)</td>
</tr>
<tr>
<th scope="row">Resolution</th>
<td>720 x 1600 pixels, 20:9 ratio (~270 ppi density)</td>
</tr>
<tr>
<th scope="row">Multitouch</th>
<td>Dual SIM (Nano-SIM, dual stand-by)</td>
</tr>
</tbody>
</table>
<h1 style="border-top: 0.5px dotted rgb(127, 140, 141); font-size: 20px; margin-top: 20px; padding-top: 5px;"><b>Platform</b></h1>
<div class="container table-responsive py-5">
<table class="table table-bordered table-hover">
<tbody>
<tr>
<th scope="row">OS</th>
<td>Android 11 (Go edition), Funtouch 11</td>
</tr>
<tr>
<th scope="row">Chipset</th>
<td>Mediatek MT6765 Helio P35 (12nm)</td>
</tr>
<tr>
<th scope="row">CPU</th>
<td>Octa-core (4x2.3 GHz Cortex-A53 & 4x1.8 GHz Cortex-A53)</td>
</tr>
<tr>
<th scope="row">GPU</th>
<td>PowerVR GE8320</td>
</tr>
</tbody>
</table>
<h1 style="border-top: 0.5px dotted rgb(127, 140, 141); font-size: 20px; margin-top: 20px; padding-top: 5px;"><b>Memory</b></h1>
<div class="container table-responsive py-5">
<table class="table table-bordered table-hover">
<tbody>
<tr>
<th scope="row">Card slot</th>
<td>microSDXC (dedicated slot)</td>
</tr>
<tr>
<th scope="row">Internal (ROM)</th>
<td>32 GB eMMC 5.1</td>
</tr>
<tr>
<th scope="row">RAM</th>
<td>O2 GB</td>
</tr>
</tbody>
</table>
<h1 style="border-top: 0.5px dotted rgb(127, 140, 141); font-size: 20px; margin-top: 20px; padding-top: 5px;"><b>Camera</b></h1>
<div class="container table-responsive py-5">
<table class="table table-bordered table-hover">
<tbody>
<tr>
<th scope="row">Primary camera</th>
<td>13 MP, f/2.2, 27mm (wide), AF</td>
</tr>
<tr>
<th scope="row">Secondary camera</th>
<td>5 MP, f/1.8</td>
</tr>
<tr>
<th scope="row">Features</th>
<td>LED flash, HDR, panorama</td>
</tr>
<tr>
<th scope="row">Video</th>
<td>1080p@30fps</td>
</tr>
</tbody>
</table>
<h1 style="border-top: 0.5px dotted rgb(127, 140, 141); font-size: 20px; margin-top: 20px; padding-top: 5px;"><b>Sound</b></h1>
<div class="container table-responsive py-5">
<table class="table table-bordered table-hover">
<tbody>
<tr>
<th scope="row">Alert types</th>
<td>Vibration, MP3, WAV ringtones</td>
</tr>
<tr>
<th scope="row">Loudspeaker</th>
<td>Yes</td>
</tr>
<tr>
<th scope="row">3.5mm jack</th>
<td>Yes</td>
</tr>
</tbody>
</table>
<h1 style="border-top: 0.5px dotted rgb(127, 140, 141); font-size: 20px; margin-top: 20px; padding-top: 5px;"><b>Connectivity</b></h1>
<div class="container table-responsive py-5">
<table class="table table-bordered table-hover">
<tbody>
<tr>
<th scope="row">WLAN</th>
<td>Wi-Fi 802.11 b/g/n, Wi-Fi Direct, hotspot</td>
</tr>
<tr>
<th scope="row">Bluetooth</th>
<td>5.0, A2DP, LE</td>
</tr>
<tr>
<th scope="row">GPS</th>
<td>Yes, with A-GPS, GLONASS, GALILEO, BDS</td>
</tr>
<tr>
<th scope="row">NFC</th>
<td>❌</td>
</tr>
<tr>
<th scope="row">FM radio</th>
<td>✅</td>
</tr>
<tr>
<th scope="row">USB</th>
<td>microUSB 2.0, USB On-The-Go</td>
</tr>
<tr>
<th scope="row">Infrared port</th>
<td>❌</td>
</tr>
</tbody>
</table>
<h1 style="border-top: 0.5px dotted rgb(127, 140, 141); font-size: 20px; margin-top: 20px; padding-top: 5px;"><b>Features</b></h1>
<div class="container table-responsive py-5">
<table class="table table-bordered table-hover">
<tbody>
<tr>
<th scope="row">Sensors</th>
<td>Accelerometer, proximity, compass</td>
</tr>
<tr>
<th scope="row">Messaging</th>
<td>SMS(threaded view), MMS, Email, IM</td>
</tr>
<tr>
<th scope="row">Browser</th>
<td>HTML5</td>
</tr>
<tr>
<th scope="row">Java</th>
<td>❌</td>
</tr>
</tbody>
</table>
<h1 style="border-top: 0.5px dotted rgb(127, 140, 141); font-size: 20px; margin-top: 20px; padding-top: 5px;"><b>Battery</b></h1>
<div class="container table-responsive py-5">
<table class="table table-bordered table-hover">
<tbody>
<tr>
<th scope="row">Battery type</th>
<td>Non-removable Li-Po</td>
</tr>
<tr>
<th scope="row">Battery capacity</th>
<td>5000 mAh</td>
</tr>
<tr>
<th scope="row">Charging</th>
<td>Charging 10W and Reverse charging 5W</td>
</tr>
</tbody>
</table>
<h1 style="border-top: 0.5px dotted rgb(127, 140, 141); font-size: 20px; margin-top: 20px; padding-top: 5px;"><b>More</b></h1>
<div class="container table-responsive py-5">
<table class="table table-bordered table-hover">
<tbody>
<tr>
<th scope="row">Made by</th>
<td>China</td>
</tr>
<tr>
<th scope="row">Color</th>
<td>Starry Blue, Pearl White, Mint Green</td>
</tr>
</tbody>
</table>
<h1 style="border-top: 0.5px dotted rgb(127, 140, 141); font-size: 20px; margin-top: 20px; padding-top: 5px;"><b>Your Mobile Name</b></h1>

<iframe class="BLOG_video_class" allowfullscreen="" youtube-src-id="N8hR2BVTPNk" width="320" height="266" src="https://www.youtube.com/embed/videocode"></iframe>

<br />
<p style="text-align: justify;">short review
</p>
<h1 style="font-size: 20px; margin-top: 20px; padding-top: 5px;"><b>Phone Name</b></h1>
<p style="text-align: justify;">medium review
</p>
<h1 style="font-size: 20px; margin-top: 20px; padding-top: 5px;"><b>Your FAQs about Phone Name Review Year</b></h1>
<p style="text-align: justify;">Which question you will have about this phone. Let’s justify these. There we are including the major question and answers about this phone. So, let’s start now....
<br /><br /><b>Question 1: </b>
<br /> <span>    </span>Answer: It will launch in October 2021.

<br /><b>Question 2: </b>
<br /> <span>    </span>Answer:
<br /><b>Question 3: </b>
<br /> <span>    </span>Answer:
</p>
<h1 style="font-size: 20px; margin-top: 20px; padding-top: 5px;"><b>Our Decision about Phone Name</b></h1>
<p style="text-align: justify;">Your Decision
</p>
<br />
<p>If you have any question or want to give a feedback about <b>Phone Name</b>, leave a comment. Thanks for connecting with us.</p>


<style>
.all-content{
min-height:400px;
margin-bottom:10px;
}
.all-content .mobile-img img{
float:left;
width:50%;
padding:10px;
border:.5px solid rgba(149, 165, 166,.3);
}
.all-content .mobile-price-text{
float:right;
width:50%;
padding:10px;
margin-top:15px;
}
.mobile-price{
font-size:20px;
display:inline-block;
color:black;
}
.top-feature ul li{
font-size:15px;
list-style-type:none;
}
.top-feature ul li i{
background-color:#8e44ad;
color:#fff;
font-size:13px;
padding:5px;
border-radius:7px;
}
.post-body th{
background:rgba(189, 195, 199,.3);
}
.post-body th:hover{
background:rgba(189, 195, 199,.7);}
@media (max-width: 661px){
.all-content .mobile-img img{
width:100%;
}
.all-content .mobile-price-text{
width:100%;
}
@media (max-width: 794px){
.resbar2{
font-size:10px;
}
@media (max-width: 450px){
.resbar1{
font-size:10px;
}
.resbar2{
font-size:5px;
}
}
</style>
</div></div></div></div></div></div></div></div></div></div></div></div>

আপনি যদি কপি করতে সক্ষম না হন তাহলে এখান থেকে ডাউনলো করে নিতে পারেন ঃ Download Code

How to Customize this Phone Specification Table

আশা করি এখন আপনি আপনার ব্লগ সাইটকে একটা মোবাইল রিভিউ সাইটে রূপান্তর করতে সক্ষম হয়েছেন। যদি কোনো সমস্যা হয় তাহলে নির্দিধায় আপনার সমস্যা উল্লেখ পূর্বক একটা কমেন্ট করুন। আমরা যত দ্রুত সম্ভব আপনার সমস্যার সমাধান দেওয়ার চেষ্টা করবো। এতক্ষন সঙ্গে থাকার জন্য ধন্যবাদ।