86 Create Extra Columns in your Blogger Layout - Magazine Style!
July 09, 2008 /

One of the newest (and popular) trends of blog design is the magazine style layout. As the name suggests, this design style presents content in magazine format where extra columns and content are featured on the home page, offering readers an overview of the entire site.

At present, Blogger Buster's home page features a magazine style layout. Rather than display a list of recent posts in typical blog style, the home page summarizes the most recent post, followed by links to other articles by category, and additional information about the site.

Many readers have requested a tutorial to create a similar layout for their own Blogger powered blogs, so in this tutorial I'll explain how you can add extra columns and widget sections on your blog's home page to create a magazine style layout of your own.


How Magazine Style Layouts Work in Blogger

In this template (and also in the Blue Steel template), I have added extra widget sections beneath the main posts column. This allows me to add (or change) the content displayed on the home page from the Page Elements section of my dashboard, without having to manually change my template code.

Also, I have used the b:if function to prevent these widgets from being displayed on post and archive pages (where they are not required).

To create a magazine style for your own blog, you will need to make two main changes to your template:
Insert the code required for your new widget sections
Add relevant styling code to the <b:skin> section of your template to change how these widget sections appear.


In this tutorial, I will explain the simplest method of creating a magazine style front page. This involves adding two columns for widgets (to appear side by side) beneath the main posts section of your blog. Once you have added these sections, you can add widgets and change the settings for your blog to alter the appearance and overall look for your template.

Be sure to back up your existing template before making any changes! Then if you change your mind about your design (or make mistakes during the process) you can easily restore your template.

To make a back-up of your existing template, go to Layout>Edit HTML in your blog's dashboard and click on the "Download full template" link. This will save your template as an XML file to your computer.



Add new widget sections below your posts

To add new columns for widgets below your posts, we will need to add some code to the main posts section of your blog.

Go to Layout>Edit HTML in your blog template, and do not check the "expand widget templates" box. Then search for this section of code in your template:

     <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>

In your own template, this section may look a little different. For example, you may find <div id='main'> or <div id='content'> instead of <div id='main-wrapper'>.

If you are having problems locating this section, use your browser's search function to locate the phrase "blog posts" or "Blog1", and be aware of the surrounding b:section and div tags.

Once you have found this section in your template, you will need to copy and paste the following code just after the closing </b:section> tag and before the closing </div>


<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:section class='sidebar' id='magazine-left' showaddelement='yes' >
<b:widget id='Text51' locked='false' title='Test Title 1' type='Text'/>
</b:section>

<b:section class='sidebar' id='magazine-right' showaddelement='yes' >
<b:widget id='Text52' locked='false' title='Test Title 2' type='Text'/>
</b:section>

<div style="clear: both;"></div>
</b:if>
By adding this code, we have inserted two extra widget areas which contain a "dummy" text widget so you can preview their appearance. These sections are also contained in <b:if> tags, which determine they are only seen on your blog's home page.

At this stage, you can preview your template and will see these dummy widgets appear below your posts section. However, as we have not yet styled these sections, they will appear beneath each other rather than side by side.


Adding style to your new widget sections

Now that we've added the code required for our new widget sections, we need to add some styling code to ensure they appear side by side.


For this, locate the closing </b:skin> tag in your blog's template. Just before this tag, you should paste the following section of code:


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

Then preview your template. Now you should see your the titles for the dummy widgets appear side by side with a gap between them. These titles should have similar styling to your sidebar headings and match the overall theme of your template.

Once you are sure everything looks okay, you can proceed to save your template.

If you do receive an error when attempting to preview or save these customizations, click the "Clear edits" button and begin adding your code from the beginning, being extra careful when copying and pasting this code.



Adding widgets and styling your home page

Now that you have added the required code for your magazine style front page, you may want to remove the dummy text widgets and replace them with your widgets of choice.

Simply go to Layout>Page elements in your Blogger dashboard, where you will see your new widgets appear below the Blog Posts section like this:



