Monday, February 05, 2007

New Blogger Template Tutorial: Adding a Second Sidebar

If you want to add a second sidebar to your existing template, Hans of Beautiful Beta has a post Adding a second sidebar Part II have a very well written instruction on how to do it. Even if you have no intention to add a second sidebar, his post is worth a read to understand the New Blogger template better. The only thing I can add is to copy his numbered lines of code into Notepad (see below)

010: <body>
020: <div id='outer-wrapper'>l<div id='wrap2'>
030: <!-- skip links for text browsers -->
040: <span id='skiplinks' style='display:none;'>
050: <a href='#main'>skip to main </a>
060: <a href='#sidebar'>skip to sidebar</a>
070: </span>
080: <div id='header-wrapper'>
090: <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
100: <b:widget id='Header1' locked='true' title='Second Sidebar (Header)' type='Header'/>
110: </b:section>
120: </div>
130: <div id='content-wrapper'>
140: <div id='main-wrapper'>
150: <b:section class='main' id='main' showaddelement='no'>
160: <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
170: </b:section>
180: </div>
190: <div id='sidebar-wrapper'>
200: <b:section class='sidebar' id='sidebar' preferred='yes'>
210: <b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
220: <b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
230: </b:section>
240: </div>
250: <!-- spacer for skins that want sidebar and main to be the same height-->
260: <div class='clear'> </div>
270: </div> <!-- end content-wrapper -->
280: <div id='footer-wrapper'>
290: <b:section class='footer' id='footer'/>
300: </div>
310: </div></div> <!-- end outer-wrapper -->
320: </body>

and then read the rest of his tutorial side by side with the list in Notepad so you don't have to go back and forth in the post to refer to the list of code.

As for me, I am satisfied using ready made 3 column templates. See
Blogger Beta: 3 column template
New Blogger (formerly beta) 3 column template modified by Stavanger.


  1. I'm a newly retired and have a lot of catching up to do I see.

  2. Hi Chumly,

    Welcome to the retiree club. What are you doing with your spare time?

    Peter a.k.a. enviroman
    Enviroman Says

  3. Being bored mostly and reading a lot of posts.

  4. Hi Chumly,

    Why don't you start a blog or blogs on subjects you are passionate about or knows a lot about. And join the AdSense program. For me, it is educational and it helps supplement my pension, which helps as I used to support 2 college going sons on my pension, and now one is waiting for the result and deciding whether to continue. You can apply by clicking on the "Generate revenue from your Website. Google AdSense" text links at the top of the right sidebar.

    Peter a.k.a. enviroman
    Enviroman Says

  5. Hi Chumly,

    When I migrated, I lost my progress meters (bars that show a percentage of how complete a project is). I read somewhere that you can't just copy/paste the old HTML into the new blogger.

    I've tried everything I can think of to get the bars into my blog, but it's not happening.

    Any advice on how to get them to show up would be most appreciated!

    Happy retirement to you.


  6. Hi Deb,

    Are you trying to add that direct to the template? With the new Blogger, you add HTML/Javascript with the "Add a Page Element" via the Layout.

    Peter a.k.a. enviroman
    Enviroman Says

  7. Nice tutorial Peter,
    I had my blog with 3 column, please review ( Is this template fine to get high CTR ?THANKS IN ADVANCE

    Best Regards
    Eliena Andrews

  8. Hi Eliana,

    The placement of ads is always a compromise between wanting your ads in the most visible places and making the site easy to navigate and attractive to visitors so as to keep them comming. You have placed the categories right at the top of the left sidebar, and this makes navigation of your blog easy for your visitor, but at a small expense to the placement of the skyscraper ad unit.

    Peter a.k.a. enviroman
    Enviroman Says

  9. hey Peter, I am a middle class Indian Woman.I started blogging for a few monthes,also signed up for adsense. I am having a "side bar " on my right side of the post.I also wish to add a side-bar on the right side of the post.Please help me.Will u please send me the html code of a template having sidebars on both sides of the post.Please send me the address to"
    yours Friendly Sophy

  10. Hi Sophy,

    I have already published links to ready made 3 column templates at the bottom of the post. Anyway, here they are again:

    New Blogger 3 column templates modified by Ramani
    New Blogger 3 column templates modified by Stavanger.

    Please do attemp to copy the URL of the post where you make a comment or bookmark it so that you can check back to see if a response to your comment has been made, rather than expecting us to email you the answer.

    Dummies Guide to Google Blogger
    "online book" in progress

  11. nice tips Peter.
    oh and btw, i have received some emails to my inbox sent by Peter Chen from

    is it really from you? sorry, just wanna make sure.

    i would really appreciate it if you could confirm it to me via this my contact form here.


  12. Hi Jack,

    It is me, the same old Peter. Normally I respond to a comment, then go to the blog of the one who commented to let them know I have responded to their comment. A value added service plus a strategy to get my blog better known. But in your case, I will do both.

    Peter Blog*Star
    Blogger for Dummies

  13. Hi Peter,
    I need the code for 3 column papel morado template and parchment templates. can u plz help me out.
    Thanx & Regards,

  14. in adding second bar, through the steps u have written In your CSS style-sheet, change "#sidebar-wrapper" to "#right-sidebar-wrapper".

    my Question is from where can i find CSS style sheet?

    I couldn't add the second bar on left side.

  15. CSS is in your template itself, usually very near the top of the template, after:


  16. hi,

    i want to add a sidebar on the left side of my blog wherein i can put my google adsense there, i am using a revolution church template and i tried using all the tutorials here on internet but it doesn't work on my template.. here is my blog , please help me solve my problem on adding sidebar.

  17. thank you so much this was very helpful.. al from mexico

  18. I just started blog, and i feel quite barried in the debris of the web, etc. It is actually a little more discouraging than I thought it would be, since I was hoping it would be fun!

    Anyway, everything I read one of your posts, it is so helpful!

    You are awesome, dude-Peter!!!

    Thanks For All Your Help,

  19. I'm new to blogging and I'm desparately trying to add a second column. No matter what I do I can't seem to add a sidebar to the left. It seems to be stuck between my blog post and the right sidebar. I've tried to change the main wrapper float to "center" but that just made it worse. All I want is my blog post to be sandwiched between two sidebars. Can you help me?

  20. No need to be confused. Just change to a new Template Designer template (Dashboard > Design > select template > Layout and chose how many columns you want. If still confused, ask again.


Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics