Thursday, 19 October 2017

How to Add Multiple Column in a Blogger Post

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.

Multiple Column for Blogger

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.

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>
  6. .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%; }
  7. Click Save Theme and you are all set
  8. Now go to your post editor and click New post/page
  9. Switch to HTML mode and use one the following text column style 
  10. <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>
    <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>
    <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>
  11. Fill the highlighted areas with your text
  12. Finally, click Publish and you are on the go

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

Discover How to Grow Your Blog to 2k+ Visits /Day

Get Free Access

More From Knigulper

Comment Policy

Please Keep in mind that all comments are moderated manually & by default, all the links in comment area are set to nofollow. Using hyperlinks in comment is forbidden and such comments will not be published. Let's enjoy a spam-free conversation.


  1. Brother can you explain me how to add custom related post" ads by google"

    1. Matched content feature is not available to all publishers learn more...

  2. Brother Do you know how to add sticky widget on blog i mean not scrolling widget.

    1. We have published this tutorial on this blog. Please check out the Blogger sticky Navigation widget

  3. what would be the code for multi column paragraph but that shud be responsive , can you help me on that

    1. Add the HTML code multiple times in your posts/pages that we have mentioned at the step no. 8 but do not repeat the CSS code in your template.