Join our Telegram group for latest information! Join now!

Explore our Blog: Gujarat Jobs

Home
Blogger
BLOGGER CUSTOMIZATION

HOW TO ADD A PROS AND CONS TABLE IN BLOGGER TEMPLATE FOR FREE FULL CODE

 Hello Blogger user Welcome Gujarat Jobs, 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
  1. Go to blogger
  2. Go to Theme option
  3. Click on Edit HTML
  4. 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;
  }
}
  1. Now save the theme
  2. 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

Conclusion

So I think you might have understood and loved our post about HOW TO ADD A PROS AND CONS TABLE IN BLOGGER TEMPLATE FOR FREE FULL CODE. So in the conclusion i will say that if you didn't understood any step then feel free to comment below this post

Do share with your friends and spread this post to the world😍

Rate this Article

Please wait...

Post a Comment