How to add second sidebar to your blog

Many of my visitors were asking me that how did I split my template into 3 columns or in short added a second sidebar. It can be done by two methods

1.Download an existing 3 column template from Webtalks Templates{Simple}
or
2. Edit your Template HTML

2.
Understanding structure and layout.


First of all, you have to understand that your Blog Layout consists of several sections. The standard Blogger template has a Header-section, a Sidebar-section, a Main-section and a Footer-section. Inside these section Blogger puts the widgets, these are the page-elements that you can select from the Template-tab.

Now, let's take a look at the structure of a standard Blog. If you create a fresh, new Blog, the Page Elements Tab looks like this:


This Layout has 4 sections: Header, Main (with the Blog Posts), Sidebar and Footer.
The HTML-template looks like this (the line-numbers are added for reference only):

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>


Lines 010 and 320 are the body-tags. All your code has to be between these two tags.

Lines 020 and 310 are the div-tags for two wrappers, the wrapper called "outer-wrapper" and the wrapper called "wrap2". In CSS you can define fonts, colors, and other styling for these wrappers. We'll look into CSS later in this tutorial.

Lines 080 to 120 contain the header. As you see, there is a div-wrapper (080 and 120), section-tags (090 and 110) and the widget that contains the header itself (100).

Lines 130 to 270 contain the content. Content means here: blog posts and sidebar. There is a div-wrapper called "content-wrapper" (130 and 270), and inside this wrapper there are 2 more wrappers: the "main-wrapper" (140-180) and the "sidebar-wrapper" (190-240).

Inside the main-wrapper we find the main-section (150 and 170) with the Blog-widget (160). This widget contains your posts.

Inside the sidebar-wrapper we find the sidebar-section (200 and 230) with an Archive-widget (210) and a Profile-widget (220).

And finally we have a Footer (280-300).

Now that we understand the structure, let's take a look at the formatting of this template. In the stylesheet you will fund the following code:

#outer-wrapper {
width: 660px;
padding: 10px;
....... }

#main-wrapper {
width: 410px;
float: left;
....... }

#sidebar-wrapper {
width: 220px;
float: right;
........ }


The outer-wrapper has a width of 660 pixels. The padding is set to 10 pixels, so that everything that is inside the outer-wrapper stays 10 pixels from the border. So that leaves 660 - 20 = 640 pixels for main-wrapper and sidebar-wrapper.
The main-wrapper has a width of 410 pixels, and floats to the left.
The sidebar-wrapper had a width of 220 pixels, and floats to the right. Together, main-wrapper and sidebar-wrapper have a width of 410 + 220 = 630 pixels. In the middle there is a space of 640 - 630 = 10 pixels.
So, if we want to squeeze in a second sidebar, we have to do something to create space. As it is now, it won't fit in.



Adding a second sidebar.

First, we will add the sidebar to the structure of the template, then we will add it to the CSS, and make it fit into the page.

Step 1: Backup the template.

Step 2: Make your right-sidebar unique.
Change lines 190 and 200:
190: <div id='right-sidebar-wrapper'>
200: <b:section class='sidebar' id='right-sidebar' preferred='yes'>

In your CSS style-sheet, change "#sidebar-wrapper" to "#right-sidebar-wrapper".
If you save your template now and view your blog, it should look okay.

Step 3: Add a left sidebar by adding new lines of code:
131: <div id="'left-sidebar-wrapper'">
132: <b:section class="'sidebar'" id="'left-sidebar'" preferred="'yes'/">
133: </b:section></div>
Now save your template, and take a look at the Page Elements tab.

You can see there is a new section, just below the header and above the posts. But it is not at the left side of the screen jet. Therefore, we have to add some CSS.

Step 4: Add CSS for the left sidebar.
In your CSS-style sheet, add the following code:
#left-sidebar-wrapper {
width: 220px;
float: left;
word-wrap: break-word;
overflow: hidden;
}
Your Page Layout tab will show something like this:

