Blogger XML Template: Blue Steel (Magazine Style)

Demo | Download

Here is a new 'magazine style' Blogger XML template for free download. This template is called "Blue Steel" and features a unique layout for the front page to include extra widgets beneath the main post section (though if you prefer you can use this theme as a regular three column template). Read on for full instructions and to download this unique Blogger template for use in your own blog.

There are many optional elements to this template. You may either use this as a magazine style theme (featuring more widgets than usual on the home page), or as a regular theme which contains only the main blog posts and two sidebars to the right.

Features of this template include:

• An optional magazine style layout for the home page


• Optional customized recent posts widget for the sidebar


• Themed icons for sidebar widgets, post features and post options


• Custom made favicon to match the blog theme


• Integrated search function


• Tabbed navigation with easy customization of links


• Related articles beneath each post on post pages


• Integrated (optional) post summary hack

Download the Blue Steel Blogger XML Template

You can download this template for free using the link below. This is a Zip file which includes the XML template and instructions to upload this template to your blog.

Download Blue Steel Blogger XML Template (Zip File)

Option 1: use Blue Steel as a Magazine Style Theme

If you would like to utilize the full potential of this theme, you will need to change a few settings and make some small changes to the way you usually post.

Display only one post on the home page

The ideal number of posts to display when using a magazine style theme is only one. Additional post excerpts will be visible from the "recent posts" widget which I will explain about soon.

To ensure only one post displays on the front page, go to Settings>Formatting in your Blogger dashboard, and choose "Show 1 Posts" on the front page.

Utilize the Post Excerpts Hack

This template includes code for you to show optional excerpts of posts on your front page. This customization was originally written by Ramani of Hackosphere, and is called "Selective Expandable Posts".

If you would like to utilize this facility, you will need to add a post template to your blog. To do this, go to Settings>Formatting in your Blogger dashboard. Near the bottom of the page you will see a box for you to add a "Post Template". In this box you will need to paste the following section of code:

Type your summary here

<span id="fullpost">

Type the rest of your post here

</span>

Then save this setting. Now when you create a new post, you will clearly see where you should write your excerpts and the remainder of the post.

For more detailed instructions about using this hack, please refer to this article.

Add the "Recent Posts" widget code to your sidebar

If you choose to use the magazine-style facilities for this template, you may also like to add the widget to display excerpts of your most recently written posts in the sidebar.

This widget was originally written by Hans of Beautiful Beta, though I have modified this slightly to make this more suitable for the Blue Steel Blogger template.

To add this widget to your sidebar, copy all of the code on this page and paste this into an HTML/JavaScript widget in the Page Elements section of your Blogger dashboard. Be sure to replace the section in red with the URL of your own blog!

Important Notes

The widgets which appear under the post on the main page will only be visible on the main page. On post pages, these widgets will not appear, so be sure to include important widgets in your sidebar instead.

Option 2: Using Blue Steel as a regular blog template

If you would prefer to use Blue Steel as a simple template (IE: not utilize the magazine style elements), all you need to do is delete any widgets beneath the Blog Posts section. The template does not require any additional settings or adjustments to work as a regular template (although you may like to add your links to the navigation bar in the header section. See below for details about this).

Other settings/widgets

Certain features of the Blue Steel Blogger template are applicable to both "magazine" and "regular" options.

Configure links in your navigation bar

This template comes with a pre-installed link list widget in the top right section of the header. When you upload this template to your blog, this link list will not contain any links at all.

To add links to the navigation bar, go to Layout>Page Elements in your Blogger dashboard and click on the "edit" link for this link list. You can then add links to the main pages of your blog and these will appear in the navigation section.

Links in the footer section

Right at the bottom of your blog template are some links which you can change to reflect the URLs of the main pages in your blog.

To change these links, find the following section of code in the Edit HTML section of your template:

<
<a href='http://yourblog.blogspot.com' title='Home Page'>Home</a>

 | <a href='http://yourblog.blogspot.com' title='About the site'>About</a>

 | <a href='http://yourblog.blogspot.com' title='Contact the author'>Contact</a></span>

Change the URLs highlighted in red to match those of your important post pages.

License and Credits

As mentioned earlier in this post, two of the scripts used in this template were written by different authors:

• The Selective Expandable Posts hack was written by Ramani of Hackosphere


• The Recent Posts widget was originally created by Hans of Beautiful Beta

You may download, customize and use this template however you choose. However, I do ask that the credits within the template code remain in place and that you do not redistribute this template without my consent.