How to add a pros and cons table in Blogger? [Responsive]
If you want to add a Pros and Cons HTML table to your Blogger website then this article is for you.
Here I have shown how to add a beautifully designed pro and cons table for Blogger.
You can also use the same table for product comparison and other purposes. So, here we use only HTML and CSS to create the HTML table. I have used the media query to make the Table responsive on mobile, tablet, and desktop devices.
So, let’s learn how to use it on your blogger website.
How to add the Pros and Cons table in Blogger?
STEP-1: To add the Pros and Cons table Go to Blogger dashboard > New post and switch to HTML view.
STEP-2: Now copy the below HTML code, change the table data, and paste it into the blog post.
<div class="K2-pros-cons">
<div class="pros-container">
<h2 class="heading">Pros</h2>
<ul class="pros">
<li>Free Productivity Apps</li>
<li>Better performance</li>
<li>Simple UI</li>
<li>Better security</li>
<li>Integrated Ecosystem</li>
</ul>
</div>
<div class="cons-container">
<h2 class="heading">Cons</h2>
<ul class="cons">
<li>Restricted Availability of Apps</li>
<li>Very Expensive</li>
<li>Not for gamers</li>
</ul>
</div>
</div>STEP-3: Now copy the Below CSS code and paste it below the first code.
.K2-pros-cons {
font-family: "System-ui", sans-serif;
display: flex;
max-width: 700px;
margin: 32px auto;
box-shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.4);
}
.K2-pros-cons .heading {
font-size: 20px;
text-align: center;
color: #fff;
margin: 0;
padding: 16px 24px;
}
.K2-pros-cons .pros-container .heading {
background: #02c39a;
}
.K2-pros-cons .cons-container .heading {
background: #e63946;
}
.K2-pros-cons .pros-container ul li::before {
content: "f00c";
font-family: "Font Awesome 5 Free";
font-weight: bold;
padding-right: 16px;
color: #02c39a;
display: block;
}
.K2-pros-cons .cons-container ul li::before {
content: "f00d";
font-family: "Font Awesome 5 Free";
font-weight: bold;
padding-right: 16px;
color: #e63946;
display: block;
}
.K2-pros-cons .pros-container,
.K2-pros-cons .cons-container {
flex: 1;
}
.K2-pros-cons .pros {
border-right: 1px solid #eee;
}
.K2-pros-cons ul {
padding: 8px 0;
list-style: none;
margin: 0;
}
.K2-pros-cons ul li {
padding: 16px 32px;
font-size: 16px;
line-height: 2;
display: flex;
}
@media (max-width: 530px) {
.K2-pros-cons {
flex-direction: column;
}
.K2-pros-cons ul li:nth-of-type(2n) {
background: #eee;
}
}STEP-4: Now add a <style> tag above and below the CSS code as shown in the video.
Now publish the Blog post and the pros and cons table is added to your Blogger website.
Video Guide:
If the font-awesome stylesheet is not added to your theme then you can add the below code just below the <head> tag in the theme editor. Or paste this code directly in the post editor.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
Here in this HTML table, I have used my theme font which is Raleway and you can change the font style according to your own. You just need to change the font family name in the CSS code.
You can also change the heading color used in the pros and cons by changing the Hex code (Highlighted in CSS code). Watch the video to learn how to do that.
If you want to find HTML color code (hex code) you can use a chrome extension like Color Zilla or use a website called HTMLColor Codes.
Note: If you want to add this table to multiple blog posts then you can paste the CSS code directly in the theme editor instead of pasting it in every blog post.
You can also change the font awesome icon in the pros and cons table by changing the CSS code as shown in the video. Just change the Unicode of font-awesome icons. I will leave the codes in the code file given below.
If you have any doubt regarding this pros and cons table in Blogger, feel free to ask me in the comment section. Also, share your doubts, so that I can cover this in future tutorials.
Don’t forget to subscribe to our YouTube Channel for more awesome Blogger tutorials.
I Have a question, what is forwarding in goddady DNS section, should i have to apply it or just leave it as it. please reply
If your domain is not redirecting from Non-WWW to WWW then you can use this forwarding feature in GoDaddy. It will work as a 301 redirect (permanent)
sir, is layout customisation available on this median ui blogger template, paid version
Yes, Most of the functions are customizable within the blogger layout except advanced header, Adsense integration and there is no shortcodes support. You have to add blog posts functionality using predefined class.
You can join our Telegram discussion Group here.