BlogTariff


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 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.

Post a Comment Gmail ID

Do not Try to Add Spam Comments

 
Top