How to add multiple columns into a blogger blog post?

Are you looking for How to post multiple columns in blogger blog post?

Blogging is a great way to share our knowledge with the rest of the world. As bloggers, we can write the latest newsletters about tech, economy, entertain, life and more knowledgeable things in our blog sites and share with others. So writing is a brilliant thing, but if we can be writing that with a style, that is even brilliant! ;-) Yes,

If the writer can write excellent posts with a style, then that posts became a more attractive and eye-catching to both Readers and Search engines. If a blogger can attract both readers and search engines that blogger can be the success in blogging very easily. So we must know to include not only words but also need to include some pro look for our blog post. We should include some designs for our post. 

But you know that if we compare among blogging platforms, in the Blogger blog platform there is a limited feature. If you wanted to do advanced things, you want to use HTML knowledge as well as CSS knowledge. By using the HTML codes and CSS we can customize our blogger template as well as the blog post.

Most of the bloggers interested to publish their blog content by using the multiple columns because blogger help to post on a single line/column post. Have you ever try to publish your blog post content by using multiple columns? Or Are you searching How to post multiple column texts in blogger post? Sometimes you may be wondered how to post multiple column texts in blogger post? Yes, you can post multiple column texts in blogger post. But the blogger doesn’t provide any direct method or feature for that. 

We have to use HTML codes & CSS knowledge. With that, you can post two columns, three columns or four columns pot very easily by using only a simple code. Because of using multiple columns, we can describe things clearly. Also, it makes easy to understand.

Sometimes you may be thinking like that Why we don’t use MS word sheet for that task, first write-down the content as columns and after that copy & paste into the posting page?

That’s not a good idea. Because that MS word or other Text editors mostly aren’t use for web, Also not compatible with HTML formats. So we cannot recommend that method.

OK. Then without any late let see how to post multiple columns post in blogger blog?  There are a lot of methods to post a post layout in two columns, three columns or multiple columns. Let start with some easy method. Most of the time I used this method to post a post layout in double columns.

How to post a post layout in double columns?

1.       Log into your Blogger blog account -->> Go to Dashboard

2.     Click on the posts section and create a new post or click the edit button on the existing post. Then click where you want to create columns.

3.       By default, your post editor opens with COMPOSE mode. So click on HTML tab to open HTML mode.

4.       Then copy the one of below code and paste it where you want to create a column in your blog post.

5.       Then fill out that column with your content (Go back to compose mode and fill out that column with your content) and Go back to compose mode and check your post content.

6.       Finally, click on the publish button to publish your post.

Among the below codes you can select the one of suitable code as you prefer. The appearance of that codes will be given under the below of each code.

Method 01.

Code for two columns :

<div style="border: 5px ridge; float: left; padding: 2px; margin-bottom:8px; width: 45%;">Text of your Left Column is in here. This demo text of left Colum. Please Enter the content Here  </div>

<div style="border: 5px ridge; float: right; padding: 2px; margin-bottom:8px; width: 45%;">Text of your Right Column is in here. This demo text of Right Colum. Please Enter the content Here   </div>

<div style="clear: both"></div>

Above code will look like;

 

Text of your Left Column is in here. This demo text of left Column. Please Enter the content Here

Text of your Right Column is in here. This demo text of Right Column. Please Enter the content Here

That is the best and easy way to create columns in your blogger post. Only need to use simple HTML code. Through this code, you just have a Floating two columns. You have only use the HTML codes. Not need to use CSS code. Personally, I recommend that method because I use those codes successfully.

Code for three columns:

<div style="border: 5px ridge; float: left; padding: 2px; margin-bottom:8px; width: 30%;">Text of your Left Column is in here. This demo text of left Colum. Please Enter the content Here </div>

<div style="border: 5px ridge; float: right; padding: 2px; margin-bottom:8px; width: 30%;">Text of your Middle Column is in here. This demo text of Middle Colum. Please Enter the content Here   </div>

<div style="border: 5px ridge; float: right; padding: 2px; margin-bottom:8px; width: 30%;">Text of your Right Column is in here. This demo text of Right Colum. Please Enter the content Here   </div>

<div style="clear: both"></div>

Above code will look like;

Text of your Left Column is in here. This demo text of left Colum. Please Enter the content Here

Text of your Middle Column is in here. This demo text of Middle Colum. Please Enter the content Here

Text of your Right Column is in here. This demo text of Right Colum. Please Enter the content Here

