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:
- How to add three columns to your footer section
- The easy way to make a great blog header
- Install post summaries in Blogger
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.
No comments:
Post a Comment