Add 2 Column above and below Blogger Post Body

Add 2 Column above and below Blogger Post Body

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.
Add 2 Column above and below Blogger Post Body
4 Stars stars - "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 e...

Post a Comment

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 Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

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 *