The Ultimate Blogger Template Resource List

Searching for Blogger template providers and designers can be a time consuming task. Through my research for various articles posted here, I have discovered many providers of free and custom made Blogger templates which I have listed below by category:

• Free XML Blogger Template Providers and Directories


• Classic Blogger Template Providers


• Professional Blog Template Designers who cater for the Blogger platform

Where possible, I have also linked to the feed for these sites to help you be updated of new templates as they become available.

I hope this resource list will be useful for you too!

Free XML Blogger Template Providers and Directories

In this section you will find links to sites which provide (or collate) free Blogger XML based layouts.

BTemplates

This is the ultimate directory of Blogger XML templates. At the time of writing this post, BTemplates features over 200 free Blogger XML layouts for free download, contributed by many different designers from the Blogger community.

Templates are organized by theme, style and also by tags which makes it very easy to search for the style of template you prefer.

Visit BTemplates | Subscribe to BTemplates

Blogger Templates

One of the oldest and best known Blogger template resources, which also features useful customization articles for Blogger.

Templates are organized by category, and there is also a search funtion to help narrow down your preferences.

Visit Blogger Templates | Subscribe to Blogger Templates

Blog and Web

Blog and Web provide an excellent array of Blogger templates which have been converted from popular Wordpress designs.

This site is written in Spanish, though you can easily translate the page you are reading using Babelfish Translator if you need to.

Visit Blog and Web | Subscribe to Blog and Web

Zona Cerebral

Zona Cerebral features some of the most beautiful free Blogger templates I have ever seen. This site is also written in Spanish and can be translated quickly using Altavista's Babelfish translator if necessary.

Visit Zona Cerebral | Subscribe to Zona Cerebral

Jackbook

Jackbook provides a range of Blogger templates which have been converted from existing Wordpress templates.

Visit Jackbook | Subscribe to Jackbook

Blog Crowds

A wide variety of well-designed Blogger XML templates are available on this useful blog resource site.

Visit Blogcrowds

Final Sense

Final Sense probably has the largest collection of Blogger templates available.

Visit Final Sense

K2 Modify

Some excellent designs to be found on this Blogger hosted resource site. The template used by K2 Modify is available for download, which is probably one of the best this site has to offer.

Visit K2 Modify | Subscribe to K2 Modify

Suck My Lolly

Some beautiful, quirky and feminine designs to be found on this site. Many include customizable header images so you can add your own blog title to the design.

Visit Suck My Lolly | Subscribe to Suck My Lolly

Gisele Jaquenod

Gisele's designs are beautiful, feminine and unique!

Visit Gisele Jaquenod's Blogger Templates page

GosuBlogger

GosuBlogger converts and creates Blogger XML templates. Be sure to visit to see some truly unique designs.

Visit GosuBlogger | Subscribe to GosuBlogger

BlogU

Annie has created some beautiful Blogger templates for free download. Here you will also find some very useful articles about blogging with Google Blogger.

Visit BlogU | Subscribe to BlogU

Free Blogger Skins

A collection of free Blogger XML skins which are easily viewable on the home page.

Visit Free Blogger Skins | Subscribe to Free Blogger Skins

Fresh Blogger Templates

A great selection of Wordpress conversions, many of which can be seen on the front page.

Visit Fresh Blogger Templates | Subscribe to Fresh Blogger Templates

e-Blog Templates

A directory with over 130 free Blogger templates available to download.

Visit e-Blog Templates

Gecko and Fly

Fans of Gecko and Fly's Classic Blogger templates have converted these to XML format which you can download from this site.

Visit Gecko and Fly's Blogger XML Templates Page

Our Blogger Templates

A range of Blogger XML templates in different colors and styles (formerly Dzelque.blogspot.com)

Visit Our Blog Templates | Subscribe to Our Blog Templates

Free XML Blogger Templates

This site features both original and Wordpress conversions for Blogger XML users. Updated regularly with new templates being uploaded often.

Visit Free XML Blogger Templates | Subscribe to Free XML Blogger Templates

Classic Blogger Templates

In this section, you will find links to free Classic Blogger templates which you can download for free.

BloggerTemplates.org

There are some exceptional classic templates on this site, including many Ajax-driven designs with extra functionality.

Visit BloggerTemplates.org

Template Panic

A wide selection of classic Blogger templates available on this colorful resource site.

Visit Template Panic

Templates for Blogger

Here you will find some classy and professional designs for classic Blogger templates

Visit Templates for Blogger | Subscribe to Templates for Blogger

Blogspot Templates

Loads of free classic templates available here. You can download and view many of these from the home page.

Visit Blogspot Templates | Subscribe to Blogspot Templates

Carl Galloway

This site features some well designed classic templates (plus a small selection for XML users too).

Visit Carl Galloway's Blogger Templates page

Isnaini

Here you will find an excellent selection of classic template designs. All templates are listed in the sidebar, and there are some true gems to be found on this site!

Visit Isnaini.com

Blogger Templates by Caz

If you're looking for beautiful, feminine classic Blogger templates, this site is a must!

Visit Blogger Templates by Caz | Subscribe to Caz's Blog

Blogspot Templates (A Collection)

Here are some rather unusual and striking classic templates for free download.

Visit Blogspot Templates | Subscribe to Blogspot Templates

Noipo.org

Another collection of unique and inspiring designs.

Visit Noipo's Classic Blogger Templates Page

BlogSkins

There is a huge selection of user-submitted classic templates for Blogger on this site. You will need to search through to find your ideal template though!

Visit Blogskins

Blogger Template Designers

If you're looking for a unique Blogger template design, you can hire the services of a template designer. Here are links to designers who cater for Blogger bloggers. Fees will vary between designers and the complexity of the design you require.

Blogs Gone Wild

This is probably the most popular site for custom designed Blogger templates. You can see many examples of Se7en's work in the portfolio section and prices start at $65 for a simple, two column design.

Visit Blogs Gone Wild

Everyday Design

Everyday Design is a favorite among women Bloggers. Everyday Mommy's designs are simple, striking and easy to navigate.

Visit Everyday Design

Lunastone Designs

Lunastone has produced some awesome Blogger powered designs which you can view in the portfolio section. Prices start from $50 for a Blogger design, though only classic Blogger templates are available.

Visit Lunastone Designs

Chic & Sassy Designs

As the title suggests, this designer creates feminine and sassy designs especially for Blogger bloggers. Unique custom designed templates are available to order, and you can also choose from pre-made designs.

Visit Chic & Sassy Designs

JudithShakes

Judith specializes in eye-catching designs which reflect the personality and voice of the personal blogger. She does have rather a long waiting list (which exemplifies the quality of her design work).

Visit JudithShakes

Gisele Jaquenod

Gisele offers custom designs for Blogger and Wordpress as well as her free Blogger templates.

Visit Gisele's Website

Ewebscapes

The professional designers of Ewebscapes can offer you a wholly unique and very well-designed template for your Blogger hosted blog.

Visit Ewebscapes

More to add?

If you host a directory of Blogger templates, or are a professional designer who can cater to Blogger users, please drop me a line and I will add your site to this list.

I hope you have found this to be a useful resource for all your template needs. If you have enjoyed this post, please subscribe to the full text feed to receive new articles, resources and Blogger news.

A New Interface for Blogger Widgets Gadgets!

Blogger in Draft now features a whole new interface for adding widgets (or should I say "gadgets") to your blog layout.

When using Blogger in Draft to edit your blog layout, you will notice that "Add a new page element" has been replaced with "Add a gadget". The pop-up screen has been completely redesigned, featuring all available Google Gadgets (organized by category) as well as the "Basic" Blogger widgets we are all used to using.

The design of this "gadget" interface has been given a makeover, allowing you to understand your choice of widgets at a glance. Furthermore, Blogger have added a useful search function so you can find the perfect gadget from the vast array available.

You can even create and add your own gadgets to this ever-increasing list of available widgets! It was only a few days ago that I was discussing this possibility with a fellow blogger: this will make it so much easier for us to create and distribute gadgets/widgets for use with Blogger powered blogs...

If you want to check out the new Blogger Gadgets interface for yourself, log in to your blog through Blogger in Draft and take a look at your Layout page.

I haven't (yet) found any bugs or glitches with the new scheme of organization and hope this will be released for general use soon enough. It is certainly an improvement of the existing method of adding widgets to our blogs!

Please do let me know what you think of this new interface by leaving your comments and opinions below.

A Content Suggestion Engine (Which Works for Blogger!)

As I type this post, I am using a rather marvelous invention which appears to the right of my posting box. This is Zemanta: a content suggestion engine which finds relevent content to add to your posts as you type, including Flickr images, links to Wikipedia articles, tags and links which can help make your content "more vibrant" and appealing.

Zemanta is compatible with Wordpress, Typepad and (most importantly for us) Blogger. Through a Firefox entention, Zemanta adds an extra sidebar to your blog editing page and suggests relevant content which you can add to your post with a single click.

I'm still getting used to how this great plugin works and so far am rather impressed by its functionality. Images are suggested in a "Gallery" section which all appear to be from either Flickr's Creative Commons pool or Wikipedia content. Suggested articles appear to be from many different content sources and all have some relevance to the words I am writing in this post.

I'm sure many of you will find this a hugely useful tool to enhance your posts. Here is a video of Zemanta's integration with Blogger which pretty much sums up how this tool can work for you:

Zemanta Blogger integration from zemanta on Vimeo.

At present, it seems you can only use Zemanta as a Firefox extention, though I suspect more features will be added in the future.

You can download Zemanta from the download page and begin using this as soon as you log in to Blogger to begin writing a new post.

If you're already using Zemanta, please let me know what you think about this by leaving your comments below.

Help! My Feedburner Subscriber Count Dropped to Zero!

This morning, Feedburner seems to be suffering a major glitch in the system. All of my blog feeds have suddenly reduced to zero, and after reading the Feedburner forums, it seems that many others are also experiencing this same problem.

EDIT: Feedburner have just added this message to the Known Issues page:

25-MAR 2008: Seeing "0" for your subscriber count right now? Don't panic! One of our stats rollup processes got a bit behind so your subscriber totals may not be tallied yet; it should wrap up soon and your numbers should be back when it's complete.

