96 Creating a three column (or a wide, two column) canvas - Blogger template design series
January 17, 2008 /

When I begin to design a new Blogger template, the first thing I take into consideration is the overall layout. Creating the perfect layout is crucial to the design process, and should be the first step in designing a custom Blogger template.

The most popular layout styles for Blogger blogs are:

  • Three columns, with sidebars to the left and right
  • Three columns with two sidebars to the right
  • A wide two column template, with a wider posts area and a wide sidebar to the right

So in this installment of the Blogger Template Design series, I will offer basic instructions for how each of these layouts can be constructed. Then in the next installment, I will focus on tweaking these layouts in order to make the canvas complete.

For the purpose of this series, I have created a demonstration blog which you can view here. This demonstration blog will be used to demonstrate customizations throughout the series, and will include links back to each chapter of the series for your reference.

Things you should consider when deciding on your blog layout

Visual appeal is not the only thing you should consider when deciding which layout you will adopt for your template. The three different styles I highlighted above can all serve different functional purposes; depending on you wish to display in your sidebars, one or other may be better suited to your needs:

  • Three column templates with sidebars to the left and right are best suited to blogs which don't use many Javascripts or images in the sidebars.

    This is because Javascripts and images call upon different servers and slow down page loading time. If you have many scripts or images loading in the left sidebar, this can delay the loading of your posts, which is off-putting for new visitors to your blog (especially those who access the Internet through dial-up!)
  • Three column templates with both sidebars aligned to the right are a good choice for blogs which feature a lot of different content in the sidebars.

    This style helps neaten the content of sidebars, prevents lengthy loading delays of the blog entries (the primary content) and stops the sidebars from becoming too long in relation the main content on post pages.
  • Two column templates with a wide posts section and wide sidebar are most suitable for those who feature ads in the sidebar, or who need much content to be "above the fold" of the page.

    Wider sidebars allow for wider ads, or rows of the popular 125x125 square ad boxes which can feature higher up the page. Also, it is easier to display wider images, or text blocks. A wider posts section will also allow more content to be featured above the fold, and can prevent home pages from becoming too lengthy.

With this in mind, let's take a look at the different methods available for creating a template canvas.

The best way to create a customized template...

Is to base this on an existing template!

Blogger templates contain a vast variety of tags and code, which is very difficult to reconstruct by hand. By basing your customized template on an existing template which already has tags and code in place, you will make the job much easier for yourself, and will save hours (if not days) of time troubleshooting a hand coded template.

The recent poll I offered concluded that the most familiar template to Blogger Buster readers is the Minima template, so for the purpose of this series, I will base all tutorials on modifications of this template. By the time this series is complete, the resulting "demonstration" template will not resemble Minima at all!

Before we begin!

I would strongly recommend that you use a test blog to create your customized template rather than interfere with your main blog. For more information about test blogs, take a look at this post, or read through my guide to essential tools for customizing Blogger templates.

If you choose not to use a test blog, you must back up your existing template before making any changes to it!

From this point forwards, I will assume that you are either using a test blog to create your new template, or that you have fully backed up your existing template.

Making a wider template

Over the years, the default Blogger templates have not changed much. Aside from the stretch designs (which are designed to accommodate the entire width of the browser window), most are rather narrow when compared to the size of most readers' browser screens.

So the first thing we will do to the Minima template is make it wider. The resulting width will then be large enough to include either two sidebars (instead of only one), or alternatively a wider posts column and a thicker sidebar.

The optimum width of a blog template

Most modern blog templates, whether hosted on Blogger, Wordpress or Typepad platforms, are between 800 and 950 pixels wide. This seems to be the optimum size range for blog templates, as this width can accommodate two sidebars or an expanded entries column.

I would recommend that you make your template no wider than 950 pixels. Even though this width may not fully span the width of your own browser window, you can be fairly certain that it will not run off the screen of smaller browsers.

In these tutorials, I will show you how to create a blog layout which is 950 pixels wide, though you can certainly make this a different value if you prefer.

Alter the outer-wrapper

The overall width of the Minima template is determined by the "outer-wrapper" div. This is styled within the <b:skin> section of the template as follows:

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

