The pros and cons table gives a quick summary view of the advantages and disadvantages of a product. This is especially useful in review posts where you are giving your opinion on a product or service.
You can see many popular review blogs that use Pros and Cons tables to give you a quick summary of products or services. It not only serves to explain the content well but also helps in explaining the details of the post to the reader.
If you also want to add the Pros & Cons Table to your blog. So this article will help you a lot because today I will teach you how you can add the Pros & Cons Table to your blogger post. That too by following easy steps.
How To Add Responsive Pros And Cons Table In Blogger Post
- Login to your blogger blog Dashboard.
- Then go to Theme >> Edit HTML.
- Click anywhere inside the code area and press Ctrl + F keys to open the search box.
- Now, Search for <head> tag and paste below code just after of this tag.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" crossorigin="anonymous"/>
- Now, Search for ]]></b:skin> Or </style> tag and paste below code just above of this tag.
/*== Pros And Cons Table By WEBGURU.MOBICOMPTECH.COM ==*/.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;}}- Click Save Theme.
- Open Blogger Dashboard And Open The Post In Which You Want To Add Pros And Cons Table.
- Now Go To HTML >> And in the post where you want to add Pros And Cons Table, paste the code below.
<div class="pros-cons-container"> <div class="pros-container"> <h2 class="heading">Pros</h2> <ul class="pros"> <li>Pros Text</li> <li>Pros Text</li> <li>Pros Text</li> </ul> </div> <div class="cons-container"> <h2 class="heading">Cons</h2> <ul class="cons"> <li>Cons Text</li> <li>Cons text</li> <li>Cons text</li> </ul> </div> </div>
Replace “Pros Text” “Cons Text” with Your Text and Your Table Is Ready Now You Can Publish It