Insert extra columns in blogger layout

 

In this tutorial i am going to show you how to insert extra columns in blogger default layout, hope this will be very handy for you to personalize your blog. We can add different gadgets in blogger layout easily by using "Add a widget" feature
but it is hard to add an extra column. By this tutorial you will be able to convert your blogger layout to a magazine style layout, which is the most popular layout style now a days. I will show how to add two extra columns bellow blog post section, however if you will read and understand the tutorial properly and carry a little bit of knowledge of the codes, then you will be able to put it anywhere in the template layout. So read it properly and then use it in your own way.

Follow the following steps

1) Go to Template-----Edit HTML------Expand Widget Templates

2) Find out </b:section> tag associated with the Sidebar, as an example

<b:section class='sidebar' id='magazine-left' showaddelement='yes'/>

3) After that add the following codes after </b:section> and before </div>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:section class='sidebar' id='magazine-left' showaddelement='yes'/>
<b:section class='sidebar' id='magazine-right' showaddelement='yes'/>
<div style='clear: both;'/>
</b:if>

4) Now search for the code ]]></b:skin> by pressing Ctrl+F
5) Just before]] ></b:skin> paste the following codes

#magazine-left {
  width: 40%;
  float: left;
}
#magazine-right {
  width: 40%;
  float: right;
}

6) After that click on Preview if everything is going well, then click on Save template.
That's all. Subscribe Us.