To change the width of the template to 950 pixels, we simply need to change the line highlighted in red to this:

width: 950px;
After this change, my demonstration blog now looks like this:

As you can see, there is now a wide gap between the posts column and the sidebar. We can fill this gap by using one of these methods:

  1. Creating a second sidebar
  2. Widening the main posts column and the sidebar

Depending on your choice of blog layout, you will need to use one of the following methods for your custom template.

Creating a three column template (with a second sidebar)

Although I have previously written a post about this method, I have decided to revamp my method here to add some extra functionality to the finished template.

In this tutorial, we will create the following dimensions in the layout:

  • Two sidebars, measuring 250px in width
  • The main posts column will be 450 px wide

This ensures regularity of each element, and will make it easier to add margins and passing at a later stage.

Change the width of the sidebar

It is easier to change the width of the existing sidebar before we add another one. To do this, open your template (no need to expand the widget templates) and find this section of code in the <b:skin> section:

#sidebar-wrapper {
width: 220px;
float: $endSide;
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 */
}

Change the line highlighted in red to this:

width: 250px

Your sidebar will now be slightly wider.

Adding the style for the second sidebar

Before we can call the secind sidebar in the blog template, we will need to add the styling for this sidebar, and make it unique.

Find and copy this whole section from your template (this is the section we modified in the previous step):

#sidebar-wrapper {
width: 250px;
float: $endSide;
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 */
}
Once you have copied this to your clipboard, paste this section of code immedietly beneath the original set of code. Then change this line in your newly pasted code:
#sidebar-wrapper {
To say this instead:
#new-sidebar-wrapper {

This is the identity of the div which contains the sidebar wrappers. Each div element which has an ID must be unique and should only be called once within the page. By adding the "new" part to the title of the style for the div, we can ensure the new sidebar will display properly.

If you want your second sidebar to fleat to the right of the main posts column, you can leave the styling as it is.

However, if you prefer the sidebar to appear to the left of the main posts column, you will need to change the following line:

float: $endSide;
To this instead:
float: $startSide;

This will ensure that your new sidebar will float to the left.

Calling the second sidebar in your blog template

To call the secind sidebar, we need to add a section of code to the actual template section. The location for this code changes depending on whether you wish the second sidebar to be aligned to the left or the right of the main posts column.

There are two possible locations for this second sidebar. Assuming you have not added any extra widgets to your Minima template, you will be able to find the following section of code in your Blogger template (do not expand the widget templates):

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>

<!-- Insert code here for left sidebar -->
<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>

<!-- Insert code here for right aligned sidebar -->
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>
I have included some comments here to show where to paste the following code, depending on your choice of alignment. When you have decided where you would like your second sidebar to appear, copy and paste the following section of code in the appropriate place:
<div id='new-sidebar-wrapper'>
<b:section class='sidebar' id='new-sidebar' preferred='yes'/>
</div>

You should save your new template at this point.

There is currently no content in this second sidebar, so if you preview your blog, nothing will be displayed in it's place. But if you go to Template>Page Elements in your Blogger dashboars, you will see a new "Add page element" section. Here you can add a new widget and take a look at your blog to see how it will be displayed.

In my demonstration blog, I added the new sidebar to appear to the right of the main column which now appears like this:

Change the width of the main posts column

The final customization to this three column layout is changing the width of the main posts column slighly to make better use of the space available.

This is another simple edit. Simply find this section in the <b:skin< section of your template code:

#main-wrapper {
width: 410px;
float: $startSide;
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 */
}
Change the line highlighted in red to the following:
width: 450px;
Then save your template.

The finished result should look something like this:

You will notice that there is no space between the sidebars or main posts column. To make space appear between each sections, we will need to use margins and/or padding in the style section, which I will demonstrate in the next chapter of the Blogger Template Design series.

Creating a wide, two column template

Creating a wider template with added space for the main posts column and sidebar is a much simpler process.

In this example, we will make the width of the posts column to 650px, and the width of the sidebar to 300px. You can change these values if you prefer, so long as the total of these two sections is 950px.

Assuming you have already changed the width of the "outer-wrapper" to 950px, you will now only need to make two small edits to the style section of your template.

Change the width of the main posts column