Click on the edit link for the existing "Test Title 1/2" widgets, and choose to remove these if you prefer. Then add new page elements of your choice to customize the appearance of your blog's home page.

You may also prefer to limit how many posts are displayed on your blog's home page so that your new widgets will feature higher up on your blog's home page.

To change the number of posts which are displayed, go to Settings>Formatting and choose the number of posts to display using the first option on this page:



In many magazine style blogs, only one post is displayed on the home page, but if your posts are short, it should be acceptable to post more than one without affecting the overall look and style of your design.



More ideas for your magazine style design

If you want to take your magazine style design a step further, you may also like to check out these tutorials:

I hope this tutorial has helped explain how to add new widget areas for a magazine-style front page with Blogger. Please feel free to leave your comments and opinions below.

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.

86 comments:

  1. Hey Amanda!
    Again, thanx for this one, works great :-) as usual.

    Bye

    ReplyDelete
  2. Amanda, I can't see anything on your blog. Everything is brown-ish, the yellow background is missing as is some other things. This is happenning on and off lately - very frustrating :(

    ReplyDelete
  3. Fantastic! Thanks Amanda!

    Matt
    http://www.duelingtampons.com

    ReplyDelete
  4. You are gr8. That's why you always appear on my blog knowliz.com.

    Thanks for this one. I think if someone know how to play with blogger code, then the panels can be added on a fly. Isn't it...???

    ReplyDelete
  5. I am learning so much from you. Thanks!

    ReplyDelete
  6. Amanda re: Shia comment above on color problems - I noticed the same the other day - needed to restart the browser to remedy. I can see it fine now but you may want to look into it.

    i recently found your blog and it's great!

    ReplyDelete
  7. what a great post! I will surely try it out later.

    ReplyDelete
  8. Cool!! I don't know how I'll use it?? But I added it for "future proofing" ;)

    ReplyDelete
  9. Hope I can make my own theme now. Thanks

    ReplyDelete
  10. How to make a template such tht there has two posts columns, so tht the previous post goes to the sidebar instead of bottom..

    Did u get me..?

    ReplyDelete
  11. Hi Amanda,

    Sweet! I've been wondering how to do this and really appreciate this tutorial!

    I'm going to implement several of your tutorials today and see how they go!

    By the way, do you know how to limit the number of "labels" blogger displays without having to use a "cloud widget"?

    Thanks,
    Scott
    http://arriive.blogspot.com

    ReplyDelete
  12. This is really great and easy to follow. Thanks!

    ReplyDelete
  13. I just came across your blog and subscribed! I wish I had found you earlier. Your blog is a shining example of how Blogger blogs can look really good (ie like Wordpress blogs) with a bit of know how.

    ReplyDelete
  14. b\nice post but i am using wordpress converted template for my blog. I could not find above code there... There is any other way to do following in wordpress converted blogger theme
    My Blog

    ReplyDelete
  15. great blog...and great tips... i will try this on blog...i was looking for something like this...

    http://free-downloadz.blogspot.com

    ReplyDelete
  16. I revamped my blog yesterday referring to this post.

    Thanks.

    ReplyDelete
  17. I inserted the code for the magazine style format, but the two widgets overlap. There is no buffer space between them.

    ReplyDelete
  18. Hi Amanda, thanks for a great tutorial! I tried it in my food blog and it was a breeze. Do you have a tutorial on adding widgets for square ads? Thanks for sharing your knowledge!

    ReplyDelete
  19. That's cool Thank you so much..
    Your tutorial help me enjoy changing style I desired..

    ReplyDelete
  20. Hi Amanda,

    Do you know how to convert the Snapshot Madder template to 3 columns? Trying to accomplish this on my blog, "3 Troopin' Travelers". Feel free to email me at troopintravelers3@gmail.com, if you have the time/advice!

    Thanks,
    Suz

    ReplyDelete
  21. this is great amanda! Is there a way to add three columns to my sidebar? I want one large column at the top to display page elements side-by-side, and then two columns BELOW that first column. Any ideas?

    ReplyDelete
  22. Hi Amanda,

    the solution you provided is great. And it's working well with non cusomized blogger template. But when I tried to expand the blog to 990 px and made other changes to post width, sidebar width, the sidebar sinked to the bottom.
    See for yourself, I want to put it back in the line with upper line of post space.

    http://blog24hrs.blogspot.com/

    pl help

    ReplyDelete
  23. Hi Amanda, do you know how my widget got moved to the bottom of the post area? I didn't put them there. Can you please tell me how I can fix the problem. Tnanks a million!
    http://odivah.blogspot.com.

    ReplyDelete
  24. It worked great, only I want the columns at the top of my blog, before the posts...ideas?

    ReplyDelete
  25. K. Now these tips look great. I was wondering how i'll add widgets at the footer in two or three rows

    ReplyDelete
  26. And how to add new widget sections ABOVE the posts? Please answer :)

    ReplyDelete
  27. Nevermind I figured out myself.

    Anyway good post it helps, thanks! :) Just a little incomplete.

    ReplyDelete
  28. Visare, can you let me in on the secret of putting columns above the posts? I moved mine up, only now they aren't side by side anymore...

    ReplyDelete
  29. Thx for sharing..it works great..

    ReplyDelete
  30. HI Amanda,

    It works great, is there a way to make a third column. so it will total to three!

    Thanks

    ReplyDelete
  31. I used in my site lot of thanks

    ReplyDelete
  32. AMAZING! I'm DEFINITELY checking this one out. Thanks!

    ReplyDelete
  33. THanks for sharing this. This is really helpful.. Thanks! :D

    ReplyDelete
  34. Thanks. It helps a lot to make my blog navigation useful.

    ReplyDelete
  35. thanx!! it helped me to modify the simple II template into something more appealing on one of my blogs.

    ReplyDelete
  36. Hi Amanda,

    I have to say yours is the most engaging, informative and motivating blog for newbies in blogger. Thank you, thank you, thank you...

    ReplyDelete
  37. Very clear instructions, I have been able to implement it within seconds

    thank you!

    ReplyDelete
  38. really great work. long time i searched this code. now i got it. thaks to blogbuster.

    Free resources, free downloads, free stuffs @ http://simplygetit.blogspot.com/

    ReplyDelete
  39. This is great! So how would I add a third section? So there were 3 columns under the post rather then just 2.

    ReplyDelete
  40. Thanks for this!!Beautiful!!!!
    How can i add new widget sections above posts??....

    ReplyDelete
  41. My widgets show in the layout, but not on the preview, even when I save the template, and on the layout, they are not side by side. I'm not using a standard template, but the sections are the same.

    ReplyDelete
  42. I was trying to figure out how to make columns in my posts and I used this as an example. It really helped me out thanks!!

    ReplyDelete
  43. Hi,

    I need to know how to keep single column on the side of the template, and make two column under the single column for some widgets. Please give me the way to do it.

    Here is a blog I want to make 2 extra column under or between single column on right side template: http://atlascommunity.blogspot.com/

    thx

    ReplyDelete
  44. I used this a long time ago and I am so glad that you still have it active. Works very well with single column templates just wish I had the confidence to go further with editing. Thanks for keeping this one active.

    ReplyDelete
  45. Hi, My blog is using the 2 column template so the 2 column below the post appears squashed & of different length. I have left them one below the other. Is there a way to adjust the length so that it doesn't disappear behind my sidebar? I've tried changing the width but it doesn't help.

    Would like to know, what is the code to make this appear on all pages instead of just the home page. Could you please give me the code?

    My blog is http://cheaper-books.blogspot.com

    Thank you.

    ReplyDelete
  46. how to make column to a post like in office?
    many thanks

    ReplyDelete
  47. This is very very helpful....I applied it into my blog...but my problem is I cannot delete the vertical broken line into my blog...I appreciate your help..thanks in advance

    ReplyDelete
  48. Love it...thanks for showing how to do this, I've wanted a customizable home page for quite some time.

    ReplyDelete
  49. I tried and this is done like i want. thanks :)

    ReplyDelete
  50. Magazine and news-style layouts are becoming more and more popular. Adapting these designs has become so easy, any average looking website can convert to it with the utmost efficiency. These designs are proven to be an effective way to catch visitor's attention and appeal.

    ReplyDelete
  51. Thanks, it worked! Now how do I add a center gadget to have 3 under my posts? I tried my own ways to add another but failed. Any help?

    ReplyDelete
  52. Hi there,

    I managed to get gadget under posts...
    but it is not dividing into 2 columns..I followed this tutorial step by step.
    Can you please help me

    http://www.dazzleandsizzle.com

    ReplyDelete
  53. Thanks to share with us the information. I wish you good luck!

    ReplyDelete
  54. hi! do you have tutorial on how to modify my homepage post to make two columns?
    i'm looking this all around the web. I landed here.

    awaiting respond,
    xxxmehide.blogspot.com

    Mark

    ReplyDelete
  55. ooking for power and stability. By following safety guidelines, using a trampoline can be a safe and fun activity for your entire family.. This creates a magnetic force that encourages continual motion. Puma Ferrari Shoes.


    Article Source: http://www.opumashoes.com/

    ReplyDelete
  56. Hey Amanda How to add custom columns in blogger template?? Like i want 2 columns to appear first then again a usual one column and again 2 columns... plz guide me

    ReplyDelete
  57. Thanks buddy
    its perfectly working...

    ReplyDelete
  58. how do i add a sidebar to my blog(geektuts.org) so that i can add skyscrapper ads? thnx

    ReplyDelete
  59. Hi Amanda,

    It's very useful blog manual. I've been trying to follow the instruction until I found that the 'Test Title 1' appears full length beneath the blog post, and the 'Test Title 2' appears half length (45) beneath the Test Title 1. I have no idea about this. Please help me. Thank you Amanda.

    ReplyDelete
  60. Hello Amanda.

    Thank you for this post. You said:
    "To add new columns for widgets below your posts, we will need to add some code to the main posts section of your blog."

    Is there a way to put ads in the side bar area and at the top of the Magazine Home style page ? It seems there's a lot of wasted space on 'both sides'.

    Thank you

    Michael Stone

    ReplyDelete
  61. This is to hard to do:(

    ReplyDelete
  62. nice blog... thanks for sharing..

    ReplyDelete
  63. This post have helped me tons of time

    Thanks a lot :)

    Do visit my blog HPBolly

    ReplyDelete
  64. http://ayyantholonline.blogspot.in/
    thanks........

    ReplyDelete
  65. Dear I can't do it please help me in this i like to put all my posts into 2 columns my site http://http://computer-services-blogs-in-blog.blogspot.in/, please advise and help. regards, udayan

    ReplyDelete
  66. how do you change the page list in the column to a tabs format instead of list format? I think it looks so bad! take a look: http://loveeartha.blogspot.com

    ReplyDelete
  67. nice,
    but how i add extra column in the left side ?

    ReplyDelete
  68. good job thanks http://filmeplay.blogspot.ro

    ReplyDelete
  69. Thank you for this awesome tutorial, i was just looking for this to customize my blogger blog.
    Thank you.

    ReplyDelete
  70. Hello - as this code lesson would be helpful to those who are experienced in code, is wasn't explained simple and thorough enough for me to understand. I cannot find any of you guys' forums that are simple and have more specific info for those like me. I can never get any help because these forums are for "coders only club". I am sure u are a lot of help to them - but none to me! Could one of u try to explain this for newbies? I would like to have a nice looking site too, but I have to settle for 2nd.

    ReplyDelete
  71. There is no "Layout>EDIT HTML" on my 3.5.2 so I was at a stand still not to mention ur explaination was to difficult for me, therefore was no help. Guess I will have to keep digging!

    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