How to add pro and cons widget in Blogger - World24Hub

If are regularly engaged in the blogging platform then you must have known about the free blogging platform blogger. Blogger comes with limited features with free version and here we are going to tell you how to add custom pro and cons blogger widget in blogger, Let get started.

Pros and Cons table widget for blogger that shows the brief information about content in the list category. Which is very simple and clean but to use Pros and Cons table widget in blogger you need to know about basic HTML & CSS only you can use it or design it in your own way.

Blogger is very lack of features tues comparison to WordPress. There in no any plugins available for blogger. In WordPress you can do it anything with the help of Plugins but in the Blogger/Blogspot you need to do everything custom and in your own, So in this post i have shared how to use Pros and Cons Table Widget in blogger for free. This can be used in every blogger website with ease. Just you need to follow the tutorial how-to-use it easily. Look on the post below how to get started.

How to use Pros and Cons table widget in blogger ?

This Widget is desinged with HTML and CSS using flex-box property. If you about basic HTM and CSS you would probably know to how you can use Pros and Cons table widget in blogger for free. Pros and Cons widget looks exactly default one and you can customize as your need. Look down and know how to use it manually in blogger.

1. Code in Template
2. Code in Posts

# Method 1 : Code In Template

In this method you can use just code once in template and it applies to all post whenever you use write new posts and want to use Pros and Cons table widget. You need to edit you template to apply this method but this is very worthly to do it becuase you dont need to use same code again and again whenever you write new posts here is the way how you can do that.

Step 1 :
Go to blogger dashboard and then choose Themes >> then click on EDIT HTML.

Things to remember :
Always take backup of your current theme if anything wrong happened you can restore it
To take backup Goto THEMES >> CLICK ON Restore/Backup and download your backup theme.

Step 2 :
Now, your template opens and click anywhere into it and press CTRL+F and search box appears and type </head> and hit enter and copy the CSS code from the the table below and paste the code above </head> tag.

 
/** Css Stylesheet **/

.pc-table {

display: flex;

justify-content: center;

margin: 10px auto;

border: 1px solid #ddd;

box-shadow: 0px 8px 8px 0px rgba(0,0,0,0.2)

}



 .pc-table > div {

text-align: left;

display: block;

width: 100%;

min-width: 1px;

}



.pc-table span {

padding: 14px;

color: #fff;

display :block;

font-weight :600;

font-size :22px;

}



 .pc-table .h1 {

background: green

}



 .pc-table .h1-h1 {

background: red

}



.pc-table ul {

padding: 0 0 0 15px;

margin: 0

}



.pc-table ul li {

list-style-type: none;

padding: 6px 0;

display: block;

overflow-x: hidden;

font-size: 14px

}



.pc-ul li:before {

content: "\f058";

display: inline-block;

padding-right: 6px;

font-family: fontAwesome;

color: green

}

.pc-ul-ul li:before {

content: "\f05e";

display: inline-block;

padding-right: 6px;

font-family: fontAwesome;

color: red

}



@media screen and (max-width: 555px) {

.pc-table {

display: block;

}

}

Popular On Blog : How to use multiple App in Android

Step 3 :
Now click and Save and your theme will be saved and now make a post with HTML.


Step 4 :
Now goto Posts and Create Now , and if you want to use Pros and Cons table widget then copy the Following HTML code and paste it where you want to use it.

<div class="pc-table">

<div class="pc-items">

<span class="h1">Pros</span>

<ul class="pc-ul">

<li>Item 1</li>

<li>Item 2</li>

<li>Item 3 </li>

<li>Item 4</li>

<li>Item 5 </li>

<li>Item 6</li>

<li>Item 7 </li>

<li>Item 8</li>

</ul></div>

<div class="pc-items">

<span class="h1-h1">Cons</span>

<ul class="pc-ul-ul">

<li>Item1 </li>

<li>Item 2</li>

<li>Item 3 </li>

<li>Item 4</li>

<li>Item 5 </li>

<li>Item 6</li>

<li>Item 7 </li>

<li>Item 8</li>

</ul></div></div>

Step 5 :
Edit the items inside the Pros and Cons table widget and publish your posts. Now your Pros and Cons table look like this.

Pros

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5
• Item 6
• Item 7
• Item 8

Cons

• Item1
• Item 2
• Item 3
• Item 4
• Item 5
• Item 6
• Item 7
• Item 8

This is how you can use using template and this is just once process and if you want to use in another posts just copy the HTML code and use it in your posts where you want to show your pros and cons table. This is how you can work with template.

# Method 2 : Code to Posts

This method where no need to modify your template, you just need to use code in your every posts when you make a new posts. All HTML and CSS code are same. Nothing changed you just need to use CSS code under the posts. Here how you can do this.

Step 1 :
Goto blogger dashboard and Posts then create new post. Write you content inside new post and if your like to show Pros and Cons table then copy HTML code and paste where you want to show it.

Contents

• How to use Pros & Cons Table Widget ?
• Pros and Cons blogger Method
• Code to Post Method
• Why Pros and Cons ?
  • List Table
  • Briet Content
  • Attractive List
  • Easy Navigation

Step 2 :
After that if you finished writing your post, copy the whole css from above and paste it under your posts.

Head Content <h1>

This is an example

Main Content <p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Conclusion Content <p>
This is just the demo of the conclusion.

CSS Code <style>

<style> .pc-table {
css codes here
}
-------------
-------------
-------------

</style>

Step 3 :
All, i want to say is in this method, Use CSS code in the every posts rather than modifying this also works. Above is the sample, though you can use css code anywhere you just need to whole css code and you must write post in HTML mode.


This is how you can use Pros and Cons table widget in blogger with custom CSS and HTML. It works greate if you follow the tutorial in right way.

Last Point

In this post written code are HMTL and CSS only. For those who know it can ignore this because anyone who has knowledge of HTML and CSS can make this easily. This ain't big deal but for those who are just don't about it then it matters most for them. So, This might help to begginer because it is manuall and blogger has no any plugins for shortcut. Hope it helped to you. If anything wrong happens then commnet down or Contact us.