Add 2 Column above and below Blogger Post Body
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-
<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>
<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.
5 comments
my blogs