Add 2 Column above and below Blogger Post Body

Add 2 Column above and below Blogger Post Body

data:blog.title
BloggerSpice

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;
}

Extra column


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.
Open Comment Box
ronnie artus says: 1/09/2014

i'll try this
my blogs

Mohammad Fazle Rabbi says: 1/09/2014

if you need any help then feel free to leave a comment here. :d

Abdelhak Essbai says: 7/10/2014

i don't know how to find the comments box in my blogger template , i want to replace it with the facebook like box , can you help me please , i did hide the blogger comment but i didn't find the place to put the facebook like box to replace it's position

Mohammad Fazle Rabbi says: 7/16/2014

Assalamu Alaikum Brother Essbai..I just check your blog and I think you have already solve your problem.

Ajinkya Sidwadkar says: 1/11/2015

Thank you very much

Mohammad Fazle Rabbi says: 1/12/2015

Welcome Ajinkya..

Samnang Nouv says: 10/07/2018

Hello ! How to make 4 colume ? Please

Blogger Spice says: 10/08/2018

Hi

Follow the instruction from Blog post and use the below instruction.

Just locate the below CSS code block from above script


#Spiceleft{
width:295px; /*width of the left column*/
float:left;
margin:4px;
}
#Spiceright{
width:295px; /*width of the right column*/
float:right;
margin:4px;
}


Now replace the above code block


#Spiceleft{
width:33%; /*width of the left column*/
float:left;
margin:4px;
}
#Spiceleft1{
width:33%; /*width of the left column*/
float:left;
margin:4px;
}
#Spiceright{
width:33%; /*width of the right column*/
float:right;
margin:4px;
}
#Spiceright1{
width:33%; /*width of the right column*/
float:right;
margin:4px;
}



Now again find below code


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


Now replace the above code by below script


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


Thank you :)

Contact Form

Name

Email *

Message *