Customize the highlighted values as you prefer.

Method 02.

Code for two columns:

<table cellpadding="0" cellspacing="10"><tbody>

<tr>

<td align="justify" valign="top" width="200"> Text of your Left Column is in here. This demo text of left Colum. Please Enter the content Here </td>

<td align="justify" valign="top" width="200"> Text of your Right Column is in here. This demo text of Right Colum. Please Enter the content Here </td>

</tr>

</tbody></table>

* Cellpadding: Change the value of the range between the post and the column.

* Cellspacing: Change the value of the range between the two columns.

* Width: Change the value of the wide of the column.

* Align:  Change the value of the text is to be aligned to right, left, or center. Change it to right to align to the right side. Change it to the left to align to the left side. Center to center align. While justify is to align to both right and left side.

* Valign: Change the value of aligning vertically to top, bottom, or middle.

* Customize the highlighted values as you prefer.

Above code will look like;

Text of your Left Column is in here. This demo text of left Colum. Please Enter the content Here

Text of your Right Column is in here. This demo text of Right Colum. Please Enter the content Here

Method 03.

Code for two columns:

<div style="float: left; width: 50%;">

<ul>

<li>Left Item 01</li>

<li>Left Item 02</li>

<li>Left Item 03</li>

<li>Left Item 04</li>

<li>Left Item 05</li>

</ul>

</div>

<div style="float: right; width: 50%;">

<ul>

<li>Right Item 01</li>

<li>Right Item 02</li>

<li>Right Item 03</li>

<li>Right Item 04</li>

<li>Right Item 05</li>

</ul>

</div>

Above code will look like;

• Left Item 01
• Left Item 02
• Left Item 03
• Left Item 04
• Left Item 05

• Right Item 01
• Right Item 02
• Right Item 03
• Right Item 04
• Right Item 05

Code for three columns:

<div style="float: left; width: 33%;">

<ul>

<li>Left Item 01</li>

<li>Left Item 02</li>

<li>Left Item 03</li>

<li>Left Item 04</li>

<li>Left Item 05</li>

</ul>

</div>

<div style="float: left; width: 33%;">

<ul>

<li>Middle Item 01</li>

<li>Middle Item 02</li>

<li>Middle Item 03</li>

<li>Middle Item 04</li>

<li>Middle Item 05</li>

</ul>

</div>

<div style="float: right; width: 33%;">

<ul>

<li>Right Item 01</li>

<li>Right Item 02</li>

<li>Right Item 03</li>

<li>Right Item 04</li>

<li>Right Item 05</li>

</ul>

</div>

Above code will look like;

• Left Item 01
• Left Item 02
• Left Item 03
• Left Item 04
• Left Item 05

• Middle Item 01
• Middle Item 02
• Middle Item 03
• Middle Item 04
• Middle Item 05

• Right Item 01
• Right Item 02
• Right Item 03
• Right Item 04
• Right Item 05

Method 03.

Codes:

For two columns

    <div class=' multiple-para '>

        <div class='two-column'>This is the first paragraph. Enter content Here </div>

        <div class='two-column'>This is the second paragraph. Enter content Here </div>

    </div>

For three columns

    <div class=' multiple-para '>

        <div class='three-column'>This is the first paragraph. Enter content Here </div>

        <div class='three-column'>This is the second paragraph. Enter content Here </div>

        <div class='three-column'>This is the third paragraph. Enter content Here </div>

    </div>

For four columns

<div class=' multiple-para '>

    <div class='four-column'>This is the first paragraph. Enter content Here </div>

    <div class='four-column'>This is the second paragraph. Enter content Here </div>

    <div class='four-column'>This is the third paragraph. Enter content Here </div>

    <div class='four-column'>This is the fourth paragraph. Enter content Here </div>

</div>

After copy & paste above HTML codes you should need to copy & paste the below CSS codes. For that,

1.Log into Blogger account -->> Dashboard -->> Theme -->> Edit HTML

 

2. Click inside the theme editor and press Ctrl + F buttons and open the search box.

3. Then type   ]]>/b:skin>or </style> in the search box and press Enter button.

4. Then copy & paste the below CSS codes before or above the   ]]>/b:skin> or </style>

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

5. Click save theme and check the post.

I Hope the above 3 methods help you to add multiple columns into your blogger blog post. And if you have any problem or know more fixes on theses multiple columns into a blog post, Please share with us in the comments section below.