Add 2 Column above and below Blogger Post Body

Adding column is a very simple technique for blogger but sometimes it is hard for newbie. As earlier I have shared with you that how to split sidebar into 2 column and today I will share with you the trick that we would able to create 2 column above and bottom of the blog post body.

Step 1 Log in to your blogger account and Click on Template  ->

Step 2 Now click on Edit HTML-> Unfold code  ►

Step 3 Now find ]]></b:skin> by Pressing Ctrl + F

  

Step 4 And Paste the below code above ]]></b:skin> and save your template

/*Extra Column by www.bloggerspice.com*/
#Spicy Column h2{
font-size:13px;
font-weight:bold;
color:#B8002E;
border-bottom:2px solid #000000;
padding-left:5px;
}
#Spicy Column{
width:600px; /*Change width */
}
#Spiceleft{
width:295px; /*width of the left column*/
float:left;
margin:4px;
}
#Spiceright{
width:295px; /*width of the right column*/
float:right;
margin:4px;
}

Add 2 Column above Blog Post Body

Step 1 Now find <div id='main-wrapper'> by Pressing Ctrl + F

  

Step 2 And Paste the below code above <div id='main-wrapper'> and save your template

<div id='Spicy Column'><b:section class='Spiceleft' id='Spiceleft'/><b:section class='Spiceright' id='Spiceright'/></div>

Add 2 Column below Blog Post Body

Now we will add column below post body. So follow the below steps-

Step 1 Now find like below code by Pressing  Ctrl + F

<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>
</div>

Step 2 And now code like below.

<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>
<div id='Spicy Column'><b:section class='Spiceleft' id='Spiceleft'/><b:section class='Spiceright' id='Spiceright'/></div></div>

if you face any problem then feel free to contact with me. I will reply you as soon as possible.