The width of the main posts column is defined in the following section of code:

#main-wrapper {
width: 410px;
float: $startSide;
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 */
}
Simply change the line highlighted in red to this:
width: 650px;

Change the width of the sidebar

The width of the sidebar id defined in the following section of code:

#sidebar-wrapper {
width: 220px;
float: $endSide;
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 */
}
Again, you only need to edit the line in red to say the following instead:
width: 300px;

Finally, save your template and take a look at your newly widened blog. If you have used the same values as I did, your new template should appear like this:

As with the three column layout, you will notice there is no space between the sidebars and the main posts column. We will work on optimizing this canvas in the next installment of the Blogger Template Design series.

Final words

For your convenience, I have made each of the template layouts described above available for download as an XML template. To download any of these files, right click on the link and choose "Save As..."

Progress of the demonstration blog

For the demonstration blog which will accompany this series, I have chosen the three column design where the two sidebars are aligned to the right. You can view the progress of the Blogger Template Design Series blog using this link.

Coming soon

In the next installment of this series, I will explain how you can further modify this basic canvas to suit your requirements. This will include modifications to the margins, padding and the header section, plus a few other elements of the blog's style.

Please consider subscribing to the feed for updates to the Blogger Template Design series, plus Blogger related news and articles as they are posted.

Author: Amanda Kennedy

Amanda is a professional blogger and web designer living in Sheffield, United Kingdom.

In addition to curating Blogger Buster, you can find Amanda on Twitter, Facebook or add her to your circle on Google+.

Like to share?

You may also like to subscribe to Blogger Buster's RSS feed or receive free email updates of our latest posts.

