How To Add Two Columns to blogger Sidebar

Posted by Lasantha Bandara on June 1st, 2009 File Under : change template, css, html6 Comments

1.Log in to your dashboard--> layout- -> Edit HTML

2.Scroll down to where you see like this code.

<div id='sidebar-wrapper'>
  <b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Feed2' locked='false' title='Recent Posts' type='Feed'/>
<b:widget id='Label99' locked='false' title='Labels' type='Label'/>
</b:section>
  </div>

3.Now add below code between  </b:section>  and  </div>  .

 
<b:section class='sidebar' id='magazine-left4' showaddelement='yes'>
<b:widget id='Text514' locked='false' title='Column 1' type='Text'/>
</b:section>

<b:section class='sidebar' id='magazine-right4' showaddelement='yes'>
<b:widget id='Text524' locked='false' title='Column 2' type='Text'/>
</b:section>

<div style="clear: both;"></div>

Look at the picture below.

4.Now Find below code.

]]></b:skin>

5.Add below code before  ]]></b:skin>  tag.

#magazine-left4 {
width: 49%;
float: left;
}
#magazine-right4 {
width: 49%;
float: right;
}

Note : You can change values of width,as your choice.

6.Now save your template and you are done.It look like this.

File Under : change template, css, html

6 Responses to “How To Add Two Columns to blogger Sidebar”

  1. Anonymous says:

    nice job.......it work in my home page but i can not see any widget when i go in single post...any solution...!!!

  2. Anonymous says:

    nice job....but it's not working for me properly....i saw my widget (i put in this two colum) in my home page. But i can not see my widget when i click in a single post...

  3. Blogger Tips And Tricks|Latest Tips For Bloggers says:

    I correct the problem.Please read the post again.Thank you for your inform.

  4. kuncung says:

    it's works, I like it.. tks for sharing i tried to my site http://www.dokar.co.cc

  5. sayem says:

    it's working....thnx.
    http://www.softwarepedia.co.cc/

  6. naina sharma says:

    thanks for sharing its very useful

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.