Subscribe Our YouTube Channel Subscribe Now

How To Add Responsive Pros And Cons Table In Blogger Post

I will teach you how you can add the Pros & Cons Table to your blogger post. That too by following easy steps.
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 

Video Tutorial



Stay connected With itsutkarshk And Follow Us On Instagram & Facebook Subscribe Our YouTube Channel

About the Author

Best place to get information and about tech, youtube, facebook, whatsapp, online earning, blogging & SEO, gadgets, sarkari result, sarkari naukari.

Post a Comment

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.