96 comments:

  1. Hey Amanda, this is seriously very helpful. I've been following your series with my eyeballs glued to the screen! I noticed some typos you made and thought I'd point it out.

    float: $startsideSide;

    And you forgot to change this:
    width: 410px;

    to this:
    width: 450px;

    I got a bit stuck in these parts and checked it up.

    Well, i can't wait for your next post! Thanks again for the current one! It's totally cool!

    ReplyDelete
  2. Hello Fabler,

    I'm really happy that you found this post useful!

    Thank you for pointing out the typos. I have edited these now so hopefully the whole tutorial(s) make sense now. It was rather late at night when I managed to finish this one, and I was rather tired. My apologies for any inconvenience this has caused.

    Best wishes.

    Amanda :)

    ReplyDelete
  3. Hi Amanda!
    I´m really glad with the opportunity to learn how to build a template. I´m following your steps! Thank you very much! :)

    ReplyDelete
  4. Hello Amanda,
    I came upon your site a few days agao. I am very impressed with your content and design.
    I tried your 3-column(side bars on left and right, they work fine in the browsers, but when I go to the "view layout" screen, the right section is all but missing. I tried changing a few sizes, no change. What am I missing.?? Thank you.

    ReplyDelete
  5. Richard: It works on my testblog ... the 2. sidebar elements just landed on the right side below the post element.

    Amanda: Keep on going. No more about sleep *brews some coffee* ;-)

    ReplyDelete
  6. Thanks for info, I likes your blog.
    It's the best way for modify the blog.
    I'll be back!!!

    ReplyDelete
  7. Your tutorial was great! I will check back in from time to time to see what else you come up with.
    Thanks!

    ReplyDelete
  8. This is a very informative blog! The only thing I have been unable to find information about is how to widen the template and keep the rounded corners and not have a split in the sidebar. If you visit my blog, theanimaladvocateblog.blogspot.com, you will see what I mean. I am fed up, so I just left it that way until I figure out how to fix it. :P

    Anything you can tell me would be great.

    Keep up the great work! :)

    ReplyDelete
  9. Thank you for making it SO EASY for us newbies!!
    One of the easiest tutorials I've found (and I've done a LOT of searching!)

    ReplyDelete
  10. Thank you so much for the wonderful instructions! I'm just wondering if I can use these same directions for the Rounders Template? Thanks!

    ReplyDelete
  11. ...oh, one more thing, if someone is looking at my page with the Firefox Browser, they can't see any html elements and my right column is pushed completely down to the bottom...any suggestions? Thanks again!

    ReplyDelete
  12. Hi Amanda,

    I really enjoy your website and have found some very useful tools for my own blog. I do have a question about the three column split template that I hope you can help me resolve. I was able to get it all split correctly but when I go to add a page element and then to picture...it won't upload the picture. I get this message: This image could not be uploaded due to an internal error. Any suggestions? I used to work fine so I am wondering if I missed something. Thanks for all your help.

    ReplyDelete
  13. For the Gleaves Family: The procedure for the rounders template is quite similar, though you may need to duplicate the code for both upper and lower sidebar elements. Let me know if you have problems with this.

    For the sidebar problem you mentioned in your second comment, the easiest way to fix this is to add a little extra width to the "#outer-wrapper" section. This will allow more space for the sidebar to appear to the side of the main posts column, rather than being pushed beneath it.

    Hope this helps!

    For Bryan and Laura Taylor: Blogger was experiencing some server problems and for a while no-one was able to upload images at all (as widgets or as features in posts). By now this should be resolved, though you may need to refresh your browser (press F5) if you're still experiencing problems with this today.

    Best wishes and thank you for your comments :)

    Amanda

    ReplyDelete
  14. Amanda, thank you very much for this useful tip. Thank also for the great website you have.

    I have made three columns layout based on your tutorial. They look great. However, there is a small problem with my site regarding the main bar. It's not in the middle but it's too close to the left side bar. I want to have the same margin between left and right sidebar with the main bar. would you be kind enough to let me know how to solve this problem?

    thank you very much.

    Nico

    ReplyDelete
  15. thanks again. I already solved the problem based on your padding and margin tutorial. thank you very much.

    Nico

    ReplyDelete
  16. For Nico:

    Sorry for the delay in getting back to you about this (I'm still working my way through a backlog of comments!).

    Glad to see you have managed to solve the problem using a different tutorial though. Feel free to drop me a line of you need any further advice :)

    ReplyDelete
  17. Can you adjust the width by percentages instead of pixels? Not everyone has the same screen size.

    ReplyDelete
  18. Hi Amanda,
    You are my blogger guru. I love what you are doing here. It is so helpful and time saving for a newbie like me.
    Thank you so much
    -Aparna

    ReplyDelete
  19. Thank you so much Amanda, I know that you receive thousands of mails form people that do no use xhtml like me, but thank you very much again. One complaint about my blog from friends was the never-ending posts; with this tool I reduced it. Thank you again, visit my blog and comment!

    ReplyDelete
  20. Thank you for this wonderful tutorial and the following one that helps with spacing. I have no previous html experience and I now have a perfectly spaced three column blog. I've been wanting to learn how to do this for a long time. Thanks again.

    ReplyDelete
  21. I love the background image to my blog @ http://openyourhearttothelove.blogspot.com, however, I really need another column (it's just 2 column), and would like to put the column to the right. The problem is that my background image consists of a woman's face on the right hand side. and the column would need to start below this face. Is this possible?

    ReplyDelete
  22. Hi Amanda,
    your tutorials are a blessing for someone who wants his blog to be a part of his website and match it's design!
    I've been looking all over for something like that but all I were finding over and over is more of the "free templates" stuff or offers to create a custom blog design for me. What about us, who want it DIY way?
    You're brilliant, your tutorials are crystal clear, easy to understand and easy to implement.
    Did you ever think about doing it the same style with MySpace? Many of us need it really badly, - for the same simple reason having a need to promote our brand trough matching design of our websites, blogs, myspace pages and other social media places... Or maybe you know someone else who have Myspace design tutorials we can use?
    xoxo,
    Tanya

    ReplyDelete
  23. THANK YOU SO MUCH! I spent 3 hrs google searching blogger templates when all I wanted to do was widen the inside table of the layout I already had. Every site wanted me to download this and that. Your tips took me 2 seconds to get the results I wanted. Thumbs up!

    ReplyDelete
  24. Great stuff! Thank you. I've downloaded your Ebook, and this helped me a whole lot!
    Gail

    ReplyDelete
  25. Dear Amanda, this is great!!!!!!!!! Thank you so much!!!!

    ReplyDelete
  26. This was so helpful! Exactly what I've been looking for and you did such a great job describing it. It took me 5 minutes, when the other tutorials I was looking at were just wasting my time.

    ReplyDelete
  27. Thanks a lot for the tutorial Amanda. It was a cake walk to change the template from 2-column to 3 column.
    Thank you very very much :)

    ReplyDelete
  28. I have followed your WONDERFUL instructions to add a third column on the right side of my blog. You said:

    There is currently no content in this second sidebar, so if you preview your blog, nothing will be displayed in it's place. But if you go to Template>Page Elements in your Blogger dashboars, you will see a new "Add page element" section. Here you can add a new widget and take a look at your blog to see how it will be displayed.

    However, when I go to the Page Elements screen, there is nowhere for me to add content to that column... there's a lot of space displayed there, but nothing else. Did I miss a step? I use Mozilla Firefox... does that make a difference? Please help.

    Thanks so much.

    ReplyDelete
  29. Oh, never mind... even though it doesn't show two columns on the Page Layout screen, I figured out that if I just drag some widgets to the bottom and others to the top then they'll display in separate columns. Thanks again!!!

    ReplyDelete
  30. thanks Amanda
    it is very helpful...you explain it clearly.

    ReplyDelete
  31. Between each widget i have a line, or border. i dont really know. its at the end of the widgets. could you help me on how to get it removed.

    thanks

    ReplyDelete
  32. Amanda, thanks for the instructions. I now have a 3 column blog. The only problem is I can't get the columns spread evenly. The 2 sidebars on the right are too close together and I would like less wasted space in the outer margins. I guess what I'm saying is,can all 3 columns be spread and spaced equally with little wasted on the margin? I've my code like this now:


    * Outer-Wrapper
    ----------------------------------------------- */
    #outer-wrapper {
    width: 950px;
    margin:0 auto;
    padding:10px;
    text-align:$startSide;
    font: $bodyfont;
    }

    #main-wrapper {
    width: 450px;
    float: $startSide;margin-left: 10px;
    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-wrapper {
    width: 220px;
    float:$endSide;
    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 */
    }



    #leftsidebar-wrapper {
    width: 220px;
    float:right;
    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 */
    }


    I'd like it to look like this:

    http://fromayellowhouse.blogspot.com/

    only with both side bars to the right. Can this be done? Thanks.

    ReplyDelete
  33. have to say thanks sooo much for the tutorial-- it was exactly what I was looking for!!!

    ReplyDelete
  34. Hi Amanda,
    It has been a very rewarding experience browsing your site and I have picked up quite a few hacks and tips. An ever big thanks from me again!!

    I have but one query which needed your kind attention. I have downloaded your "Three column canvas, both sidebars to the right" and changed my site to your template successfully. On the layout view there are 2 Blog Posts section. The extra Blog Posts part is at the 3rd column sidebar. I am wanting to know if posts would appear here too!! If it serves its purpose just how do I get posts to appear at this sidebar?

    Looking forward to your answer.
    Regards,
    Shrek from MyBlogLog

    ReplyDelete
  35. Hi again Amanda,
    Regarding the double Blog Post in layout view, I have identified it to be the "Related Articles" Widget by Hoctro's Place when I wanted to shift this widget today.
    Thanks for all!!
    Regards,

    Shrek from MyBlogLog

    ReplyDelete
  36. Good afternoon Amanda,

    I tried wrapping AdSense Ads around Blogger post content in your three column canvas, both sidebars to the right . But resulted in pushing the 3rd column(sidebar)under.

    I inserted Google code into the template BEFORE the line of<data:post.body/> parse with your Blogger AdSense Code Converter.

    I added <div class='post-body entry-content'>
    <div style="float: left;"
    to the front & </div> at the end - like this:

    <div class='post-body entry-content'>
    <div style="float: left;"
    Google Ads
    </div>

    The ads only shows at the item page(therefore front page is not affected) as it should but with the the 3rd column(sidebar)underneath. Removing the codes added to Google Ads resolved the issue. The ads shows in the content unwrapped without any more problem.

    Is there any workaround to have the ads inline wrapped but not distorting the sidebar?

    Many thanks again!
    Best Regards,
    Shrek from MyBlogLog

    ReplyDelete
  37. Amanda, your contributions has motivated many including myself to make our blogger template more interesting. You have certainly make it easier for us to customize it to our imaginations!! I say thanks here and there!!

    with reference to the inline Ads in the content at item page, I am wondering if reducing the sidebars width and increase the main post column width more would allow wrapping the content beside the ads? I guess I shall take the option in your How to set up a test blog (and why you may want to use one).

    Regards,
    Shrek from MyBlogLog

    ReplyDelete
  38. Thanks so much for this column. Found you thru google and you helped me change my blog so that I could widen my column to support the new wider format of youtube's videos. You made me brave!

    ReplyDelete
  39. Exactly the page I was looking for. I know very little about HTML and CSS and found this page a while back. Thank god I found it again. You are a life saver.

    ReplyDelete
  40. I am using animated tags in my blogs they are really good and working.I just want to thank you for giving me that code.

    http://add-blogbanner.blogspot.com

    ReplyDelete
  41. That was so simple & quick. Loved the tutorial, everything was v. clear. Thanks, subscribed!

    ReplyDelete
  42. THANK YOU SO MUCH!!! I have sat here for over 2 hours trying template upon template at diff. blogs and NONE of them worked. This one worked like a charm first try. YAY!! =)

    ReplyDelete
  43. Wow, this is great stuff and has really helped me with my blog design, thank you!

    One question though:
    "There are two possible locations for this second sidebar. Assuming you have not added any extra widgets to your Minima template, you will be able to find the following section of code in your Blogger template (do not expand the widget templates):"

    What code would I put where if I have added widgets to my blog for the two sidebar design?

    ReplyDelete
  44. Thanks so much for this! It was so eashe to do and my blogs look great--and they will look greater bacause I'm following your blog :)

    ReplyDelete
  45. Amanda, thanks so much for this tutorial. One strange thing did pop up, though, when I tried applying the tutorial to my actual blog. After I made my template three columns, a weird bug started to show up where the text of blog posts in my center column will vanish if you scroll to a certain point down the page, but they will reappear if you scroll back up. I'm not sure if it is related to altering my template somehow.

    If anyone has any ideas, I'd appreciate the help.

    http://losat.blogspot.com

    Thanks.

    ReplyDelete
  46. Thank you so much!
    Now off to find wallpaper that will work with the three columns...

    ReplyDelete
  47. Hi Amanda. I have a 2 sidebar on the right and a post column on the left already. Can I create a new side bar column BELOW the 2 sidebars, which has the combination of both width of the 2 sidebars. I want to add a music player which is quite wide :( I don't want to put it under my post or at the footer.

    visit me http://theperfect-sly.blogspot.com :)

    p.s thanks for the early tutorials i took! my blog is pretty thanks to your simple yet amazing explanations in your tutorials!

    ReplyDelete
  48. @Amanda,

    I know it's been a little while since you post this info, but I've recently used this info to widen one of the templates offered by blogger.

    One problem I've noticed now is that my page loads slower. It starts loading the original, narrow template then widens it in the last seconds. Do you have any suggestions on how to fix this?

    http://www.actionhealthylife.com

    Kind Regards, Sonja

    ReplyDelete
  49. Thanks for the tips and tricks, Amanda.

    You are amazing.


    Cheers!

    ZeeBigTourist

    ReplyDelete
  50. Amanda,
    Your site has been SUPER helpful & have been glued to it non-stop lately. Thank you for sharing.

    I used your tutorial for 3-column adjustment on the minima blogger template. And have run into a weird glitch with the header which I am hoping you can help me with.

    Despite using my own header image & clicking on the “use image instead of title & description” option it still shows up over my header image.(customize – page layout – header – edit). ???

    I am not sure why and quiet frustrated with this header conflict with no clue how to begin to resolve the issue. ANY suggestions would be GREATLY appreciated!

    Thank you in advance, Dyn
    www.superiotablog.blogspot.com

    ReplyDelete
  51. Wonderful information and it has immediately transformed my blog into something beyond the norm. Thank you a million times!

    ReplyDelete
  52. i've been trying to do the extra right hand sidebar for ages and scanned the web! your website had simple instructions and i got it done under 3minutes! thank you so much!

    ReplyDelete
  53. Comprehensive and clear.
    www.techieway.blogspot.com

    ReplyDelete
  54. Hey, deep thanks to you, your post helped me a lot...

    Now, I can feel better with the wider blog screen liked bigger home, hehe...

    http://galaxy6139.blogspot.com/

    ReplyDelete
  55. can you write a ebook on how to make a two column template? please

    ReplyDelete
  56. hi amanda thanks to your tutorial I can make my own three column template. but i got a question when I want to tweak the template offline I got xml parse error warning. can you tell me the problem with the code?

    thanks

    kandra

    ReplyDelete
  57. Amanda ~

    Thank you for all the wonderfuly well detailed instructions; unfortunately they didn't work for my blog... sigh...

    I'll keep on trying to see what it is I'm doing wrong.

    Best,

    Claudia

    ReplyDelete
  58. hi, can i ask a question?
    since i already have 2 columns for widgets (3 including 1 for post)
    how do i make 1 column larger than the other one?
    thanks!

    ReplyDelete
  59. Amanda ~

    Awesome work! I whizzed through your tutorials up until I reached the three column template. Reference instructions "There are two possible locations for this second sidebar. Assuming you have not added any extra widgets to your Minima template, you will be able to find the following section of code in your Blogger template... Some of my widgets carried over from my other blog. OOOOOOOh, what to do? As I grow old, so grows my brain.

    Also if I change the dimensions of my outer, header, footer sections to 750px, will this cause problems down the line?

    http://lucientestblog.blogspot.com/

    Lucy


    "http://lucientestblog.blogspot.com/

    ReplyDelete
  60. I, too, have been trying to understand the code for creating three columns for ages. And, have also scanned the web! Your website has simple instructions. I am up to the tutorial on
    "Adjusting Margins and Padding..." So far, so good--thanks a million! I have created a new blog and will post the url to it when I have it the way I like it. In the meantime, my blog before I read your instructions:

    http://iweararedhat.blogspot.com

    Lucy

    ReplyDelete
  61. hi

    how to insert an image in "title" section?

    http://dalilainreallife.blogspot.com/

    ReplyDelete
  62. iis not working 4 me
    can u edit my html code?
    plz download free template colibri n add a column at the left n mail me at master_ace_zero@yahoo.com

    ReplyDelete
  63. Thank you, thank you!! Your site has been an AWESOME reference for me. It took me a day to fiddle around with everything but I have changed my blog entirely and now it looks super cute thanks to your tutorials.

    Greetings from Germany
    -McKenna

    ReplyDelete
  64. Wow this was really helpful it worked for me, it was my first time doing this thing and it worked wonderfully. thank you so much God Bless you mightily,
    Thanks a trillion times

    ReplyDelete
  65. after nearly an hour trying to figure out how to make my main column wider, thank goodness I finally found your wonderful and very clear tutorial.

    ReplyDelete
  66. I followed these directions and it worked for me.
    Very helpful.
    Thanks for posting it.

    ReplyDelete
  67. how to make the center column load first??

    i created my own template with "Three columns, with sidebars to the left and right" ..
    i want the center column load first...

    please help me.. mail to ryansael@gmail.com
    thx before

    ReplyDelete
  68. As i use to think about creating Blogger templates, Today i am really happy to get the detail informations in your post. Thanks dear..

    ReplyDelete
  69. very very informative ...
    thanks ...

    ReplyDelete
  70. After many months of trying how do my blog with three column I have found the perfect one. Thank You so much, appreciated much :)

    My blog:
    http://theclassyandfabulouswomen.blogspot.com/

    My Shop blog:
    http://shoptheclassyandfabulouswomen.blogspot.com/

    Thank you again :)

    ReplyDelete
  71. Thanks for the post. I am having a problem lining up my left side with the right, even though I went through your instruction. I need to lower the left side. It sits too high up toward the ads/header. Could on of you take a look and see if you can give me an idea of where to look? I've been learning HTML over the last few months but still miss small things. Thanks!

    http://themagnificentjourney.blogspot.com/

    ReplyDelete
  72. thanks for the tutorial....it's helpful

    ReplyDelete
  73. I am thoroughly convinced in this said post. I am currently searching for ways in which I could enhance my knowledge in this said topic you have posted here. It does help me a lot knowing that you have shared this information here freely. I love the way the people here interact and shared their opinions too. I would love to track your future posts pertaining to the said topic we are able to read.

    ReplyDelete
  74. Thanks for taking the time to discuss this, I feel strongly about information and love learning more on this. If possible, as you gain expertise, It is extremely helpful for me. would you mind updating your blog with more information

    ReplyDelete
  75. Thank you for this great post that helped me widen the outer skin of my blog, though the instructions to widen the post text area, and to move to the right margin of my two sidebars hasn't worked. I suspect you are very busy, but any help with this final step of redoing my blog would be greatly appreciated. thanks! steven

    link to my blog

    ReplyDelete
  76. Hi, Please give me the new tips for wider my blog on blogspot. Because now the html code is change. here is my blog :

    http://masroland.blogspot.com/

    You can see that i use 3 coloms but in left coloums i see there is still more pixel that can used. But i can not setting it in blogger template disigner. Please help. Tq

    ReplyDelete
  77. Hi Amanda,
    I tried turning my minima blogger template into three columns but it got a little wacky. I have three columns at the top, two in the middle, and one at the bottom. If you have a moment, please check out my blog at tulipsandturnips.blogspot.com.
    I'd love to hear what you think about it! What I'd really like to have happen is Three columns all the way down but I would't mind having happen, three columns at top, two in middle, and three at bottom.
    Thank you so much!

    ReplyDelete
  78. Someone can help me plz! I have chose my favorite blogspot template, but I have a problem double "Body Post" area. When my blog list all of the posts, but it will continue with tha same posts from the end of the post.

    Take a look at my blog:
    http://maninho-bbg.blogspot.com

    I have make change on XML codes, but there is no change, still show the same problems.

    Thx

    ReplyDelete
  79. I seen that many users made three column templates because this kinds of templates of good for advertisement.In this template you add more ads as compared to other column templates

    ReplyDelete
  80. This comment has been removed by the author.

    ReplyDelete
  81. Hello Amanda,
    I want adding a column ...you can help me ???
    thanks you
    thanks you
    thanks you
    images demo :http://i1209.photobucket.com/albums/cc392/desunvn/untitled-1.jpg

    ReplyDelete
  82. This comment has been removed by the author.

    ReplyDelete
  83. I have widened my template, but there is still something wrong with the "boxes" that are part of the post and the sidebar. Would you mind taking a look? Any advice is appreciated.
    This blog post was very helpful for making the overall blog wider.
    Thanks!
    http://halcyontravels.blogspot.com/

    ReplyDelete
  84. the blog is interesting! thanks for sharing this useful info

    ReplyDelete
  85. you just saved my day! a big thanks to you!

    ReplyDelete
  86. I was looking for this tutorial for many days but i didn't found suitable one for my blog. I last i got you tip. thanks dude.

    ReplyDelete
  87. Hey Amanda I am really glad I found your blogs. Your are very neat and efficient at scripting and I've basically fallen in love with your tutorials.

    A friend of mine has came across a problem where her posts are being posted in the background column instead of the two sidebar columns. There were other errors I fixed but being a Java/Script coder I don't know what to do here. I don't want to change her template because it isn't my blog and she might not agree with doing so. SO there will would be a great deal of appreciation if you help me out, and I'll get her to link you and do a shout out on her blog (not much but it's the best I can offer :P). Thank you :) [this is my second day on Blogger btw]

    ReplyDelete
  88. Thank you ever so for you blog post.Thanks Again. Cool.

    ReplyDelete

Great! You've decided to leave a comment! Please bear in mind that comments are often moderated and that rel="nofollow" is in use and spammy comments will be deleted. Let's have a meaningful conversation instead. Thanks for stopping by!

Advertise on Blogger Buster

Browse through the Archives

All existing posts are still available to view while I'm working on the site, albeit seen in a much simpler interface. Feel free to browse through the archives to find tutorials, templates and articles to help you build a better blog:

Blog Archive

© Blogger Buster 2010 Home | About | Contact | Hire Me | Privacy Policy