Add 2/3/4 Columns Widget Section in Blogger

In today's article, I will mention about adding two or three or four columns widget section for ads or any other purpose. This is a really simple and easy task. If you already read the previous article "How To Add a New Widget Section", then hopefully you don't even have to understand the details. Anyway, let's know first how to add two columns widget section.

Where do I need to add Two Columns Widget Section?

Generally, (1) below the sidebar or above, (2) At the bottom of the post, (3) just below the header, or (4) just above the footer. Let's see how much I can help you to design your blogger template by adding this two columns widget section.

Add New Split Widget Sections Below Your Sidebar

Step 01: Log into your Blogger Account and click on > Themes > Edit Html >

Step 02: Simply click anywhere on template code and press Ctrl + F

Step 03: Now find the code section like below

<div id='sidebar-wrapper'>

<b:section class='sidebar' id='sidebar' preferred='yes'>

</b:section>

---------------- paste the code below right here

</div>

Note: Due to the different template variations, this section may look a little different. For example, you may find <div id='sidebar'> or <div id='sidebar-container'> instead of <div id='sidebar-wrapper'>.

Step 04: Now, if you found this section in your template, then you will need to copy and paste the following code just after the closing </b:section> tag and before the closing </div>

<div id='sidebar-columns'>
<div id='sidebar-1' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='sidebar-column' id='sidebar-1' preferred='yes' style='float:left;'/>
</div>
<div id='sidebar-2' style='width: 50%; float: right; margin:0; text-align: left;'>
<b:section class='sidebar-column' id='sidebar-2' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/></div>

That's all, hope you are Done

Note Here: If you want to add the Split Columns Widget section just above the sidebar of your blog, then add this code just above the <b:section> at the top of the sidebar, where b:section starts, i.e. <b:section>

To Add New Widget Sections Below Your Posts

STEP 01:
As like before, Go to Blogger Dashboard > Themes > Edit HTML and search for this section of code in your template:

<div id='main-wrapper'>
        <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>

---------------- paste the code below right here

      </div>

Note: Due to the different template variations, this section may look a little different. i.e., you may find <div id='main'> or <div id='content'> instead of <div id='main-wrapper'>

STEP 02:
Similarly, you need to copy and paste the following code just after the closing </b:section> tag and before the closing </div> 

Now, if you want to add 2 Split Columns Widget section

<div id='post-columns'>
<div id='post-1' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='post-column' id='post-1' preferred='yes' style='float:left;'/>
</div>
<div id='post-2' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='post-column' id='post-2' preferred='yes' style='float:left;'/>
</div>
<div style='clear:both;'/></div>

Again, if you want to add 3 Columns Widget section

<div id='post-columns'>
<div id='post-1' style='width: 33%; float: left; margin:0; text-align: left;'>
<b:section class='post-column' id='post-1' preferred='yes' style='float:left;'/>
</div>
<div id='post-2' style='width: 33%; float: left; margin:0; text-align: left;'>
<b:section class='post-column' id='post-2' preferred='yes' style='float:left;'/>
</div>
<div id='post-3' style='width: 33%; float: right; margin:0; text-align: left;'>
<b:section class='post-column' id='post-3' preferred='yes' style='float:left;'/>
</div>
<div style='clear:both;'/></div>

Again, if you want to add 4 Columns Widget section

<div id='post-columns'>
<div id='post-1' style='width: 25%; float: left; margin:0; text-align: left;'>
<b:section class='post-column' id='post-1' preferred='yes' style='float:left;'/>
</div>
<div id='post-2' style='width: 25%; float: left; margin:0; text-align: left;'>
<b:section class='post-column' id='post-2' preferred='yes' style='float:left;'/>
</div>
<div id='post-3' style='width: 25%; float: right; margin:0; text-align: left;'>
<b:section class='post-column' id='post-3' preferred='yes' style='float:left;'/>
</div>
<div id='post-4' style='width: 25%; float: right; margin:0; text-align: left;'>
<b:section class='post-column' id='post-4' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

That's it. Hope you don't need more than four widget sections on your blog. If necessary, use some brains to do this. I'm sure, now you can do this.

Customization For Other Widget Section

Similarly, to add new or Split Columns Widget section below or above other sections, you can try to create them by adding the above-mentioned code.

1. But of course, remember that the above mentioned code will be added, just above <b: section> or just below </ b: section>.
2. and, one more thing is that if you want to use this code again and again, then change the text in Yellow. Where the first yellow word and second yellow word of the code should be the same as the Yellow text.

Now If You Wish For Magazine Style

Now, while creating a magazine style, you might want to show your new widget section only on the home page, but use the code below instead of the above code.

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<div id='post-columns'>
<div id='post-1' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='post-column' id='post-1' preferred='yes' style='float:left;'/>
</div>
<div id='post-2' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='post-column' id='post-2' preferred='yes' style='float:left;'/>
</div>
<div style='clear:both;'/></div>

</b:if>

Or, if this is the case, your new widget section will only appear on the blog post page, then use the code below instead of the above code.

<b:if cond='data:blog.pageType == "item"'>

<div id='post-columns'>
<div id='post-1' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='post-column' id='post-1' preferred='yes' style='float:left;'/>
</div>
<div id='post-2' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='post-column' id='post-2' preferred='yes' style='float:left;'/>
</div>
<div style='clear:both;'/></div>

</b:if>

At The End

I hope you have now got a lot of freedom or ideas to redesign your blog. If you face any problems or have more information to know then feel free to write down below in comment box. Happy Blogging.