How to create Responsive Multiple Content or Paragraph Column inside Blogger Posts?

Instead of changing more layouts or templates it’s better to spiceup blog with adding CSS or Script or HTML codes to blogger templates to grab more readers to your blog.

In this course here Blogtariff brings you another topic where you can create multiple columns for adding Notes, Content or Paragraphs or Messages for your readers inside blogger posts. In this tutorial we educate you adding two or multiple (1,2,34 etc.) columns for adding paragraphs in Blogger content posts.

• How to create Responsive Multiple Content or Paragraph Column inside Blogger Posts?
  Instead of changing more layouts or templates it’s better to spiceup blog with adding CSS or...
  
• How to create/convert a Drop Down Menu for Blogger Label list Categories?
  As everyone aware about Blogger label gadget/widget is a default sidebar widget which displays...
  
• Add Stylish Whatsapp Smileys/emotions to Your Blogger Posts and Comments
  Social media network playing vital role on mobile platform where mobile users are connecting to...
  
• Add Labels Widget to show each label in different attractive colors for blogger blogs
  Varieties of labels widgets are available online with simple, animated, single colors etc. but...
  
• Add 'Auto Scrolling Latest Posts News Ticker' widget to Your Blogger blog
  Sometimes few plugins drags readers attention indirectly forces them to stay long time on your...
  

How to Add Side-by-side paragraphs or contents inside blogger posts?
Go to Blogger template and Click on EDIT HTML Tab
Search for ]]></b:skin>
After finding the above code copy the below CSS code and paste above to it

<style>
/*#Multiple Content style by KrishiOmli
#Free & Open License to Use in commercial and or personal projects/works.
*/
.multiple-Kolm {
  margin: 15px 0;
}
.multiple-Kolm *,
.multiple-Kolm *:after, 
.multiple-Kolm *:before {
  box-sizing: border-box;
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
}

.multiple-Kolm:after, 
.multiple-Kolm:before {
  content: "";
  display: block;
  clear: both;

}

.multiple-Kolm .Kolm-50p {
  display: block;
  float: left;
  width: 50%;
  padding: 0 10px;
}

.multiple-Kolm .Kolm-33p {
  display: block;
  float: left;
  width: 33%;
  padding: 0 10px;
}

.multiple-Kolm .Kolm-25p {
  display: block;
  float: left;
  width: 25%;
  padding: 0 10px;
border-style: outset;
    border-right: #ff0000;
}
</style>

Nicely after adding code Save your Blogger template and now Go to your Posts tab to write article

After completion of writing article adjusting images, adsense code etc., decide where to add this code inside blogger posts.
If you’ve decided then Click on HTML (After Compose Tab)
Add the below HTML code at location where your want show

<div class='multiple-Kolm'>
    <div class='Kolm-25p'>Blogtariff brings you another topic where you can create multiple columns for adding Notes, Content or Paragraphs or Messages for your readers inside blogger posts</div>
    <div class='Kolm-25p'>Blogtariff brings you another topic where you can create multiple columns for adding Notes, Content or Paragraphs or Messages for your readers inside blogger posts</div>
    <div class='Kolm-25p'>Blogtariff brings you another topic where you can create multiple columns for adding Notes, Content or Paragraphs or Messages for your readers inside blogger posts</div>
    <div class='Kolm-25p'>Blogtariff brings you another topic where you can create multiple columns for adding Notes, Content or Paragraphs or Messages for your readers inside blogger posts</div>
</div>

After successful adding HTML code Save your Post and Publish

Code Customization:

• Replace Red color Highlighted code with your content
• Replace ‘25p’ with 33p or 50p according to your size column (i.e 25%, 33%, or 50%)
• That’s it you’ve done

After successful replacement Save your post and view experiment.

Author words:
If you really enjoyed with our article then don’t forget to subscribe to our blog and leave your feedback to know others about this article or blog.