How to Add Multiple Column to a Blogger Posts

A brilliant writer is one who writes the excellent posts with a stylish look to make them more eye-catching to both search engines and readers. As you know, every writer tries to publish the blog posts by putting the energy into thinking to compose a spectacular article that grabs the reader's attention. However, sometimes it is not enough to include the actionable words without having a pro look. We should give our posts new and unique design by applying the different methods, and one of the modern ways is to break the text into multiple columns. You can not only add the columns to a blogger template but in posts as well.

Check out: How to Create Magnify Glass Effect In Blogger

We often publish textual contents by using the simple and one column method. However, have you ever wondered how to write your articles in multiple columns? You can compose your blog posts in various columns like two columns, three columns and even in four columns just with a piece of CSS code. It will not only decorate your article but will also make it easy to understand the topics in a different style.

Demo
Click here

Why Use Multiple Column Paragraph to a Blog Post?

In my honest opinion, the multiple columns are the best way to describe the things more clearly. For example, you are going to distinguish the two topics A and B. You can directly apply the two column style to make it effortless and understandable. This trick works in both WordPress and BlogSpot as well.

Steps to Add Multiple Column to a Blog Post:

1. Login to your BlogSpot Dashboard > Theme > Edit HTML
2. Click anywhere inside the theme editor
3. Press Ctrl + F to open the theme search box
4. Type ]]>/b:skin> or </style> in the search box and press Enter key
5. Add the following CSS code right above the ]]>/b:skin> or </style>

.two-column, .three-column, .four-column{text-align:justify!important;} .knigulper-para .two-column, .knigulper-para .three-column, .knigulper-para .four-column{ display: block; padding: 0 10px; float: left;!important;} .knigulper-para { margin: 15px 0; } .knigulper-para *, .knigulper-para *:after, .knigulper-para *:before { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } .knigulper-para:after, .knigulper-para:before { content: ""; display: block; clear: both; } .knigulper-para .two-column { width: 50%; } .knigulper-para .three-column { width: 33%; } .knigulper-para .four-column { display: block; width: 25%; }

6. Click Save Theme and you are all set
7. Now go to your post editor and click New post/page
8. Switch to HTML mode and use one the following text column style 

<h3>2 Column</h3>
<div class='knigulper-para'>
    <div class='two-column'>This is the first paragraph</div>
    <div class='two-column'>This is the second paragraph</div>
</div>

<h3>3 Column</h3>
<div class='knigulper-para'>
    <div class='three-column'>This is the first paragraph</div>
    <div class='three-column'>This is the second paragraph</div>
    <div class='three-column'>This is the third paragraph</div>
</div>

<h3>4 Column</h3>
<div class='knigulper-para'>
    <div class='four-column'>This is the first paragraph</div>
    <div class='four-column'>This is the second paragraph</div>
    <div class='four-column'>This is the third paragraph</div>
    <div class='four-column'>This is the fourth paragraph</div>
</div>

9. Fill the highlighted areas with your text
10. Finally, click Publish and you are on the go

Post your valuable comments and let us know your thoughts about this tutorial.

Share this post