How to add pros and cons table in blogger

byInfokie •Friday, January 21, 2022

0

Here we beautifully designed pros and cons tables are exceptionally helpful to show

in this article, we have made this table using HTML and CSS.

Follow steps to add pros and cons table in blogger

Go to blogger dashboard
Select post tab and create new post
Switch to HTML View
Copy code and paste it to modify the required data on post

Now copy CSS code and paste it next below the first code

<style>
    .K2-pros-cons {
  font-family: "Raleway", 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;
  }
}
    </style>

Now save the post your done with pros and cons table

If the pros and cons table doesn't work properly check your blog theme supports font awesome icons or not

If font awesome style-sheet not added to your theme use this code below <head> tag on theme editor

Note : If you want to use pros and cons in all of your blog post add the CSS code directly to theme editor.

Do you agree with the discoveries? Offer your conclusions with us in the remarks segment beneath!

Put your review on Comment Box

Tags: blogger blogger.com cons cons table pros pros and cons pros table table

Post a Comment

Enable Javascript

To access the Dynamic Knowledge Treasure turn on Javascript in the browser settings..