Add 2 Column above and below Blogger Post Body

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.

8 Comments

  1. Ronnie Artus
    i'll try this
    my blogs
    • BloggerSpice
      if you need any help then feel free to leave a comment here. :d
    • Unknown
      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
    • BloggerSpice
      Assalamu Alaikum Brother Essbai..I just check your blog and I think you have already solve your problem.
  2. asidwadkar
    Thank you very much
    • BloggerSpice
      Welcome Ajinkya..
  3. អាក្បាលធំ
    Hello ! How to make 4 colume ? Please
    • BloggerSpice
      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='Spicel…
  1. To insert a code use <i rel="pre">code_here</i>
  2. To insert a quote use <b rel="quote">your_qoute</b>
  3. To insert a picture use <i rel="image">url_image_here</i>
Go Up