Hello Blogger user, in this tutorial I will share with you all How to Add Pros And Cons in Blogger. Installing Pros And Cons Table on your website will look more professional, plus it can also serve as an assessment of the views.
What is the Pros And Cons Table?
A Pros and Cons Table gives a quick summary view of the advantages and disadvantages of a product. It is especially useful in review posts where you are giving your opinion on any product or service. You can see many popular review blogs like 10beasts.com use these tables to give you a quick summary of products.
Let's See How to make it.
Adding CSS Code- Go to blogger
- Go to Theme option
- Click on Edit HTML
- Now copy the code and paste the code above the ]]></b: skin>
.pros-cons-container {
font-family: "Roboto", sans-serif;
display: flex;
max-width: 700px;
margin: 32px auto;
box-shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.4);
}
.pros-cons-container .heading {
font-size: 20px;
text-align: center;
color: #fff;
margin: 0;
padding: 16px 24px;
}
.pros-cons-container .pros-container .heading {
background: #02c39a;
}
.pros-cons-container .cons-container .heading {
background: #e63946;
}
.pros-cons-container .pros-container ul li::before {
content: "\f00c";
font-family: "Font Awesome 5 Free";
font-weight: bold;
padding-right: 16px;
color: #02c39a;
display: block;
}
.pros-cons-container .cons-container ul li::before {
content: "\f00d";
font-family: "Font Awesome 5 Free";
font-weight: bold;
padding-right: 16px;
color: #e63946;
display: block;
}
.pros-cons-container .pros-container,
.pros-cons-container .cons-container {
flex: 1;
}
.pros-cons-container .pros {
border-right: 1px solid #eee;
}
.pros-cons-container ul {
padding: 8px 0;
list-style: none;
margin: 0;
}
.pros-cons-container ul li {
padding: 16px 32px;
font-size: 16px;
line-height: 2;
display: flex;
}
@media (max-width: 530px) {
.pros-cons-container {
flex-direction: column;
}
.pros-cons-container ul li:nth-of-type(2n) {
background: #eee;
}
}
- Now save the theme
- Now make the post/page and paste the code
<body>
<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"
/>
<div class="pros-cons-container">
<div class="pros-container">
<h2 class="heading">Pros</h2>
<ul class="pros">
<li>Amazing Performance</li>
<li>Free For 1 Month</li>
<li>Unlimited Storage Space</li>
<li>Email Support</li>
<li>Additional Add-ons</li>
</ul>
</div>
<div class="cons-container">
<h2 class="heading">Cons</h2>
<ul class="cons">
<li>No Phone Support</li>
<li>Complicated UI</li>
<li>No SSDs</li>
</ul>
</div>
</div>
</body>
Demo of Pros And Cons.
Pros
- Amazing Performance
- Free For 1 Month
- Unlimited Storage Space
- Email Support
- Additional Add-ons
Cons
- No Phone Support
- Complicated UI
- No SSDs