Add 2 Column above and below Blogger Post Body

Add 2 Column above and below Blogger Post Body

Comments: 6
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.

Speak Your Mind

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

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

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

Thank you very much

Welcome Ajinkya..

Facebook Group Community Code ConverterHide Code Converter Show EmoticonHide Emoticon

If you Got questions? Ask ’em below! While we’re here, you might like to leave a comment and let me know if you have any stories or questions.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *