How To Add Columns In Blogger Blog Post?

Sometimes it becomes very important to add columns in a blog post to arrange contents. As a blogger, our duty is to present our content in an attractive way to our readers. Blogger provides us a significant number of automated features of blogging. It also allows us to arrange our post through composing mode and HTML mode. We can customize our blog post through HTML mode.

Today, I will tell you how you will be able to create columns into your blogger blog post by using a small piece of code. This is a very simple task. You can do it very easily. Here is a demo of how columns will look like in your blog post:

Text Of Your Left Column. This is the demo text of your left column. Provide any kind of content here. It could be an image, video, articles or whatever you want.
Text Of Your Right Column. This is the demo text of your left column. Provide any kind of content here. It could be an image, video, articles or whatever you want.

As you can see that, there are two columns in this blog post. After finishing this article, you will also know that how to create this kind of column in between your blogger blog post. The code is as follow:

Code :
<div style="border: 5px ridge; float: left; padding: 5px; width: 45%;">Text Of Your Left Column</div> <div style="border: 5px ridge; float: right; padding: 5px; width: 45%;">Text Of Your Right Column </div> <div style="clear: both"></div>

According to me, this is the easiest way to create columns in your blogger blog post. You are just floating two column with this code. Through this code, we are simply creating two “div” and floating those right and left. And then we are getting two column in front of us. Let's see the implementation of this code.

Add Columns In Blogger Blog Post:

1. At first, login to your blogger account > Go to the Dashboard/Overview.

2. Go to the “Posts” section and choose the post where you need to create columns. Click on the “edit” link. If you are creating a new post, then go to the “Posts” section and click on the “New Post” button.

3. By default, your post editor interface brings you in COMPOSE mode. For implementing this code, click on HTML mode > Copy the code and paste it where you need to create column into your post.

4. Fill out columns with your content and click on “Publish” page button. You are done. Open the page in your browser. You will see columns into your blogger’s blog post.

I hope you have successfully implemented the code and its working for you. If you are facing any problem in doing this or want to give your feedback, please let me know through the comment section. I will get back to you. If you like this post, then don’t forget to share it with your friends.

I love to share my knowledge and experience. I am a part time blogger and a student of Computer Science & Engineering. I am a regular web developer & SEO analyst at Upwork. You can follow me on...


I am trying to put only one column in one of my blogger post. Could you please tell me how to put only one column and I need this in center of my post. I am trying to put a single div without floating but it is remaining at the left side of my post and I don't need this to happen. Please help me.

As you can see, I am using two columns and that's why I have created two div element. As you are trying to create only one column so you will have to create one div element. Float property works for left and right so you can not use float for bringing your column into center. Let me write the code for you and it's simple :

<div style="margin: 0 auto; width:50%; border: 5px ridge; padding: 5px;">Text Of Your Single Column</div>

Follow the same instruction I have shown above. Just use this code for creating your single column. This will bring your column into the center of your blog post. If you wish to make your column larger or smaller then simply change the value of width.

We accept <a> (for making links), <b> (for bold), <strong>, <em> and <i> Tags. Spam comments will be deleted.