It's good to know the Feedburner team are working out this issue. Hopefully anyone affected will see their stats return to normal soon enough!

Edit 2: I just logged in to my Feedburner dashboard and have found my stats are back to normal now (though my feed count widget doesn't seem to have caught up yet!). Has anyone else noticed the change?

I'm keeping an eye on Feedburner's known issues page and will update this post if I hear any news about the sudden subscriber drop.

In the meantime, if anyone else has any news about this, please let us know by leaving a comment below.

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.

Blogger Posts: Backup, Restore and Even Import from Other Platforms!

Backing up your Blogger hosted blog is certainly reassuring! Unlike other blogging platforms, Blogger does not feature a backup facility though. Luckily I've discovered three highly useful and workable solutions which you could use to backup and restore your Blogger posts. One of these even allows you to import posts from Wordpress or Typepad powered blogs!

Create Backups using your XML Feed

Google Operating System has written an extensive post describing how to backup your Blogger posts, comments and images using your blog's XML feed.

This method would allow you to import these posts to a database, or simply copy and paste the content if you ever need to restore your Blogger posts.

Read more about backing up using your XML feeds.

Blogger Backup Utility

Blogger Backup is a free utility you can download which will create a backup of all your Blogger posts and save these to a location on your computer. This program uses the GData C# Library, and saves each post to a local Atom/XML file.

Once you have created a full backup of your posts, you can then use this program to restore your posts, or import to another Blogger powered blog.

You can also make a backup of any comments though there is currently not the facility to restore comments automatically (you would need to restore them manually instead).

You can download the most recent release of Blogger Backup here.

Blog2Blog Backup, Restore and Import Utility

Of these three methods, Blog2Blog is my absolute favorite (and for very good reasons!).

Paul Cooley of LinuxLore created this free utility which allows you to:

• Backup and restore your Blogger posts


• Import from Wordpress and export to Blogger


• Import from Blogger and export to Wordpress


• Import from LiveJournal and export to Blogger/Wordpress


• Publish to Microsoft Live Spaces

I've tested this on Blogger and Wordpress blogs (both Wordpress.com and self-hosted Wordpress) with great success.

I was very impressed by the range of features Paul has included in this utility, which includes a simple read-only viewer of downloaded entries and delete all entries for your destination journal.

Blog2Blog is a .NET 2.0 application and is available for free download. Backups are saved on your own computer and this is a breeze to install and operate (though of course, if you have a large number of posts it may take some time to import them!).

Read more about Blog2Blog and download this free utility.

Important Notes

If you use either Blogger Backup or Blog2Blog to restore your Blogger posts, you will be limited to 50 posts per day. This limit is imposed by Blogger to prevent spamming, and ensure the smooth-running of the API.

If you do have a great deal of posts to import to your Blogger blog, you may be able to ask permission for temporary lifting of this limit. A good place to ask about this would be the Blogger Developer forum (you're unlikely to receive a response elsewhere).

Why you should backup your Blogger posts?

Blogger powered blogs do not expire, and will not be deleted from the system if they are abandoned. But if you accidentally delete your blog or for some reason your blog becomes inaccessible, it would certainly be reassuring to know that you have a local backup of all your posts and can restore this if required.

Always backup your Blogger template!

It is also a good idea to backup your Blogger template (especially before attempting any template customizations). Download a copy of your template to your computer, which you can access in the future if you need to restore your theme (or your entire blog).

For Blogger XML based templates (Layouts):

Go to Layout>Edit HTML in your Blogger dashboard, then click on the link near the top of the page which says "Download Full Template". This will save a copy of your full template as an XML file to your computer.

For Classic Blogger Templates:

Go to Template>Edit HTML in your Blogger dashboard. Highlight all of the code in the box, copy this and paste into a simple text file. Then save this .TXT file to your computer.

If you have discovered any other useful backup/restore facilities for use with Blogger blogs, please let us know about these by leaving your comments below.

How to add CSS Rounded Corners to your Blogger Template

Rounded corners can add a great deal of style to an otherwise simple Blogger template. Luckily, you don't need to create complicated images and CSS code to achieve this: Spiffy Corners is a free service which generates code that you can simply add to your Blogger template, and no externally hosted images are required!

Since I originally wrote about Spiffy Corners, many people have asked me where they should paste the generated code in order to make those rounded corners appear. So in this article, I will offer a full explanation of how to use Spiffy Corners to create rounded corners in the main and sidebar sections of your Blogger template.

What is Spiffy Corners and How Does It Work?

Spiffy Corners is an online generator which creates CSS and HTML code to create anti-aliased rounded corners for your web/blog design. The code generated by Spiffy Corners does not require any images or JavaScript; using this method to create rounded corners for elements of your blogger template will not slow down page loading time at all, and can add a truly distinguished look for your theme.

The way this method works when added to your Blogger template is simple and yet truly effective! Spiffy Corners generates purely HTML tags which are styled using CSS; when you add the HTML section to your Blogger template, the area it creates appears to have rounded corners because of CSS styling.

The HTML tags are contained within a DIV element.As DIVs expand to the complete width of their containing element, it is important that this code is placed inside another element, or the color will seem to bleed across the whole template and spoil the effect.

How to use Spiffy Corners in your Blogger template

To explain how to use Spiffy Corners in your own Blogger template, I will use the default Minima template as an example. The same principles will apply no matter which template you are using, and I will outline possible differences in template code where appropriate.

Currently, my Minima template appears like this:

I would like to add a pale blue background with rounded corners to the main posts column. Note that the main background color of my blog is white.

First of all, I need to visit the Spiffy Corners website to generate the correct code and color scheme to create the rounded corners for my main section.

Here is what the initial screen looks like:

Here I need to choose the background and foreground colors to generate the correct code for my design.

As my background color is white (hex value #FFFFFF), I choose this for the background color. The hex value #C3CCEE is a nice shade of pale blue which I choose for the foreground color.

There are three degrees of "roundness" defined beneath the color choices: 3px, 5px and 9px, but unfortunately only the 5px radius currently works!

When I click on the 5px button, this displays an example of what my rounded corners will look like, and generates the correct code for me to use in my blog template:

How to use the code provided

This is generally considered the most problematic part of using Spiffy Corners (especially when used for Blogger template designs!).

I'm going to break this down into three sections of code which should help explain exactly where to copy and paste the code.

The CSS Section

The CSS code which I generated for my pale blue rounded boxes appears like this:

<style type="text/css">

.spiffy{display:block}

.spiffy *{

  display:block;

  height:1px;

  overflow:hidden;

  font-size:.01em;

  background:#C3CCEE}

[more code here]

.spiffy5{

  border-left:1px solid #d2d8f2;

  border-right:1px solid #d2d8f2}

.spiffyfg{

  background:#C3CCEE}

</style>

In this example, notice that I've highlighted the <style> tags in bold red. When using this code in your Blogger template, these style tags are unnecessary!

To add this style code to my template, I will copy the CSS code (excluding the unnecessary style tags) to my clipboard.

Then in a different tab/browser window, I need to go to Layout>Edit HTML in my Blogger dashboard without clicking the "expand widget templates" box. The style code I have copied needs to be pasted just before the closing <b:skin> tag in my template:

.spiffy{display:block}

.spiffy *{

  display:block;

  height:1px;

  overflow:hidden;

  font-size:.01em;

  background:#C3CCEE}

[more code here]

.spiffy5{

  border-left:1px solid #d2d8f2;

  border-right:1px solid #d2d8f2}

.spiffyfg{

  background:#C3CCEE}

]]></b:skin>

Now for the HTML code!

I now need to add the HTML code which creates the rounded corners to the main posts area of my blog template.

The HTML code generated by Spiffy Corners should clearly shows where to put my content (IE: the widget used to display my blog posts). But to work with this effectively, the code should be split into two sections, like this:

Splitting the HTML code into these two sections will make it much easier to work with!

To start with, I will copy "Part 1" of this code to my clipboard. I need to add this just after the opening DIV tag for the main posts section.

Next I will copy "Part 2" of the HTML code, and paste this just before the closing DIV tag for the main posts section.

Here is the code in my Blogger template which shows exactly where I should paste these different sections of code:

      <div id='main-wrapper'>; <!-- This is the opening DIV tag >

Paste Part 1 of the HTML Code Here!

        <b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>

</b:section>

Paste Part 2 of the HTML Code Here!

      </div> <!-- This is the closing DIV tag -->

Note: For different templates, the "main-wrapper" DIV may be named something different, such as "main-wrap" or even "main". The best way to find where exactly to paste your code is to look for this section in your blog template:

        <b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>

</b:section>

And paste the relevant sections of code above and below this.

Now if all goes to plan, when previewing the template it should appear like this:

In this case, I can save my template for the rounded corners to appear around my main posts section.

But unfortunately, Blogger templates can be quite finicky when trying to use Spiffy corners... Which is where the troubleshooting comes into play!

Troubleshooting Spiffy Corners

The most common problem experienced when using Spiffy Corners in Blogger templates is a gap between the corners and the main content section:

This can be quite infuriating, especially as this doesn't occur in all template styles! But there is a solution: adding negative margin values to the top and bottom of the "spiffyfg" div. This draws the top and bottom margins inwards and reduces the gap.

The easiest way to draw the margins in is to add margin properties in the style section of your Blogger template.

In my example template, the style for "spiffyfg" is defined like this:

.spiffyfg{
  background:#C3CCEE;
  margin: -15px 0 -20px 0;}

The code highlighted in bold red is additional margin properties which I have added to draw those margins inwards. In your own template, you may need to adjust the values of these negative margins slightly to prevent any of your content being clipped by the margins.

This technique has worked for me each time there was a gap between the top and bottom sections of my rounded corners. I hope it will work for you too!

Using Spiffy Corners in Sidebar Sections

To round the corners of your sidebar(s), the same principles apply.

Here is the template code for the sidebar in my example template which shows where you will need to add the Spiffy Corners code:

      <div id='sidebar-wrapper'>

<!-- Paste Part 1 here --> 

        <b:section class='sidebar' id='sidebar' preferred='yes'>

<b:widget id='HTML1' locked='false' title='' type='HTML'/>

<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>

<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>

</b:section>

<!-- Paste Part 2 here --> 

      </div>

In different templates, the <div id='sidebar'> may be named differently. If you are able to locate this section of code (or similar) you should paste the HTML code for your Spiffy Corners directly above and below as appropriate:

        <b:section class='sidebar' id='sidebar' preferred='yes'>

<!-- widget codes here -->

</b:section>

Using different color schemes for different elements

One of the great things about Spiffy Corners is that you can create many different color schemes and name each one differently.

For example, if you wanted a red foreground for your main posts section, and a blue foreground for your sidebar, you can generate two different sets of code named "Red" and "Blue" respectively.

You can then add the CSS code for both "Red" and "Blue" to the <b:skin> section of your Blogger template, and paste the corresponding HTML code in the main and sidebar sections.

The Stylish Way to Show Off Your Feed Count!

ReadersLet's face it, while Feedburner's FeedCount widget is an easy way to display your blog's feed count, it does look a little boring! Luckily there is another way for Blogger users to display their feed count, which will enable you to have almost complete control of the way this is displayed! This is the method I use to display Blogger Buster's feed count which you can see in the bottom of the sidebar.

This method is a little more complicated to install than the Feedburner widget: you will need to edit and host your own PHP files and also style the widget to your liking. But through this tutorial, I will take you through the process step by step. You'll soon be on your way to creating a unique feed count display for your own Blogger powered blog!

A Bit About This Widget

I've been looking for a working method of styling the subscriber count in Blogger for a long time. Wordpress users have the advantage of installing a PHP based plugin to accomplish this with ease, but as many of you will realize, such support is not available for us to use in Blogger templates.

After endless searching, I finally came across the Conflagration plugin which was written by Garret Albright. While this was essentially written for Wordpress blogs, this script has one advantage which enables it to be used in Blogger powered blogs too: the ability to call the subscriber count using JavaScript!

By stripping the contents of this plugin to two essential files, I was able to parse and display my own subscriber count as a simple textual number, then style this nicely with CSS.

Important Considerations (you must read this before trying to install your widget!)

This "hack" is more complicated than other tutorials I have written here before, though I will try to simplify things as much as possible!

The most important thing to consider before installing this hack is whether you have an external hosting account where you can upload and access PHP files. I imagine that many of you will not already have such hosting available to you, though luckily I have been able to find a few decent free file hosts which do host (and allow access to) PHP files:

• AtHost.net


• BytheHost


• Tripod

All of these free hosts offer support for PHP; you will be required to register your details in order to access this free webspace and may need to wait for verification of your account before you are able to upload the required files for this hack. These free hosts do state that this free hosting is ad-supported, though this is nothing you need to worry about as it won't affect how the script displays your feed count!

Once you have access to a file host which offers support for PHP, you're ready to customize your own Subscriber Count widget.

How to Create Your Own Subscriber Count Widget

In this section, I'll explain what is necessary to display your feed count, and afterwards will offer some examples of how you can customize this.

There are 5 main steps to creating your own Feedburner Subscriber Count widget:

1. Activate Remote Access to your Feedburner Traffic Data
   
   By default, remote access to your Feedburner traffic data is disabled. You will need to activate remote access to create and display your own feed count widget.
   
   To do this, log in to your Feedburner dashboard and choose the name of the feed you wish to access. Then click on the Publicize tab, and look for the Awareness API option in the left sidebar menu.
   
   Finally, click on the "Activate" button to allow external access to your traffic data.


2. Download the required files for your widget
   
   Next you will need to download the files you need to make this widget work:
   
   Download Feed-Count-Display Files
   
   Unzip the files to a location on your computer, maintaining the same file structure of these files as you will soon need to upload these to your host.


3. Edit the Config.php File to include your personal feed data
   
   This is the tricky part. You will need to edit the Comfig.php file to include your personal Feedburner ID number.
   
   The easiest way to get this number is to log in to your Feedburner dashboard and click on the name of the feed you are interested in. Your ID number is the number at the end of the URL in your browser address bar:
   
   
   
   Copy this number from your address bar. Then open Config.php using your favorite text editor (eg: Notepad or Notepad++).
   
   In this file, you will need to locate the following line:
   

   FeedID1:1268073

   
   Replace this number with your own Feedburner ID number and save the file.


4. Upload all of the files to your hosting provider
   
   You now need to upload all of the files contained in the Feed-Count-Display folder to your hosting provider. Use FTP to upload the folder wherever possible as this ensures the file structure is maintained. If you need to upload each file individually, you must make sure you create a folder named "Data" (with a capital D).
   
   Make sure that the "Data" folder is writable by the server. This means that you should set the folder permissions to the numeric value 755. Or in other words:
   

   Owner permissions: read, write, execute
   
   Group permissions: read, execute
   
   Public permissions: read, execute

   
   This means that your subscriber count can be written to the folder each day, ensuring that this value is kept up to date.

Once you have completed all four steps, you can check that the scripts are working and display the true value of your subscriber count.

To do this, visit the "js.php" script where it is hosted on your server, by entering the URL of this file in your address bar, like this (change the section in red to match the location of your files):

http://www.yourhost.com/yourfiles/feed-count-display/js.php

This should result in a simple page featuring the current number of subscribers to your blog which will look something like this:

document.write("123");

To make this number appear in your blog, you can use a simple JavaScript in the following format:

This blog currently has
<script type="text/javascript" src="http://www.yourhost.com/yourfiles/feed-count-display/js.php"></script>
 subscribers!

If you add this simple JavaScript to your sidebar, for example, the result will appear something like this:

This blog currently has subscribers!

At this point, you know you can display an accurate count of your subscribers as simple text. And because we can display this as text, we can use CSS to make it stylish!

Make your subscriber count widget stylish!

Using CSS offers endless possibilities for styling your subscriber count!

Here are a couple of examples you could use, along with their corresponding code (dont't forget to change the URL of the script to that of your own host!

<div style="background: #7d7da8; border: 3px solid #44445c; padding: 10px; text-align: center; color: #333333; font-weight: bold; font-family: georgia;">This blog has<br/><span style="color: white; font-size: 1.3em;"><script type="text/javascript" src="http://www.yourhost.com/yourfiles/feed-count-display/js.php"></script></span><br/>subscribers
This blog has
123
subscribers

<div style="width: 121px; height: 121px; background: url(http://bloggerbuster.com/images/posts/red-circle.png) center center no-repeat; padding: 20px 10px; text-align: center; font-family: Arial; color: black; font-weight: bold;">"><script type="text/javascript" src="http://www.yourhost.com/yourfiles/feed-count-display/js.php"></script><br/>Happy<br/>subscribers!</div>
123
Happy
subscribers!

Blogsolid showcased some great examples of subscriber count widgets which you could take a look at if you're seeking inspiration.

Licensing and Credits

The scripts used to create this widget were originally written by Garrett Albright of RayGunRobot, while the YAML parser was written by (spyc.php) was created by Chris Wansthrath and is under the MIT License.

In keeping with the licensing of Garrett's original post, the files offered here are free and open source, so you may use and distribute these as you like.

Final Thoughts...

As I mentioned earlier, this is probably the most complicated (and least "user-friendly") tutorial I have posted here at Blogger Buster. I honestly wish there were a simpler method for styling the subscriber count in Blogger powered blogs, but unfortunately this is the only working solution I have found.

So if anyone knows of a simpler method which would work in Blogger please do let me know about this!

In the future, I may post a showcase of Blogger powered subscriber count widgets, so if you have designed a great widget to display your subscriber count please email me your URL or leave a comment below.

How to Display Your Feedburner Subscriber Count (The Easy Method)

Redirecting your Blogger feeds through Feedburner is the best way to get accurate results of your subscriber count. Once you've accumulated a few subscribers, you may feel inclined to show off how many people subscribe to your blog. You've probably seen widgets in other blogs which inform you how many people currently are currently subscribing via Feedburner. But how can you go about displaying such a widget in your own blog?

There are actually two methods available to display your subscriber count in your Blogger powered blog:

1. Use a Feedburner Feed Count Widget


2. Create your own widget (and style to your tastes)

In this post, I'll explain the easy method: using Feedburner's default widget to display the number of subscribers to your blog.

The Feedburner FeedCount widget will display the daily average number of subscribers to your blog. This is available to anyone who publishes their feed through Feedburner. It's free and very easy to use, and you can even change the color scheme to match that of your Blogger template!

Here's how you can display your subscriber count using Feedburner's FeedCount widget:

1. Log in to your Feedburner dashboard, and click on the name of the blog feed you are interested in.


2. Near the top of this screen, you will see tabs which lead to various sections of your dashboard. You need to click on the "Publicize" tab, which will offer you different options to publicize your blog's feed:
   
   
   


3. This page will feature a menu in the left sidebar, which lists the various options you can use to publicize your Feedburner feed. Click on the "FeedCount" link in the sidebar, which will take you to the page where you can configure your widget and get the code you need to display this in your blog.


4. There are two slightly different styles of chicklets (widgets) you can choose from here: the "static" widget is simply a textual display of your current subscribers, while the "animated" widget displays a little animation of the text beside the subscriber count.
   
   Check the radio button beside the style you prefer to use.


5. Now you can go about styling the colors of the widget to suit the style of your blog template!
   
   The color interface is really easy to use, and allows you to choose the color of the background and the text.
   
   
   
   
   Once you have chosen the colors for your background and text, click on the "Activate" button a little further down the page. This will save your preferences, and generate the code you will need to display this widget in your blog.


6. Once you have activated your Feedburner FeedCount, the page will refresh and you will see a new section appear in the page like this:
   
   
   
   
   This section features the code required to add the style and color of widget you have chosen to your Blogger template.
   
   The easiest way to add this to your blog is by choosing the option, "Add this as a widget in Blogger". This is available to those who use Blogger's Layouts templates.
   
   Simply follow the steps and this widget will be added to your blog's sidebar through the widget installer interface.
   
   If you would prefer to have more control over the placement of the widget, you can copy the code which is inside the new box on this page, then paste this into your template (or even in a blog post) where you would like this to be seen.

How this widget works

The Feedburner FeedCount widget uses a GIF graphic which features the number of subscribers to your blog.

The graphic is generated using a PHP based script which is hosted and operated by Feedburner. This operates in a similar way to many "hit counters" which display the number of visitors to your blog.

Furthermore, this widget also acts as a link to your Feedburner feed page, where visitors can easily choose to subscribe using their favorite feed reader.

Why would you want to display your subscriber count?

Many bloggers consider the number of subscribers to a blog to be a measure of the blog's success. The more subscribers you have, the more popular your blog may seem to be (though of course, this depends on your personal opinions!).

If you are happy about the number of subscribers you have, you could use this widget as an indication of reader confidence in your blog's content. It's like saying "x-number of people like my content enough to subscribe to this blog, so maybe you could subscribe too!"

Another reason you may like to display your subscriber count is to indicate your blog's growth over time. Regular readers will notice the steady increase in subscribers to your blog, and you won't need to log into Feedburner each time you would like to check your statistics!

Why you might not want to display your subscriber count

If you have only a small number of subscribers, displaying your feed count won't necessarily install confidence for new readers to subscribe.

I preferred not to display a feed count for Blogger Buster until I had established a decent base of subscribers, though when I did finally decide to display this, I noticed more people felt inclined to subscribe!

Aren't there other ways of displaying my feed count?

You've probably noticed that I use a different method to display the subscriber count for Blogger Buster (you can see this in the bottom of the sidebar and also on the home page). This method uses a combination of JavaScript, externally hosted PHP and CSS styling to parse and display my subscriber count.

Although this method is a little more complicated, it is certainly more stylish and allows you to have complete control of how your feed count is displayed! So if you're not content using Feedburner's boring widget, be sure to check back tomorrow as I'll be publishing details of how you can style your own subscriber count and display this in your blog.

Weekly Review #10

Aside from a few minor tweaks, the redesign for this site is now complete. If you do notice anything amiss (or feel that something should be improved) please let me know by sending an email or leaving a comment here.

This week, I would like to ask for your input for future articles and templates. I also have news of a new Blogger feature (which will be particularly relevant for new bloggers) and some excellent links to share with you.

Blogger Buster News (and opinions needed!)

This week a few things have happened around this blog which I'm very happy to announce:

Now in the Top 3000 blogs on Technorati!

I was thrilled to notice that Blogger Buster is currently ranked 2910 in the list of popular blogs! It doesn't seem that long ago when this site was in the top 4000. Thank you to everyone who has linked to Blogger Buster in their blogs! I hope this site continues to grow and would love to eventually announce that we've broken into the top 1000...

Blogger Buster featured in...

This week, the Blogger Buster design has been featured in several web design galleries this week including CSS Hive, CSS Mania and CSS Design Yorkshire. I am rather fond of this new design, and it's great to see this showcased among the wonderful web designs which are featured in these galleries.

In the near future, Blogger Buster may also feature in a magazine. I'll post the details of this when the issue is confirmed...

Your Opinions Needed

I would love to have your opinions and input for some projects I'm currently working on.

Firstly, I'd love some suggestions about the style of templates you would most like to download.

I do have a magazine style template in progress, which will be released later this week, though I would prefer to develop a range of different templates to suit your varying tastes. If you have any suggestions, or would like me to consider creating a particular design, please leave a comment to let me know or send me an email if you prefer. I will try to design templates around the most popular suggestions, and will try to offer new templates much more regularly from now on!

Secondly, I am looking for inspirational Blogger powered designs for an article I hope to publish later this week. So if you have developed a great unique design for your own Blogger blog (or would like to recommend someone who has), I'd love to hear from you!

Blogger News

Blogger wins the Best Application for Weblogs Award!

The Bloggies award for "Best application for Weblogs" saw some stiff competition for Blogger, including Flickr, Wordpress and YouTube. But needless to say, Blogger pulled through to win best in category for this award!

The Blogger Help YouTube Channel

Blogger have created a channel on YouTube specifically for those seeking help configuring their Blogger blogs! So far, there are only three videos available to watch, though I was rather intrigued to see this one, which shows how to set up your Blogger Custom domain.

To see more of these useful videos, pop on over to the Blogger Help Channel on YouTube.

This Week's Links

Here are some of the most interesting sites I've found this week:

• Feed Analysis Tool (by Blog Perfume): I really love this tool, which offers detailed statistics about your Feedburner feed. Including page views, estimates for future performance and even approximate values for your blog, this really is worth checking out!


• Skellie's Free eBook - The Simple Web: If you've read Skellie's posts before, you'll already understand what a great writer she is, and this eBook really is worth taking the time to read!


• Blogger and Podcaster Magazine: This is the first magazine I've come across which specializes in blogs (and podcasting). You can subscribe to the digital edition for free, and can also advertise in the classifieds section to offer better visibility for your blog.


• 7 Ways to make your blog stickier (Matt Harzewski guest posting for Problogger): This insightful post offers tips to help keep readers on your site for longer, and ensure they come back for more!

I hope you have enjoyed this week's review! Please do let me know if you come across any important news about Blogger, or if you find a useful site which you would like me to post about in next week's review.

Also, I would love to know your opinions about future template designs; don't forget to leave me a comment if there's anything particular you'd like to see designed in the near future!

Styling Sections of your Blogger Blog with Borders and Backgrounds

Using borders and backgrounds for the main areas of your blog are simple techniques which can achieve dramatic stylistic effects.

Borders and background colors help separate areas of your blog, and can be used to highlight important content, such as your blog posts, or features in your blog sidebar.

Most importantly, backgrounds and borders don't require you to have extensive knowledge and skill with creating and using images. Instead you can use simple colors, or generate tiled backgrounds to create a completely unique template for your blog.

Here are some of my favorite examples of how borders and backgrounds can be used to separate content:

Pro Blog Design

This is this excellent design exemplifies the theme of this post perfectly. Thick borders and simple backgrounds immediately convey which areas are important.

Mimbo Pro

Here colored backgrounds are put to great effect, with only fine borders beneath elements to add a sense of perspective.

Options Theme (By Justin Tadlock)

The border and background colors are varying shades of the same palette: subtle changes in color add depth to each element of this theme.

After seeing these examples, you're probably wondering how you may achieve these same effects in your Blogger templates! So allow me to explain the basics of adding backgrounds and borders to your blog.

Different styles for borders

There are many ways to set the properties for borders in your blog template. In this tutorial, I will only explain the basic concepts to help you get started.

The easiest method of all to add a border to an element of your template is to add border properties for a particular blog element in the <b:skin> section of your Blogger template.

For example, the "#main-wrapper" section in most Blogger templates refers to the main posts section. To add a border to this section, we could add a line like this:

#main-wrapper {

border: 3px solid #000000;

[other properties here]

}

This will reproduce a 3 pixel wide, solid black border, like this:

A section with a solid black border, three pixels wide

Using this example, you could also change the color, and width of the border, like this:

A section with a solid red border, five pixels wide

Borders don't have to be solid!

Instead of solid borders, you could add different properties to create unusual effects such as:

Dotted
border: 3px dotted #000;

Dashed
border: 5px dashed green;

Double
border-style: double; border-color: blue;

Outset
border-style: outset; border-color: #404040;

Different styles for backgrounds

Backgrounds can either be a flat color (defined as a hex value, such as #000000) or as an image (which is defined by the URL of the image).

Flat color backgrounds are easily created by adding the hex color value of the image as a property in the style section of your Blogger template. For example, if I wanted to add a yellow background color to my sidebar, I could add the line in red to the #sidebar-wrapper properties in my template code, like this:

#sidebar-wrapper {

background: #ffcc00;

[other style properties here]

}

To use an image as a background for a section of your template, you will need to host the background image online, and define the image by linking to the URL of the image, like this:

#sidebar-wrapper {

background: url(http://imagehost.com/yourimage.jpg);

[other style properties here]

}

You can also combine color and image background properties, like this:

#sidebar-wrapper {

background: #ffcc00 url(http://imagehost.com/yourimage.jpg) no-repeat top left;

[other style properties here]

}

The example above would feature an image at the top left of the sidebar, while all other space would be yellow.

You can read more about adding background images to your Blogger blog in this previous article.

Combining Border and Background Properties

This is where the border and background properties can become very stylish when applied to elements of your Blogger template.

By combining

A wide grey border

With...

A Paler Grey Background

You can create an effect like this:

A stylish section for your blog!
border: 5px solid #666666;
background: #333333;

You could even add a background image, repeating across the whole section, like this:

Another example, using images, border and background color
border: 3px outset #99cccc;
background: #99cccc url(http://imagehost.image.jpg);

Where could you add border and background styles in your Blogger template?

The main sections of your Blogger template would be the header, posts section, sidebar(s) and the footer section.

The style properties for these sections in your template would probably look like this:

• Header Section - #header-wrapper or #header-wrap


• Main Posts Section - #main-wrapper, #main-wrap or #main


• Sidebar(s) - #sidebar-wrapper, #sidebar-wrap, #sidebar or .sidebar


• Footer Section - #footer-wrapper, #footer-wrap or #footer

If you edit any of these sections in the <b:skin> section of your Blogger template, be sure to check if there are already any border or background properties defined. If there are, you will need to edit these sections, rather than add more new ones. Otherwise your edits will not appear the way you would like them to look!

Remember: you can always preview changes before saving your template! Then if you decide you don't like the changes you have made, you can click the "clear all edits" button and begin again.

Experiment with different styles!

Using properties for the borders and background properties of the different sections in your template, the style possibilities are endless! Try different color schemes, contrasting borders and backgrounds, and experiment with tiling images to see what would work well for your own blog design.

Here are some useful resources to help you use borders and background images in your own Blogger template designs:

• CSS Border Properties: Learn more about using borders


• Web Color Calculator: Find the hex values of your favorite colors


• Color Blend: Find the perfect color scheme for your blog design


• Stripe Generator: Create striped backgrounds


• Squidfingers: My favorite resource for tiling image backgrounds

I hope this post has helped you learn more about border and background properties. Please let me know how you have used these techniques in your own designs by leaving your comments below.