The sidebar-section is now to the left, but your right-sidebar is suddenly below your posts. That is because the width of 2 sidebars and a main-section counts up to 840 pixels, and that is more than the width of the outer-wrapper (660 pixels).

Step 5. Change outer-wrapper and header-wrapper width.
In your CSS-stylesheet look for the #header-wrapper and #outer-wrapper definitions, and change the width from 660 to 860.

Step 6. Add a page element.
Now finally, add a page element to your left sidebar.
Your Blog Layout will look like this now:

Sincere thanks to BeautifulBeta

Future post:: Three column templates, free for download

Comments

  1. Hello!

    In my blog I've written a post to how to add new section in the sidebar.

    If you like, here is the post.

    ReplyDelete
  2. thanks a lot buddy

    i found lot of ready to paste templates

    but urs is a good explanation it

    seems well have not updated my site but really it is very use ful

    thanks
    i like ur google ads alignements also :D :D

    ReplyDelete
  3. wow really this help section really.. good explanation.. I has search yahoo.. this page were found.. tnk u webtalk 4 helpin me..

    visit my blog//

    http://gigapixelz.blogspot.com

    thnks again

    ReplyDelete
  4. Hi,
    I didnt understand the step 4 because I dont know where to put the code you have mentioned in step 4. Can you help?

    ReplyDelete
  5. it's all german to me.can some one help? my email is cheks900@yahoo.com
    really iam a newbie...

    ReplyDelete
  6. Hey thanks! Been looking for this for months! You explained everything PERFECTLY !!!! Your The Man !!!!!

    ReplyDelete
  7. I've tried this same code from another site, but it doesn't work. Maybe it's because I use Rounders 3? Not sure. Does anyone know of another formula that might work? Thanks in advance.

    Mikael

    ReplyDelete
  8. Hey There,

    I wanted to know, how you added Google advs & Google search tool in your header section, I tried it says, no html allowed

    Please help

    ReplyDelete
  9. hii

    very good explanation,
    but i still have a question, when in step 3, i have to add those lines, where do i have to put them??
    cuz i pasted them in different places of the code, but didnt work.

    thanks for the help!!

    cyaaa

    gispe!

    ReplyDelete
  10. Fantastic, great work, one of the very useful blogging hacks.

    ReplyDelete
  11. Thanks a lot for the help. :)

    ReplyDelete
  12. Veeeery simpel with your tutorial!
    thx =)

    here is the result:


    turkish news in german
    huz,
    germany

    ReplyDelete
  13. Hihi...

    I am a real GOON when it comes to HTML..any way you can help me to add a left side bar to the current template I am using?? Really love this template but just do not know how to go about adding a left side bar..www.sweetangelswardrobe.com

    ReplyDelete
  14. Hey, I was wondering after i installed the sidebar, y does the sidebar push my post footer down. My site is www.doubleastudios.com

    ReplyDelete
  15. so, this looked so promising but step 4 does not create the picture mentioned. I end up with the left section and the main section stacking on top of each other with the left section's box being smaller.

    Of course, that means the rest of the steps do not create as intended, unfortunately.

    ReplyDelete
  16. Thank you SO MUCH!! my friend. I did exactly what you have described in that post and it worked perfectly.
    ________________________________
    Loss Weight To Have Healthy Life
    http://weightlossequalshealthylife.blogspot.com/

    ReplyDelete
  17. I downloaded yours (scribe/blogger)- and it works perfectly EXCEPT for on thing - I no longer have the quick edit icon (toolbar/wrench tool) on my posts. It is in the sidebars, but not on the posts -

    PLEASE PLEASE PLEASE tell me how to go in and add it to the code so that I can use it. I'm happy to do it - I just don't know what to add and where. I have tried looking at source code for original scribe templates but cannot figure out where to add it in....

    I am asking for instructions. Please! This is not a criticism.

    ReplyDelete
  18. can u help me? how to insert adsense code in the blog content? between text and text or posting title and content? email me please

    ReplyDelete
  19. thanks lot for this post... its easy to follow... thank you

    ReplyDelete
  20. Hey i found it easy but i have a problem in the step 4 please if you like tell me where i have to put that
    i put it in the /* Outer-Wrapper but nothing happens

    ReplyDelete
  21. I *think* I did every step properly but somehow both of my columns are on the right side. HELP!

    http://mrchgrl.blogspot.com
    mrchgrl@gmail.com

    ReplyDelete
  22. Your instructions were great... By following them I managed to add the sidebar.

    The only omission seems to be the position of the new sidebar HTML code in the template. I managed mine (it was a new right side bar in addition to the existing left sidebar) to display in the correct position only when I moved it before the main-wrapper.

    ReplyDelete
  23. ok i manage to add a second bar, check my blogspot, thunderball-x.blogspot.com

    ReplyDelete
  24. i m not gettin any kind of wrapper stuff
    plz help me out...

    ~Neer~
    neers4u@gmail.com
    theneers.blogspot.com

    ReplyDelete
  25. Very Very Nice explanation and of course you acknowledged your source that's like a great man!
    Great work!

    ReplyDelete
  26. I follow the intructions ,but I got stuck at step4. where do i paste those css codes:#left-sidebar-wrapper {
    width: 220px;
    float: left;
    word-wrap: break-word;
    overflow: hidden; ?

    ReplyDelete
  27. Good information but is very complicative. Instead a good 3 column template is a better option. But let my friends may view this article which I am bookmarking @ http://desidigg.slinkset.com
    http://southspace.co.cc

    ReplyDelete
  28. I have search this article. And I found in here. Thank's a lot.

    ReplyDelete
  29. extremely complicated process...very annoying....im lost at step 3...HELP!!!!!!!

    ReplyDelete
  30. welcome to the wow power leveling cheap Wow gold service site, buy cheap wow gold,wow gold,world of warcraft power leveling buy wow gold

    ReplyDelete
  31. Hi, so I tried uploading the .xml file to the 'html' section, and I get an error. I searched around a bit and I found a lot of people with the same problem, because lately blogger isn't working with uploading your own templates. Any help?

    ReplyDelete
  32. Congratulations!.. ashwini. Very nice job. Thanks for sharing.

    ReplyDelete
  33. fantastic...easy to follow...implemeted it in no time all...thanks matey..

    ReplyDelete
  34. Hi good explanation actually i was looking for this since 6 months and now found answer. but in my template its startside and endside so i dont know how to do pls help me


    #sidebar-wrapper {
    display: inline; /* fixes a strange ie margin bug */
    float: $endSide;
    margin-top: 0;
    margin-$endSide: 3px;
    margin-bottom: 0;
    margin-$startSide: 0;
    width: 269px;
    color: $textColor;
    line-height: 1.4em;
    font-size: 90%;
    background: url(http://www.blogblog.com/thisaway_green/bg_sidebar.gif) repeat-x $startSide top;
    word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
    overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
    }

    #sidebar {
    padding-top: 7px;
    padding-$endSide: 11px;
    padding-bottom: 0;
    padding-$startSide: 14px;
    background: url(http://www.blogblog.com/thisaway_green/bg_sidebar_arrow.gif) repeat-y 179px 0;
    }

    #sidebar .widget {
    margin-bottom: 20px;
    }
    thanks in advance

    ReplyDelete
  35. Weaknesses of World Of Warcraft Gold the client-server model used by World of Warcraft have been wow power levelingexploited in order to crash the cluster of servers that aoc goldmake up a realm. Exploits also include characters being able to instantly Cheapest Wow Goldchange location or teleport. The situationbecame worse cheap wow goldwhen trying to coordinate activities across a number of playersor guilds on the same realm.World of Warcraft Lead Producer, stated that new realms would be introduced to warhammer goldrelieve the burden on existing ones. Existing realms would be upgraded.

    Although the game wow gold follows a similar model to others in the genreand was noted for having wow gold cheapmany familiar concepts from roleplaying games, the new approaches gold4powerto reduce pauses between game encounters was well liked. At various times, World of Warcraft players have experienced problems with connecting to and logging in to wow gold for sale the game. Sudden server crashes that would force realms offline also occurred.

    ReplyDelete
  36. i used the template but it also stacks if you remove the profile part of your blog...great stuff though, I always wanted 3 columns and now I do! :)

    ReplyDelete
  37. Still looking for an aswer to Step 4...:(

    ReplyDelete
  38. I keep getting a message that says:
    More than one section was found with id: sidebar. Section IDs should be unique.

    Even after I made sure to put "right" or "left" before them!

    ReplyDelete
  39. I follow everything perfectly, BUT it's not giving me a left sidebar. Can you help? Thanks.

    ReplyDelete
  40. i don't get the steps, especially the first one

    ReplyDelete
  41. This post is really brilliant

    Thanks budy thank you very much

    ReplyDelete
  42. hi, thanx for very nice information.

    ReplyDelete
  43. Thanks so much!! You psot helped me to create the sidebars I wanted!!

    ReplyDelete
  44. Here’s a list of tools you will need to start: Jewelers’ pandora jewellery wire cutters - If you can only afford one pair, get memory wire shears. pandora charms These are designed to make clean cuts on tough memory wire, so can also be used for pandora charms uk softer wires. Chain-nose pliers sometimes called cheap pandora charms needle-nose pliers – Very versatile for picking up and grasping small items, pandora charms sale bending eye pins, closing jumps rings, even closing crimp beads. discount pandora charms Round-nose pliers – Used for creating loops on beaded head and eye pins. Can also be used for winding your own jump rings and as the second pliers you’cheap pandora ll need for closing jump rings. Optional pliers – Wire-looping pliers which have several graduated circumferences to allow you to form perfectly uniform jump rings and loops in place of the pandora discount uk round-nose pliers mentioned above. Crimping pliers which have little notches to allow you to both flatten a crimp bead and then bend it to form a rounded finished look instead of the flat crimp you pandora uk get using the chain-nose pliers. As for materials, I recommend some assortment packs of beads in coordinating colors, some decorative metal spacers, seed beads in both silver and gold These can serve as spacers and beautifully set off pandora sale your other beads., tube-shaped crimp beads Buy the best you can find – these are what hold it all together!, head and eye pins. Other than that, let your choice of project be your guide. You might want some silver or pewter charms.

    ReplyDelete
  45. Great post, very useful.. thanks for the tip :)

    ReplyDelete
  46. The symbol pandora bracelets of trustworthiness, faithfulness, and fidelity. pandora jewellery It was thought that the fourth pandora charms finger contained a special pandora canada vein that was connected directly pandora shop to the heart, and therefore cheap pandora this became the official finger for pandora necklaces the wedding band..Rings pandora sets have been used as a symbol of pandora earrings love for many years. To purchase a pandora sale large diamond, you would have a diamond that is pandora beads quite rare. This is shown in pandora 2010 theprice of a diamond ring that highlights pandora bangles a 2-caret gem versus a ring that has cheap pandora canada two 1-caret stones set in the cheap pandora beads center.

    ReplyDelete
  47. EVISU ジーンズ 価格Serial denim entrepreneur Scott Morrison is at it again.EVISU ジーンズ 直営店 He's the co-founder behind both Paper Denim and Cloth and Earnest Sewn, and was CEO and creative director for Evisu before they shuttered their US business and moved the entire operation to Hong Kong. Now,エヴィス ジーンズ 店舗 he's launching a new line of denim called 3x1エヴィス ジーンズ.

    ReplyDelete
  48. Thanks for sharing these information!!

    ReplyDelete
  49. Thanks a lot, will use this code on my blogger blog. However, you might get interested on some Wordpress theme where second taskbar is already fixed.

    Real Flight Simulator

    ReplyDelete

Post a Comment

Please avoid hyper links in Comments. Any offensive comment will be deleted

Popular posts from this blog

New blogger templates (XML) 3 columns

Why I do not shift to a custom domain

Blogger introduces inline comment form