Blogger Buster

Infograbbit: New Premium Template

2010-06-15T14:04:00.000+01:00

Infograbbit is a premium resume template designed for those wishing to promote a simple yet stylish online presence:

Infograbbit is available to purchase from ThemeForest for $17 (or $15 for pre-paying members) and includes six colour variations for this theme.

This template is designed to be used primarily as a one-page portfolio site, making it a cost-effective and reliable solution for those wishing to develop a simple online presence to show off their skills.

It uses infographic-style presentation, including some exclusive Blogger gadgets and is very easy to customize to your individual requirements. Take a look at the live demonstration to see this template in action.

Main features of the Infograbbit template

The home page features a unique anti-layout offering visual representations for your online resume including:

Configurable overview and CSS3 styled avatar
Pie chart integration using Google Chart Tools for easy customization
Unique "Quick Contact" gadget including Google Maps integration for your business location (very easy to set up!)
Stylized calendar gadget with links to recent blog posts
CSS3-styled "Skills Set" gadget - just add your skills to the list gadget for impressive display
Draggable work history timeline powered by jQuery
Auto-updating portfolio thumbnails, which link to your recent posts
Links to your social media accounts, with automatic icons
QR code generated for your unique blog title

This template is coded in HTML5 with CSS3 enhancements for supporting browsers, and is compatible back to Internet Explorer 7 (it will display in IE6, but I no longer actively code for this archaic browser and cannot guarantee all effects will work).

About this template

I had initially designed this template in response to ThemeForest's "Out of the Box" competition. My concept was to design a new spin on the traditional "resume" using interactive graphical elements. In choosing to design this for the Blogger platform, I hoped to ensure required customizations are easy to implement, and that users of this template can set up an online presence using Blogger's free service at minimal cost.

Infograbbit is available to purchase through ThemeForest for $17 (with a $2 reduction for pre-payment). The download package includes all template files, images, gadget codes and documentation required to install and edit this theme.

I hope you enjoy using this theme as much as I have in designing it! Please feel free to offer your comments below.

Keyboard Shortcuts for Posting with Blogger

2010-06-01T21:09:00.014+01:00

Keyboard shortcuts are a feature I find incredibly useful. Most of our favourite applications offers shortcuts to perform tasks, such as the generic CTRL+S to save or CTRL+B to generate bold text in word processing programs (the "Command"/CMD button for Mac users).

Blogger offers us a range of keyboard shortcuts we can use when creating and editing our blog posts to perform some most-used tasks without having to scroll around to find their appropriate buttons.

The following shortcuts have been tested to work in Internet Explorer 6+, although at present not all of these work in Firefox, Chrome and Opera*:

Shortcut	Function	Global browser compatibility?
CTRL+B	Bold Text	Yes
CTRL+I	Italic text	Yes
CTRL+U	Underline text	Yes
CTRL+L	Blockquote (when in Edit HTML mode only)	No
CTRL+Z	Undo last operation	Yes
CTRL+Y	Redo last operation	Yes
CTRL+SHIFT+A	Insert Hyperlink	No
CTRL+SHIFT+P	Preview Post	No
CTRL+D	Save as Draft	No
CTRL+P	Publish Post	Yes
CTRL+S	Autosave	Yes
CTRL+G	Indic Transliteration	No

* Mac users substitute CTRL for CMD

I've tested the shortcuts above in Firefox 3.63, Internet Explorer 7/8 and Chrome, though have yet been unable to test in Opera (so if anyone is able to do this, please let us know your findings in the comments!).

The Blogger Team are aware that some keyboard shortcuts do not work across all browsers and are working through the issues.

Do you find these keyboard shortcuts useful when posting with Blogger? Please feel free to comment using the form below.

Image Credit: sfxeric, via Flickr Creative Commons

How to use Google's Font API with Blogger

2010-05-21T13:29:00.098+01:00

Web fonts have become a popular web design trend over recent months. As I explained in a previous post, the @font-face technique can be problematic when applied to Blogger templates. But since Google have now released their font API, we're able to display non-standard fonts in our Blogger templates with ease!

Here's an overview of the Google Font API and how we can use this to enhance our Blogger-based designs.

What is Google's Font API?

The Google Font API enables us to display web fonts in any web page. We can choose to display text in a variety of high-quality open-source web fonts for both personal and commercial projects. No sign-up is required, and it's really easy to set up.

What fonts can we use?

All fonts available for use with the API are listed in Google's Font Directory. Here's a few examples of the styles we can use:

At the time of writing, there is a small selection of fonts available to use through the API. As word spreads that Google is pioneering this project, I'm sure many font developers and foundries will begin to add open source variants to the directory.

How to use the Google Font API

Using Google's Font API to display non-standard fonts is very easy, and only requires a few minutes to set up.

Firstly, you'll want to choose the font you'd like to use from Google's Font Directory. Click on the font you'd like to use to be taken to a page displaying how the font appears at different sizes.

For this example, I'll use Cantarell by Dave Crossland:

Now click on the highlighted "Get the code" tab to generate the code we need to add to our Blogger template:

Copy the embed code to your clipboard or paste into a simple text editor for later use.

Now go to Design>Edit HTML in your Blogger dashboard, and use your browser's search function to locate the opening <head> tag. Paste the embed code immediately after this line.

You will also need to add a forward slash just before the closing ">" symbol in your code, so that this:

<link href='http://fonts.googleapis.com/css?family=Cantarell' rel='stylesheet' type='text/css'>

becomes this:

<link href='http://fonts.googleapis.com/css?family=Cantarell' rel='stylesheet' type='text/css'/>

This is because Blogger uses strict HTML markup and considers the original font embed code to be an open tag; the forward slash "self-closes" the tag and enables your template to be properly parsed.

Finally, save your template.

This step adds the required CSS to embed the fonts we'd like to use in our Blogger design, though these fonts will not display unless we specify the textual areas of the layout which should be changed. In order to do this, we need to add additional style statements to the <b:skin> section of our template.

For example, if we wanted to use the Cantarell font for the post titles, we would add the following line just beneath the closing </b:skin> tag:

h2.post-title {font-family: Cantarell, Sans=Serif;}

I've listed a few CSS statements you could add for various text areas of the template over on this page (opens in a new tab/window).

Once you've added the style statements appropriate for your design, preview your template to see how the changes will appear. If all is well, you can proceed to save your template.

Why is this good for Blogger users?

This new API allows us to have even more control over the designs of our Blogger templates without having to register for a web fonts service or be concerned about cross-domain policies.

All of the fonts available for use through the Google Font Directory are open source. We are able to use them without restriction in both personal and commercial projects without the need to request a license.

Blogger template designers can now use these fonts to enhance their templates and be satisfied that the fonts will display as intended in the majority of browsers (admittedly, this was an issue which prevented me from including web fonts in my own designs until now!).

I also wonder if the font API will be integrated into Blogger's new template designer in the coming months...?

More information about the Google Font API

In this post, I've explained only the basics of embedding web fonts with Google's Font API. Here's some helpful resources you may like to browse for further information:

Google Font API home page
Getting started with the font API
Google Web Fonts FAQ
How to use the new Google Font API (DesignShack)

What do you think?

Will you be using Google's Font API to add new web fonts to your Blogger-based designs? Or if you are already using these techniques, did you find the implementation as simple as intended?

Please feel free to leave your comments and opinions below.

Better Post Previews - See how your post will look to readers

2010-05-17T11:16:00.000+01:00

After a hardworking weekend, I found an awesome treat in my feed reader this morning! Blogger in Draft today published details of the enhancements to the post preview feature of our blogs which enables us to see how our posts will look to readers:

Up until now, when we preview a post we are writing for our Blogger powered blogs, we have seen only a white, format-less version of our musings, with none of the formatting and visual style which is added by our template and CSS.

With this new feature in place, we can see preview exactly what the post will look like when published, including any style attributes generated by our template code.

How it works

The updated post preview feature is available to those using Blogger in Draft to publish their posts, though as it seems to be working well for everyone so far I imagine it will become available to those using the regular editor soon enough.

This enhancement works similarly to the preview system offered by the Edit HTML template editor; rather than have a pop-up display, the preview is generated in a new browser tab (or page, depending on which browser you are using). Simply click the "Preview" button, which now appears beneath the post editing section to see this new feature in action:

I find this particularly useful when deciding which size of images to use in my blog posts as I can see exactly how the post will be formatted when the style generated by my templates is applied.

This works even with an immensely customized template such as mine. It's seamless and works beautifully right out of the box, and is a welcome addition to the series of enhancements we've seen the Blogger team push through over the past few months.

A note for Blogger hackers:

The only possible problem you may face when using this feature is if you customize the display of posts on the home page (for example, if you use conditional tags to add content/alter the layout of posts as I do for Blogger Buster).

As the post preview works in the same way as the template preview, you will see how your post would appear on the home page of your site, not on an individual item page. So if your template features customizations which affect the display of posts, you may not be able to see properly how your post will be formatted.

For most Blogger users, this will pose no issues at all.

Do you use the new template preview? What do you think?

While this enhancement is subtle, I find it immensely useful when writing and previewing my blog posts. What are your experiences with this? Have you had any problems editing and previewing your posts, or do you find this as useful as I do?

Please feel free to leave your comments and opinions below.

How to use non-standard fonts with Blogger

2010-05-15T00:00:00.006+01:00

A question I'm asked a lot is how to use @font-face (or other font-replacement techniques) with Blogger.

Now I have to admit, after dozens of failed attempts, heavy experimentation and keyboard-bashing I was almost ready to give up on this and admit defeat.Most of the techniques I tried were either unreliable or simply did not work!

Luckily, @kernest and @abu_farhan came to my rescue via Twitter by pointing me in the direction of Kernest's free (and premium) font-based service.

Why use Kernest?

When designing for the web, @font-face is the most-used technique for replacing boring standard fonts for stylish typographical styles.

Using @font-face we would need to find reliable hosting for the fonts we use in our designs that enables us to utilize fonts across with no domain-restrictive policies in place. There are also permission and copyright issues involved with embedding fonts in web pages, making the whole process even more complicated. Particularly as @font-face doesn't play too well with Blogger hosted sites...

Kernest is a free hosted service which we can use to embed a whole variety of free-licensed non-standard fonts in our Blogger template designs with ease:

Cross-domain issues are not an issue when using Kernest, though you will need to sign up for a free account and add the URLs for the sites on which you'd like to use your fonts so they're properly referenced.

You don't need to download or host any scripts on your own hosting account. Simply add the embed URL generated for your site in your Blogger template code and tweak the CSS for the textual areas of your design where you'd like your non-standard fonts to appear.

Kernest offers a huge variety of free fonts under various licenses including Creative Commons and GPL. Premium fonts are also available on a subscription basis. Browse by font style (ie: Serif, Geometric Sans, Oblique); by designer, font foundry or usage permissions.

Some of Kernest's most popular free fonts include:

Chunk5 by The League of Movable Type (one of my personal favorites).

Komika Axis by Apostrophic Labs

Bitstream Vera Bold by Bitstream

MgOpen Modata Bold by Magenta Ltd.

How to use Kernest with Blogger templates

In order to use Kernest to embed fonts in your Blogger based sites, you'll need to create an account and sign in.

Browse through the archives of fonts available and find a style you'd like to use in your site. Free-to-use fonts will display an "Embed" link beside the example text which opens a pop-up like this:

You can add a new site in which to embed fonts by pasting the URL of your blog in the space provided. After you've added a site, it will appear in the "Your websites" list whenever you are signed in.

Once you've added and selected your site, you'll be presented with the font embed code which you'll need to copy to your clipboard.

Add the font embed code to your template

Go to Design>Edit HTML in your Blogger dashboard and locate the opening <head> tag. Paste your Kernest embed code immediately after this tag, like this:

At this point, it's a good idea to save your template.

How to change fonts for headings, paragraphs and other text areas of your template

With the embed code in place, we can replace particular text areas of our Blogger design with the font(s) we have chosen from Kernest.

This is achieved by referencing the fonts in the CSS font-family tags. For example, to use Romeral for post titles, we could add the following CSS tag just before the closing </b:skin> tag in our Blogger template:

.post-title h3 {
font-family: 'Romeral';
}

The CSS tags you need to use for your preferred font can be found on the project page for each of your sites. You can access the project page while logged in to Kernest by visiting the "Your Websites" link at the top of every page.

Here are some commonly used text areas within Blogger layouts for which you may want to replace the fonts:

Description	Reference
The header section (title and description)	#header
Blog title	h1
Post titles	.post-title
Body of blog posts	.post-body
Sidebar headings	#sidebar h2
Sidebar text	#sidebar .widget-content
Footer section	.footer

Once you've added the relevant CSS tags to the <b:skin> section of your template, preview your design in your browser to see the font changes in action then be sure to save your template.

Do you use Kernest for your Blogger template designs?

If you're already using non-standard fonts with Kernest, please let us know of your experiences using this free service and showcase your sites for others to see this technique in action.

Or if you successfully use an alternative technique, I'd love to hear about it so please feel free to leave your comments below.

Blogger Buster - Relaunched!

2010-05-10T10:49:00.001+01:00

Those of you who have visited Blogger Buster over the past few weeks will have noticed gradual changes to the site, complete with a countdown timer to the date of relaunch.

Several weeks in the making (and still with a few tweaks to finalize), Blogger Buster's new look is finally unveiled:

About the new design

Although it seems some readers were rather fond of the old design, I felt it had become too cluttered and heavy in the context of information presentation. I wanted to clean up the overall visuals of the site, make it easy to navigate and reflect my own personality as a web designer.

As part of this redesign, I decided to re-brand Blogger Buster by incorporating a new logo and identity design by Switchcode (which will also be filtering through to my Twitter and Facebook pages):

Using conditional Blogger template tags, I've revamped the home page to offer better access to important areas of the site, and of course I now utilize Blogger's native post-summary technique which is far preferable to my previous preferred method.

Being somewhat fanatical about CSS, I've also introduced some CSS3 techniques to enhance the overall visuals of the site in supporting browsers:

While best viewed in Chrome or Firefox 3.6+, these techniques are degradable to ensure this site can be viewed in all browsers. However, I no longer support IE6 in my designs (and neither do the Blogger team!).

If you are among the unfortunate few to still be using this archaic browser, please please please upgrade to a modern means of browsing the web! (And here are even more reasons to upgrade from IE6 in case my pleas hadn't already convinced you.).

New articless in progress...

Though the Blogger team have added many new features during my hiatus, I've managed to stay up-to-date. While working on other web projects I have discovered loads of new techniques and Blogger template adaptations which I'll be sharing with you all over the forthcoming weeks including:

Why Blogger is a kick-ass CMS!
Designing for Blogger's new Template Designer
How to create a business website with Blogger
Using non-standard fonts for your Blogger-based design
...and much more!

Please feel free to let me know if there are any particular tutorials you'd like me to cover and I'll do my best to write on the most popular suggestions.

Soon to be accepting Blogger design projects!

After freelancing my web design skills for the past few months, I've decided to take the leap and offer my skills with Blogger and will be accepting requests for new projects in the next few weeks.

I'm currently updating my portfolio and working out the details but feel free to contact me if you'd like to know more.

What's your opinion of the new Blogger Buster design?

I'd love to know what you think about Blogger Buster's relaunch, so please feel free to leave your comments and suggestions below.

Blogger Buster eBooks - Updated Links

2010-05-07T12:41:00.000+01:00

As many Blogger Buster readers have reported, the links to download my eBooks had become corrupted during my extended hiatus.

Today I have uploaded both The Blogger Template Book and The Cheats' Guide to Customizing Blogger templates to Google Documents, a relocation I hope will prove far more reliable than my previous hosting solution!

I've updated the download links for these eBooks and hope everyone can now read and download these resources without any problems.

It's been a long time since these eBooks were released, so here's a quick overview of both offerings for new readers and those who may have missed the documentation upon their initial releases:

The Blogger Template Book

Choosing and using a new template for your Blogger powered blog can be quite a daunting task. What is the best method for installation? How can you choose the design and layout most suitable for your blog?

The Blogger Template Book is a free complete guide to Blogger templates, from choosing the best layout and design to suit your content, to foolproof installation methods and optimization.

Learn more »

Download The Blogger Template Book (PDF, 114 pages)

The Cheats' Guide to Customizing Blogger Templates

Originally published back in January 2008, this eBook will offer you many options and examples to customize your existing Blogger template quickly and easily, whichever style of template you are using!

Admittedly some of the techniques described in this eBook are outdated in lieu of Blogger's new Template Designer, though I hope many will still find this useful for learning the basics of Blogger template customization.

Learn more »

Download The Cheats' Guide to Customizing Blogger Templates (PDF, 53 pages)

A new eBook in progress...

I'm currently working on a new premium eBook for Blogger users which I hope to release in the summer.

The Blogger Book will provide a comprehensive guide to using Blogger's publishing service: from initial creation through to designing custom-made templates and hosting an entire website on Blogspot, this guide will help you learn tips and techniques for developing a truly amazing Blogger-based site.

Stay tuned by subscribing to the RSS feed or the new email newsletter and you'll receive updates (plus sneak previews) of the forthcoming book in addition to our regular content.

Declaring Email Bankruptcy

2010-05-06T12:23:00.001+01:00

After leaving my inbox virtually unchecked for the past six months, I'm declaring email bankruptcy.

If you've sent me an email before today and are not a family member or colleague, you may want to send it again.

Blogger Buster is starting over, and anything you send now should get through to my new Gmail powered (and hopefully, spam-free) set-up.

I have literally hundreds of unopened mail in my inbox (which would take weeks to sort through), and feel that declaring email bankruptcy is the only fair method to deal with this in lieu of a new start for the site. My sincerest apologies for anyone inconvenienced by this decision.

80+ Hand-Picked Beautiful and Original Blogger Designs

2010-02-03T17:12:00.001Z

Customizing our Blogger blogs is now easier than ever. Aside from the hundreds of pre-made templates available for us to simply upload to our sites, there are innumerable tutorials helping us design more beautiful and interesting sites. Yet some Blogger users look beyond these simpler design features to construct stunning original Blogger designs.

Over at We Love Blogger, you can find a daily showcase of inspiring Blogger-based designs. Here are the cream of the crop: more than 80 Blogger-powered blogs of unusual design or outstanding quality, provided as a feast of inspiration for your own projects.

Simply Stunning...

Blog Amuki

Poemaciones

EriSada

106 Piccadilly

Blogger Skinz

Mike Mnery

Cebong Ipiet's Personal Blog

Insight

Algo Habrán Dicho

15Shapes

Ultra Awesome

Iconerz

Dante Araujo

Packaging of the World

Blogzin

Recently redesigned, Harun's site is an excellent example of a clean and ultra-modern Blogger-based design.

Fan the Fire

Detruk

Design for Life

Quinto Elemento

Pale/Minimal Designs

One Design

Designorbus

Running From Camera

Lost Garden

Dunno.Dt

ZunePh

Design Crush

Hit.Art Design

A Cupcake Blog

Design is Mine

Bruno Paiva

último layout

Blogger Display Bil e Bia

Matte

Inspiration Seeker

Woork

While sadly Antonio Lupetti no longer uses Blogger as his publishing platform, Woork is still online and is a wonderful example of how Blogger may be utilized for professional, functional designs. (You may like to check out the new WoorkUp site to see the updated version of this infamous site).

Dark Designs

Creactiva

Another stunning design by Amuki.

Antrep04

AndreiKennedy.com

This is a Blogger design I created for my son, which is loosely based on the DVD menu screen for Quantum of Solace. Custom fonts are used in the sidebar and top--menu (provided by Kernest.com), while almost all areas have a mouseover effect.

Web Design Info Resource Center

PA Blog

Suresh Studio

Compartmos Ideas

ZixPK

Code-Code-An

Rames Studios

Cheth Studios

This beautiful design is adapted from the Woothemes Irresistable template, complete with consistent styling to match the branding of the site.

Benjamin Hennessey

A stunning header banner transforms this Minima-based template into a beautiful design.

Colourful Templates

Adam and Phoebe's Aquatic Adventures

I've added two screenshots of this brightly coloured template for you to see the amazing design added to the footer section.

Trestin Meachem

Filigrana

Backlights Decarotivis

Esperanto A Go-Go

Chantel's Fave Things

Green Corner Cookies

Extra Icing on the Cake

Monday Art Day

Crafty This and That

Phrock Blog

Forgotten Bookmarks

The Roozu

Visions of the Future

Widgets for Free

Praise for Wallflower

BAP Interrupted

The Hermitage

Glamumous

Multiversity Comics

Photoblogs/Single Column/Unusual Layouts

X_X

Cuatrotintas

Mike Matas Blog

Flickr Scotland

João Alvarenga

Inspired by Tim Van Damme's single page folio, this design really stands out from the crowds! Твиттер ковёр

Dzyn.Me

Another of my own designs, this site is my portfolio and professional blog design outlet. Based on the Nexus5 layout, it is a single column theme with different styling for each page of the site.

Last clicks...

Designlabel

Ahmad Hania Blog

On Pause

Because I Said So

Deluxe Templates

UrbanBG.com

David A. Stafford

AmandaFazani.com

My personal site, and truly an experiment in the possibilities of Blogger-design! As I begin to upload new posts, you'll notice each post will be presented in a completely different style (background, layout, fonts... everything!). It is difficult to maintain, but as I try out new things I'll be sure to post about them here!

Opus Independents

This last example is truly my favorite! The design is flash-based (and so not hosted by Blogger's servers) yet the core content (news, NowThen and Wordlife sections) are generated through the Opus Independent network of Blogger-powered sites. Site programming by Switchcode.

More please!

I love to showcase beautiful and original Blogger powered designs in posts such as this and also on the dedicated Blogger showcase site, We Love Blogger. If you've designed a gorgeous, original Blogger design (or have discovered an awesome website powered by Blogger) then please let me know by submitting your site to the directory.

Your thoughts?

Which of these designs do you like the best? Please feel free to leave your comments and opinions below.

Help! My Template Disappeared!

2010-02-02T13:37:00.007Z

As many of you may now realize, I've been on a somewhat lengthy hiatus...

Unfortunately in my absence, one of my websites used for hosting older templates and related images has disappeared! This means that many of you currently using these templates now find them unusable, or downright ugly.

~~Luckily, I've managed to find an old backup CD which includes most of these templates and I'm now in the process of updating them.~~

Unfortunately, the backup CDs are mostly corrupted. I'm unable to access the images used for these files in order to update the templates.

The templates affected by this issue are:

Sunset
Girly Web 2.0
~~Magical~~ - Now updated - see below
Sweet Dreams (all versions)

If by any chance any Blogger Buster readers still have the original Zip files or images (and would be willing to send these over) please do get in touch!

I'm truly truly sorry for those affected by this problem and will endeavor to do all I can to retrieve and update these older templates wherever possible.

I'll update this post regularly with details of any templates I am able to update with links to the updated files. Please let me know if you're experiencing issues with a template not listed here so I can attempt to resolve all problems as soon as possible

UPDATED FILES

2/2/2010 - Butterfly Template is now updated:

Images now hosted on Picasa
Template updated to support Blogger's latest features, including comment avatars and post pages

Download updated Butterfly template from Google Code

3/2/2010 - Magical Template is now updated:

Images now hosted on Picasa
Template updated to support Blogger's latest features

Download updated Magical template from Google Code

3/2/2010 - Sunset Template is now updated

Images now hosted on Picasa
Template updated to support Blogger's latest features

Download updated Sunset template from Google Code

Thanks to Switcher for sending over the original Zip files for the Magical and Sunset templates =]

Image credit: Alex E. Proimos, via Flickr

Resolved! Issues with the Twitter Updates Gadget (and others)

2009-09-23T22:34:00.002+01:00

This issue should now be resolved. I have checked the Twitter Updates gadget (plus others) on various sites, and am now assured everything should be back to normal.

I've been made aware of the issues many Blogger users are experiencing with the Twitter Updates gadget. At present, this is showing "tweets" from the user @undefined and ignores user preferences for the number of tweets to be displayed.

The same issue affects some of my other gadgets too: most notably, the Flickr, Picasa, TwitPic and Juitter gadgets.

As far as I can tell right now, this issue stems from a sudden, random error affecting any gadgets utilizing User Preferences. These issues do not seem to be affecting every blog in which such gadgets are installed.

The Blogger Team are aware of the issue and are investigating now. I'm also testing various changes to user preferences for my gadgets to see if a different solution to registering user preferences could resolve the issue for my gadgets.

I anyone is still receiving errors when using their Twitter Updates gadget (particularly if this displays tweets from @undefined's stream) please do let me know in the comments or send me an email.

Profile Avatars for Blogger Comments - Updated

2009-09-18T20:16:00.001+01:00

Displaying avatars beside comments in our blogs has been a long anticipated feature. Today, the Blogger Team announced that this feature is now enabled for Blogger blogs, allowing us to see the profile image or avatar of those leaving comments on our posts:

Today we have extended embedded comments to display profile images next to the comments that your visitors write. Though profile images have been available with the other commenting options, we are happy to bring them to embedded comments as part of the Blogger Birthday feature series (via Blogger Buzz)

However, this feature currently seems available only to those using Blogger's default templates.

Update: Soufiane of LeBlogger.com has kindly emailed me with a quick and simple solution for us to add the required code to customized Blogger templates! Details below.

For those of you using a standard Blogger template, you should easily be able to add comment avatars to your comment section with just a few clicks.

Here is what you should do:

Go to Settings>Comments in your Blogger dashboard, and ensure the "Show profile images on comments" setting is set to "Yes" (this appears near the bottom of this page).
Check a post page on your blog which has some comments to see if any comment avatars appear.
If no comment avatars are visible in your layout, go to Layout>Edit HTML in your Blogger Dashboard and click the "Revert widget templates to default" link near the bottom of the page. Warning - only do this if using a standard, uncustomized Blogger template!
After completing these necessary steps, comment avatars should now display to the left of comments on your posts.

How to add comment avatars to customized/non-standard Blogger templates

Soufiane of Le Blogger kindly emailed me details of the code we can add to customized Blogger templates in order to make comment avatars appear beside our posts (take a look at this post for the original details, in French).

It seems the method for us to use is far simpler than my initial impressions - we need only add two small sections of code to our templates in order for the comment avatars to function.

Here's what to do:

1. Go to Layout>Edit HTML in your Blogger dashboard, and ensure you check the "Expand widget templates" box.

2. Using your browser's search function, locate the following line of code (or similar):

<dl id='comments-block'>

Depending on your particular template, you may discover this is <div id='comments-block'> instead.

3. Replace this line of code with the following:

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

Note: if your template included div instead of dl, leave this intact and replace all other elements of the line instead.

4. Now, locate this line of code (usually a few lines further down, depending on your particular template):

<a expr:name='data:comment.anchorName'/>

Immediately before this line, paste the following section of code:

<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='35px' style='margin-bottom:-2px;' width='35px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>

If you use an "author comment highlighting" hack in your template, you will need to search for a second instance of <a expr:name='data:comment.anchorName'/> and paste the code a second time.

5. Finally, save your template.

Now when you view a post page for which comments are enabled, you should see avatars beside the names of respective commenters!

How to upload an image for your commenting profile

If you choose to comment using your Blogger profile and do not currently have a profile photo uploaded, you can quickly add a photo while posting a comment.

To do this, write your comment as normal and click the "Preview" button. In this preview section, you will be able to upload a profile image which will be displayed instead of the default Blogger favicon:

To edit an existing profile image, go to your Blogger dashboard and click the "Edit Photo" link beside your current profile image. This is the image which will be displayed beside comments posted on Blogger blogs for which this feature has been enabled.

Notes on Blogger's Comment Avatars so far...

Here's a few observations about the new comment avatar function, which may offer some insight into how this currently works:

Whose avatars will be displayed?

At present, comment avatars are only enabled for those using their Blogger/Google profile for their identity. Those who use the "Anonymous", "Name/URL" or other options when commenting cannot yet have a profile image displayed.

When using OpenID, Wordpress, LiveJournal, Typepad or AIM, the OpenID favicon will be displayed instead. Those commenting anonymously or using the "Name/URL" option will have no image displayed.

Of course, there is every possibility that the Blogger Team may soon, enabling those using other methods of identifying themselves when commenting to upload a profile image for display.

Can these profile images be styled differently?

It is certainly possible to style the way comment avatars appear in our blogs. Style may appear inline, as can be seen in the default implementation of this upgrade:

<img expr:src='data:comment.favicon' height='35px' style='margin-bottom:-2px;' width='35px'/>

It is also possible to style these images by adding declarations to the <b:skin> section of our templates using the following classes:

.avatar-image-container - the overall container in which the profile images are housed
.avatar-image-container img - to style the actual image, using borders, padding, background-color, etc.

I'll experiment with this in more detail over the weekend, particularly with reference to comment identities for whom avatars cannot be displayed (yet), and will post full details as soon as possible.

Avatars load after other content on the page

The script used to display the avatars on post pages is set to load after other content on the page. This may mean a few seconds' delay between the initial page load, and the avatars appearing beside comments.

What do you think of this new feature?

I am very happy that we are now able to display avatars beside our comments, but still feel there is room for improvement, particularly as those who do not have a Google account are unable to display their profile photo. I hope that in the future, the ability for anyone to upload their photo will become possible (or that at least a generic image could be displayed instead).

After I'd mentioned this on Twitter, I discovered some rather mixed reactions to the news - many complained that this feature should have been implemented far sooner, or expressed their preference for using Disqus comments instead.

So what's your opinion? Will you use this new function in your own Blogger blog(s)?

Please feel free to tell us your thoughts by leaving your comments below.

How to add Blogger's Read More function to customized templates

2009-09-11T20:50:00.001+01:00

As announced yesterday, Blogger have now enabled selective post summaries for our blogs. This means we can add a "jump break" in our posts, after which any content will only be visible on item pages.

Those of us using customized templates will probably need to add the code required for this function to work. In this article, I'll explain how easy this is to implement, as well as some helpful hints for customizing the "Read More" link.

Will the "Read More" feature work for my customized template?

For most Blogger users, adding the code required for Blogger's post summaries will enable selective summaries without error, even if you've already added the code to summarize your posts using the <span class="readmore"> hack.

The only templates this method will not work with is those which have added an automatic post summaries hack, which summarizes the posts based on the number of characters or words. This is because such customizations ignore any code added to the body of our blog posts and don't register Blogger's Jump Links.

If you'd prefer to use Blogger's Read More function than your current automatic post summaries, the simplest way to adapt your template is to remove references to the post summaries script - anything between the <script> and </script> tags used for your particular method.

If in doubt, refer to the author of the particular version of this script you are using.

How to add the code required for Blogger-powered post summaries

In order to add the "Read More" function to a customized template, we only need to add a few lines of code to our template's HTML.

If you're adding this code to your blog template, it is best to first add a new (or test) post in which a Jump Link is added. This ensures we can check our template customization to ensure everything works well beore saving.

To add a blog post with a Jump Link...

Simply create a blog post using Blogger's new post editor. This can be done either through Blogger in Draft, or by enabling the new post editor in the Settings>Basic tab of your Blogger dashboard.

Alternatively, you can edit your post in Edit HTML mode, and type  where you'd like the jump link to appear.

Ensure you have some content both above and below the Jump Link. Then publish your blog post.

If Jump Links have not already been enabled in your template, the post will appear in full. In this case, continue reading to learn how to add the code for Jump Links to your Blogger template code.

To add the code for Jump Links functionality to your Blogger template...

Go to Layout>Edit HTML in your Blogger dashboard and ensure you have checked the "Expand widget templates" box.

Then using your browser's search function, locate the following line of code:

<data:post.body/>

Depending on your individual template, you may find this enclosed between <p&gt or <div> tags. We need to leave these tags intact.

If you've added any other "Read more" hacks to your template (or have added other conditional statements to the Blog Posts section), you may discover more than one instance of <data:post.body/>. If this is the case, you need to edit the section which has <b:if cond='data.blog.url != data:blog.homepageUrl> a line or two above this.

Immediately after the <data:post.body/> line, add the following few lines of code:

<b:if cond='data:post.hasJumpLink'> <div class='jump-link'> <a expr:href='data:post.url + "#more"'><data:post.jumpText/></a> </div> </b:if >

Then preview your changes. If this has worked properly, your test post should display only the content added before the Jump Link. If you receive errors, or this technique did not enable the summaries, clear your edits, check the code you've added and begin again.

Styling the "Jump Link" and other interesting ideas

Now that we have "jump links" enabled by default in our Blogger templates, there are some useful and interesting tricks we may do to style the actual link and other properties of summarized posts.

Here's a few ideas to get you started.

Change the "Read More »" text

This is the simplest customization we can make. Simply go to Layout>Page Elements and click the "Edit" button for your Blog Posts gadget.

On this pop-up page, you can alter the text to something more suitable if desired.

Styling the "Read More » text

The "read more" text (or whatever phrase you may have changed this to) is enclosed in a <div> with the class of "jump-link". This enables us to add CSS to our <b:skin> section to affect the style of this particular link.

For example, the following CSS will give the Jump Link a red background, with white text and 3px of padding, thus overriding any other style statements for any instance of this particular link:

.jump-link a {
background: #ffff00;
padding: 3px;
color: #fff;
}

We could also add a :hover property with different colors for the background and text to create a different effect when a reader hovers over the "read more" text:

.jump-link a:hover {
background: #000000;
padding: 3px;
color: #ccc;
}

If you're fairly confident with CSS, you could easily adapt these examples to include background images, rounded corners, and indeed any property which would work with a link in the post.

Replace "Read More &raquo" with an image

Those who would prefer to use a linked image instead of a plain text link can replace <data:post.jumpText/> with image tags, like this:

<b:if cond='data:post.hasJumpLink'> <div class='jump-link'> <a expr:href='data:post.url + "#more"'><img src="url_of_image" border="0" alt="Alternative text" /></a> </div> </b:if >

Where "url_of_image" is the true URL of your image as hosted by your image provider (Picasa Web Albums is my current preferred option, and free to boot!).

Display image "thumbnails" on non-item pages

I rather like the hacks which enable automatic post summaries with image thumbnails, so was very interested to see if a similar solution can be used along with our Blogger Jump Links.

Unfortunately, our summarized posts do not (yet) offer an extra class to which we can add attributes for images displayed within them. Instead, we can use some conditional CSS to alter the size (and alignment) of images on non-item pages.

Here's the work-around I've successfully used so far:

Go to Layout>Edit HTML and locate the closing ]]</b:skin> tag using your browser's search function.

Immediately after this line, add the following code - adapted to your personal preferences of course:

<b:if cond='data:blog.pageType != "item"'> <style> .post-body img { img { max-width: 100px; width: expression(this.width > 100 ? 100: true);
float: right; }
<style>
</b:if>

Change 100 to a different dimension if you prefer your images to be wider or narrower than 100px.

If you prefer images to be aligned to the left, you can alter float: right to float: left instead. Delete this line altogether if you'd prefer the image to appear in the same alignment as specified in your post.

This technique is a variant of Blogger Tricks' Larger HQ Images hack, but instead of enabling wider images, we're using this to create thumbnails. By using the max-width property and omitting any references to height, we ensure images smaller than the specified width will not appear distorted.

To use this technique, ensure you add an image close to the top of your post, before the Jump Link. On non-item pages, this image will appear no wider than your specified width.

Issues with the sidebar shifting beneath blog posts after adding Jump Links to posts

Many people have reported that their blog's layout appears distorted after adding Jump Links to their blog posts. For some layouts, the Jump Link causes the sidebar to shift beneath the blog post, as though the link is outstretching the boundaries of the post section.

In the comments of my announcement post, N@k$h@tr@! explained that this is because the Jump Link is somehow inserted between the opening and closing DIV tags in the HTML of a blog post.

N@k$h@tr@! recommends to view any posts to which Jump Links have been added in Edit HTML mode and delete any <div> and </div> tags you find (full details may be found on this blog post).

The Blogger Team are aware of this situation, and I assume this glitch will be resolved soon.

What do you think of this new function, and possible customization techniques?

I hope this article fully explains how to add functionality for Jump Links to customized Blogger templates, and offers some insights as to how we can further customize the appearance.

Please feel free to let us know your opinions and any ideas for further customization of the Jump Link and summarized posts by leaving your comments below.

Image credit: clspeace

Nexus 5 - A New Blogger Template for Free Download

2009-09-08T16:09:00.000+01:00

It's been a while since I've designed a Blogger template for free release. But after reading this excellent tutorial on Smashing Magazine, I was inspired to create something different: an ultra-customizable, HTML5 based template for Blogger.

Nexus 5 is a one column template, with widgetized sections in the footer for any gadgets you may like to include. A wider, two column version will be available shortly for those who prefer gadgets in a sidebar section.

This template uses many HTML 5 and CSS3 elements to create a more innovative design without the use of excessive background images. It does gracefully degrade in browsers which do not support CSS3 elements to ensure the greatest percentage of visitors will appreciate the full scope of the design.

Here is a full screenshot of Nexus 5 as seen in Firefox 3.5 (my current preferred browser):

Demo | Download

Click the image for a full page preview, or simply visit the demonstration blog..

I've also tested in Internet Explorer (6-8), Opera and Safari. While the rounded corners and text-shadow effects do not function in browsers which don't support CSS3, the overall functions and general design of the site work well.

Main features of Nexus 5

I've tried not to overload this design with features, as I wanted to offer a clean design which loads fairly quickly and can easily be customized to your own particular tastes.

Instead, I have focused on only a handful of features which I hope will be suitable for everyone, and enhance the clean design of this template.

Ultra customizable!

One of Blogger's greatest features is the ability to customize our templates to suit our tastes, both through the Page Elements section (moving the location of gadgets, and customizing aspects of our post-footer section), and the Fonts and Colors menu.

While I love to see beautifully designed Blogger templates available for download, many cannot be altered so easily and require the user to edit the HTML of their template in order to make any change to the design.

For Nexus 5, I wanted almost every aspect of the design to be customized with ease. This means that:

ALL colors may be changed through the Fonts and Colors menu
Fonts for text and headings may be altered through the menu
All footer gadgets may be moved around, added, deleted, and so on.

The ONLY aspect of this design which requires editing of the HTML is the "About" section in the footer. I was unable to create a workable integrated gadget for this section without excessive editing of the gadget tags. This would have rendered the section unstable; while a simple text/HTML widget could not have included the HTML5 elements I wanted to retain.

Integrated Navigation Menu

This design includes a navigation menu as a Link List gadget. You can add links to your Home, About and other important pages simply by editing the Link List gadget in your Page Elements menu.

The "Subscribe" button is pre-installed and will point to your blog's posts feed automatically.

A cool feature of this menu is the button highlighting. The background changes when your cursor hovers over the link; furthermore, when the page URL is the same as the link URL, the button remains highlighted.

For example, if you link to your blog's "About" page, the "About" button will remain highlighted when a visitor reads this page.

Integrated "Featured Posts" section - no template editing required!

I love the "recent posts with thumbnails" gadget, and decided to integrate this functionality into the template as a "Featured Posts" section, which can be seen above the post content on non-item pages:

This section will display the title, snippet and thumbnail of the most recent post from the Featured category.

No editing of the template is required to make this function work - simply add the label "Featured" (with a capital "F") to any posts you prefer to appear in this section.

Hover Effect on Summarized Posts

Another feature I wanted to include for this template was Post Summaries. This adds only the summary of posts on non-item pages, including a smaller version of the first image from each post. This is based on the Automatic Read More Hack by Anshul Dudeja (which integrates the required javascript into our templates).

Rather than specify exact dimensions for images which appear in the summaries, I have only specified a width. This ensures images are not distorted, and that a specified ratio of height to width is not required.

Also, when you hover over a post on a non-item page, that post is highlighted by a different background and link-text effect:

The colors for the background, link and paragraph text used in this effect can all be customized through the Fonts and Colors menu in your Blogger dashboard.

Posts on Item pages do not include this effect: post text and images will appear in full.

Stylized "Social" Section

The "social" gadget in the footer section is a simple Link List gadget where you can add links to any of your social media profiles.

The icons which appear beside each link do not need to be manually added to your gadget. Instead, these links are coded into the CSS to appear beside targeted links.

Profile links which are supported by Nexus 5 include:

Blogger
Flickr
Del.icio.us
Digg
Facebook
Last.fm
Twitter
LinkedIn
MySpace
Picasa
Technorati

Any links added to the links list widget in this section will automatically have the appropriate icon appear beside it where available.

If I've missed any popular social networks which you'd like to see included, please let me know and I'll update the CSS.

How to install Nexus 5

Nexus 5 is rather easy to install. Since it requires very little editing of the template code, you should be able to get this template up and running within a few minutes.

Please note: these instructions are for the basic installation of this template. If you want to transfer widgets from your existing template over to use with Nexus 5, take a look at this tutorial instead.

First of all, download this template to your hard drive. This is an XML template, compressed in a Zip folder for easy download.

Once you've downloaded, open up the Zip folder and extract the Nexus5.xml file. You may need to use Winzip or WinRar if your OS cannot open compressed folders by itself.

Now that you've decompressed the zip folder, go to Layout>Edit HTML on your Blogger dashboard.

Near the top of this page you will notice the Backup/Restore Template section. Here you can choose to upload a new template by clicking the "Browse" button to locate the Nexus5.xml file on your hard drive. Select this file, then click the "Upload" button.

It's likely that you'll be prompted to delete any existing widgets that are in your existing template. If you need to retain any of these widgets/gadgets, cancel the operation and refer to this tutorial instead. Otherwise, confirm the deletion and continue.

Within a moment or two, your existing template will be replaced with your new Nexus 5 design, which you can customize according to your needs.

Configuring the Labels Gadget

The Labels (categories) gadget which appears in the footer section of Nexus 5 looks far better when the post count for each label is not selected. To change this option, go to Layout>Page Elements in your Blogger dashboard and click the "Edit" link for this gadget. You can also click the wrench icon beside this gadget while viewing your blog).

Uncheck the box for "Show number of posts per label" and save this change.

Note: while the "Cloud" option for labels will work in this template, when this option is used, the label cloud may not appear as desired. I have added support for the Cloud variant in the two column version of this design which will be available for download shortly.

Configure the Blogroll Gadget

This gadget is simply a Links List gadget for you to add links to your favourite sites.

Simply edit this gadget in the Page Elements page of your dashboard (or by clicking the wrench icon beside the gadget when viewing your blog) to add or manage links in this section.

Configure the Social Gadget

Again, this gadget is a simple Link List which can be edited with ease. The intention of this section is to provide links to your social media profiles, each of which will be highlighted with the appropriate icon.

For each link, copy and paste the URL of your social media profile and add appropriate explanatory text. The most popular social media sites are supported, so you can add as many or as few profile links as yu like in this gadget.

Display content in the Featured Post section

The Featured Post section is built into the template and requires no editing of the HTML code to work.

To make a post appear in this section, simply add the label "Featured" (with a capital F) to any of your posts. The latest post from this category will appear in this section on non-item pages of your blog.

If you prefer to display posts from a different label...

In order to display posts from a different label than Featured, you will need to edit your Blogger template.

Go to Layout>Edit HTML and search for the following line:

<script expr:src='data:blog.homepageUrl + "feeds/posts/default/-/Featured?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"'/>

Replace Featured with the name of the label you wish to use instead. This is case sensitive, so be sure to type the label name exactly the way it is used. Furthermore, all spaces should be replaced with %20 (the "escaped" code for a space in this URL structure).

Preview your template to ensure the correct post is being displayed, then save your template to complete the change.

Edit the "About" section in the footer

As explained earlier, the "About" section is the only aspect of this template which requires you to edit the HTML code in order to retain the HTML5 style structure.

Go to Layout>Edit HTML and locate the following section of code:

<address class='vcard body' id='about'> <span class='primary'> <strong><a class='fn url' expr:href='data:blog.homepageUrl'><data:blog.title/></a></strong> <span class='role'>One Line Description</span> </span> <img alt='Avatar Logo' class='photo' src='http://lh5.ggpht.com/_xn2gmPb9TfM/SqTYIFh4mQI/AAAAAAAAFXI/MjMhfBmc9To/s800/blogger-logo.jpg' width='50'/> <span class='bio'>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</span> </address>

The section highlighted in bold red is where you can add a brief (one line) description of your site. Simply change the text to a short description of your liking.

The code highlighted in blue is the URL for your avatar/photograph. This image needs to be 50px wide, though the section should accommodate any height. Upload your replacement icon to an image hosting site and replace the URL with that of your hosted avatar image.

The orange section of code should be replaced by a longer description of your site. Just use plain text or links here (<a href="url_here">link text</a>), as other CSS properties may cause the section's appearance to be misaligned.

Once you've made any appropriate changes, preview to ensure all looks well then proceed to save your template.

Change the Fonts and Colors to Create your Unique Design!

As mentioned earlier, all of the colors and fonts for the headings/body text may be changed very easily in the Fonts and Colors section of your Blogger dashboard:

Simply go to Layout>Fonts and Colors in your dashboard, and click around to edit each property of your design.

Images, CSS and JavaScripts

All of the images, CSS files and JavaScripts used in this template are hosted on secure and reliable servers. You do not need to upload these to your own host.

Most of the CSS used in this design is included in the b:skin section of this template and may be edited as desired. In order to appear correctly in all browsers, a few imported CSS files are also referenced in the design. These files do not require alteration to affect any visual aspect of the design.

For anyone wishing to make changes to the images, CSS and scripts used in Nexus 5, feel free to download the following file:

Download Image, CSS and Scripts pack for Nexus 5

Credits and Licensing

This template is licensed under the Creative Commons Attribution License. If you use this template or offer this for download from your own site, please include a link back to www.BloggerBuster.com as attribution for this design and retain the author information within the template code.

In all other respects, feel free to customize and use this template for any of your blogging projects.

Nexus 5 was inspired by this tutorial by Enrique Ramirez which appears on Smashing Magazine and was coded for use as a Blogger template by myself.

The script for post summaries is based on this tutorial from Anshuldudeja.com, while the Featured Posts section is based on this script by BloggerTricks.com.

Icons used to highlight blog feeds and links in the "social" gadget are designed by Quake9 and are published under the Creative Commons Attribution License.

Your thoughts?

I hope you enjoy using Nexus 5 in your blogging projects! Please let me know your opinions of this template by leaving your comments below.

How to Create a Sitemap with Google Feed Control

2009-09-01T21:39:00.002+01:00

One question I am asked often is how to create a sitemap, where posts are organized by category (label) and link directly to blog posts.

There are several ways this could be achieved, such as manually coding a sitemap, or using a service to generate the feeds for each individual label.

In this article, I'll explain my favourite method for creating a sitemap/table of contents for Blogger blogs: using a modification of Google "Feed Control" to generate a sitemap automatically using the minimal amount of code.

Overview

Creating a sitemap using Google's Feed Control is a relatively simple task. You need not know anything about JavaScript or HTML code in order to use this tutorial: so long as you're able to copy and paste, this should be fairly easy to install!

The sitemap we will create will list all post titles from your blog, organized by their category/label on a post page. We can then link to this post page from elsewhere in the Blogger template, such as a link menu beneath the header, or a link list in the sidebar which details links to other important pages of your site.

Once complete, your sitemap will appear something like this, featuring the title of your label, followed by links to each post filed under this category:

You may also like to take a look at the sitemap I've created for Blogger Buster to see how this works in more detail.

Update - Easy install TOC/Sitemap Script for Blogger by Abu Farhan

Abu Farhan has created a very simple Table of Contents/Sitemap script for Blogger users which can be installed very quickly and easily.

This alternative script uses only two lines of code, and can easily be pasted into a post page (or even a sidebar widget if preferred). All we need to do is change the URL of our blog.

Once installed, this script automatically parses and displays each post under label headings and displays in alphabetical order. What's more, the latest 10 posts from each category are highlighted with "New" so readers can easily notice the most recent posts.

Unlike my Google Feed Control script, this installation is not limited to 100 posts per category.

Be sure to take a look at this excellent script and installation instructions on Abu's site as this is much easier to install and generated a very clean, organized sitemap with little effort.

Thank you for sharing your script, Abu!

How to create your sitemap with Google Feed Control

There are four main steps to creating a dynamic sitemap with Google Feed Control:

Generate an API key from Google

Add the template for your sitemap to a post page

Paste in your API key

Paste in the URLs for your label feeds

Let's look at each step in detail.

Generate your API key

In order to use Google's Feed Control, you'll need to generate a unique API key for your blog.

This key will be unique to your particular blog, and may only be used on the domain you specify during sign-up. If you have multiple blogs and would like to install a sitemap on each blog, you'll need to generate a new API key each time.

Your API key is provided free of charge, and enables you to utilize scripts which are hosted on Google servers (so we don't need to upload and host these scripts elsewhere!).

So, first things first! Generate a Google AJAX API key for your site, and copy this long string to your clipboard (or your favourite text editor) for later use.

Paste the template for your sitemap into a post page

The next step to installing a sitemap is to paste the "template" on which your sitemap will be based into a post page.

Simply go to your Blogger dashboard and create a new post. Using the tabs at the top, switch over to the "Edit HTML" section of the post editor (if you do not usually use this function), then paste the following section of code into the content section:

<style type="text/css"> /** * Suppress everything except for title */ #feedControl .gf-snippet, #feedControl .gf-author, #feedControl .gf-spacer, #feedControl .gf-relativePublishedDate { display : none; } </style> <script type="text/javascript" src="http://www.google.com/jsapi?key=YOUR_API_KEY"></script> <script type="text/javascript"> /* * How to use the Feed Control to grab, parse and display feeds. */ google.load("feeds", "1"); function OnLoad() { // Create a feed control var feedControl = new google.feeds.FeedControl(); // Add blogger label feeds. feedControl.addFeed("http://URL-OF-YOUR-LABEL-FEED?max-results=100", "TITLE-OF-YOUR-LABEL"); feedControl.addFeed("http://URL-OF-YOUR-LABEL-FEED?max-results=100", "TITLE-OF-YOUR-LABEL"); feedControl.addFeed("http://URL-OF-YOUR-LABEL-FEED?max-results=100", "TITLE-OF-YOUR-LABEL"); feedControl.addFeed("http://URL-OF-YOUR-LABEL-FEED?max-results=100", "TITLE-OF-YOUR-LABEL"); feedControl.addFeed("http://URL-OF-YOUR-LABEL-FEED?max-results=100", "TITLE-OF-YOUR-LABEL"); feedControl.addFeed("http://URL-OF-YOUR-LABEL-FEED?max-results=100", "TITLE-OF-YOUR-LABEL"); feedControl.addFeed("http://URL-OF-YOUR-LABEL-FEED?max-results=100", "TITLE-OF-YOUR-LABEL"); feedControl.addFeed("http://URL-OF-YOUR-LABEL-FEED?max-results=100", "TITLE-OF-YOUR-LABEL"); feedControl.addFeed("http://URL-OF-YOUR-LABEL-FEED?max-results=100", "TITLE-OF-YOUR-LABEL"); feedControl.addFeed("http://URL-OF-YOUR-LABEL-FEED?max-results=100", "TITLE-OF-YOUR-LABEL"); feedControl.setNumEntries(-1); // Draw it. feedControl.draw(document.getElementById("content")); } google.setOnLoadCallback(OnLoad); </script> <div id="content"> Loading, please wait...</div>

The <style> section at the head of this code prevents the summary (usually printed by the Feed Control script) being displayed, so that only the linked title is displayed on the sitemap page.

You may notice I've also highlighted other sections in bold coloured text. These are the sections we need to edit for your particular blog, as outlined below.

Paste in your unique API key

In the code you have pasted in your post page, you need to replace "YOUR-API-KEY" with the unique API key you generated at the beginning of this tutorial.

It is easiest to have your API key copied to your clipboard; then highlight YOUR-API-KEY and key CTRL+V (or CMD+V) to paste the key instead of the phrase.

Paste in the URLs and titles for your Label Feed URLS

This step of the tutorial is a little more complex.

We need to paste the URLs of the label feeds we would like to use for the sitemap in place of YOUR-LABEL-FEED-URL, and replace TITLE-OF-YOUR-LABEL with an explanatory title for each relevant line of the Feed Control script.

Each line we need to edit looks like this in the script we have pasted into the post editor:

feedControl.addFeed("http://URL-OF-YOUR-LABEL-FEED?max-results=100", "TITLE-OF-YOUR-LABEL");

In total, I have used 10 lines (for 10 different labels) in the template script. If you require more, simply duplicate this line and add your label feed urls and titles as appropriate.

Similarly, lines may be deleted if you need to use less than 10 labels for your sitemap.

Your label feed URLs will be something like this:

http://your-blog.blogspot.com/feeds/posts/-/LABEL-NAME
or
http://www.yourblog.com/feeds/posts/-/LABEL-NAME

where LABEL-NAME is the name of the label you are using in your blog.

We also need to include the variable "?max-results=100" at the end of the label feed URL to ensure the maximum 100 posts from each label will be displayed. Otherwise, only the first 25 posts will display in our sitemap.

For example, the URL I use to display all posts filed under the Gadgets label is

http://www.bloggerbuster.com/feeds/posts/-/Gadgets?max-results=100

If any of your labels include spaces, you must replace the spaces with %20 instead.

Here's another example, using my Customize your Blogger Template label:

http://www.bloggerbuster.com/feeds/posts/-/Customize%20your%20Blogger%20Template

Finally, the URLs of your label feeds are case sensitive. If you use any capital letters in the names of your Blogger labels, you will need to match these in the label feed URLS.

The LABEL-NAME element of each line is where you need to type the name/title of the label feed. This aspect is not case sensitive, since it is not generated by your label feeds. If you like, you can use a title which is not the same as the label feed to offer a more explanatory title for your readers.

Here is how I have coded the sitemap for Blogger Buster:

<style type="text/css">
/**
   * Suppress everything except for title
   */
#feedControl .gf-snippet,.gf-author,.gf-spacer,.gf-relativePublishedDate {
    display : none;
}
</style>
<script type="text/javascript" src="http://www.google.com/jsapi?key=MY-API-KEY"></script>
<script type="text/javascript">
    /*
    * How to use the Feed Control to grab, parse and display feeds.
    */

    google.load("feeds", "1");

    function OnLoad() {
      // Create a feed control
      var feedControl = new google.feeds.FeedControl();

      // Add blogger label feeds.
      feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Customize%20your%20Blogger%20Template?max-results=100", "Customize your Blogger Template");
      feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Customize%20your%20Blogger%20Template?start-index=101&max-results=100", "Customize your Blogger Template (Part 2)");
      feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Blogger%20News%20and%20Issues?max-results=100", "Blogger News and Issues");
      feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Gadgets?max-results=100", "Gadgets");
      feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Free%20Blogger%20Templates?max-results=100", "Free Blogger Templates");
      feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Resources?max-results=100", "Resources");
      feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Custom%20Domains?max-results=100", "Custom Domains");
      feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Images%20Icons%20and%20Badges?max-results=100", "Images and Icons");
      feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Labels%20Categories%20and%20Tags?max-results=100", "Labels, Categories and Tags");
      feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Monetize%20Your%20Blog?max-results=100", "Monetize Your Blog");
      feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/RSS%20Feeds%20and%20Syndication?max-results=100", "RSS Feeds and Syndication");
      feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/SEO%20and%20Blog%20Traffic?max-results=100", "SEO and Blog Traffic");
      feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Blogger%20Template%20Resources?max-results=100", "Template Resources");
      feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Announcements?max-results=100", "Blogger Buster Announcements");
      feedControl.setNumEntries(-1);

      // Draw it.
      feedControl.draw(document.getElementById("content"));
    }

    google.setOnLoadCallback(OnLoad);
    </script>
<div id="content">
Loading, please wait...</div>

Once you have finished adding the Label feed URLs and titles to your Sitemap post, you can publish your post and enjoy using your new Blogger sitemap!

Troubleshooting your FeedControl Sitemap

Here are a few issues which you may encounter when installing your sitemap:

The sitemap takes ages to load!
This may happen if you use a large number of labels in your sitemap. Few label feeds will load quickly, while many will take a long time to load.

If this is of particular issue, try to reduce the number of labels/feeds in your sitemap.

The sitemap does not display!
If the sitemap does not load at all, this may be due to an error when pasting the initial template code, your API key or a label feed.

The best advice would be to begin the installation again, making sure you use the Edit HTML mode of your post editor and are careful not to accidentally delete any other elements of the code.

You should also take care not to switch to "Compose" mode while editing your sitemap as this sometimes makes involuntary changes to HTML code which could corrupt the sitemap script.

Certain Labels do not display any posts
This may happen in cases where the URL of your label feed is not quite correct, for example, the title is not capitalized, or spaces are not replaced with %20.

In this case, edit your template and check the URL of the offending label feed carefully for any involuntary errors. Make changes as appropriate, and save your template.

I have more than 100 posts filed under a particular label. How can I display all posts?
Google's Feed Control can only be used to display up to 100 posts from a particular feed. In order to display more results, we need to add a new feed variable, in which the start index is 101.

In the Blogger Buster sitemap, for example, I need to display more than 100 posts for the Customize your Blogger Template category. In the line after the first 100 results for this category, I paste a new line where the start index of the feed is the 101st post, like this:

feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Customize%20your%20Blogger%20Template?max-results=100", "Customize your Blogger Template");
feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Customize%20your%20Blogger%20Template?start-index=101&max-results=100", "Customize your Blogger Template (Part 2)");

If your label includes more than 200 posts, you can add a third variable where the start index is 201, and so on.

Adding extra content, and styling your sitemap

It is possible to add extra content to your sitemap page, for example, a explanatory paragraph or links to other important pages of your template.

Ideally, you should add this content while editing your sitemap in Edit HTML mode. Be sure to add this content above or below your sitemap script to prevent any errors which would prevent the sitemap displaying properly.

If you would like to style elements of the sitemap, you can achieve this using CSS (either by adding to the <style> section in the Sitemap script, or within the <b:skin> section of your Blogger template.

Here are the classes you can use for styling your sitemap:

#feedControl - the ID for the overall sitemap

.gf-title - the title of each label

.gf-author - the author of each post

.gf-relativePublishedDate - the published date displayed beneath each title

Final Thoughts

I hope this tutorial offers a comprehensive guide to using Google's Feed Control to create a dynamic updating sitemap for your Blogger blog! I understand this is not a simple "one click install" sitemap, though as this sitemap updates automatically each time we create a new post, I find this is the easiest, most flexible option to use.

I would love to know of any simpler installations for this sitemap, so if you have written one (or have discovered a tutorial), please feel free to let us know in the comments.

A Popular Posts Gadget from Google Friend Connect

2009-08-29T21:00:00.001+01:00

While browsing around looking for more Blogger gadgets to add to the directory, I discovered an awesome feature offered by Google Friend Connect: the Recommended (Popular) Posts Gadget.

This is a feature which I'm sure we've all been waiting for! While we have seen various implementations of popular posts gadgets in the past, I've found these are not as useful or easy to configure as I'd prefer.

In contrast, the Friend Connect Recommended Gadget stable, reliable and quickly updates. Being developed and hosted by Google ensures this is unlikely to suffer issues, and once installed it's very easy for your blog readers to recommend their favourite posts.

Want to see how it works? Take a look in the sidebar to see a list of posts recommended by Blogger Buster readers, and scroll down to the bottom of this post for the button you can use to vote (this appears on every page of Blogger Buster, so feel free to recommend any other posts you may like!).

Those of you reading this in a feed reader may like to pop over to the site to see this gadget in action.

How to install your Friend Connect Popular Posts Gadget

Unfortunately, this Friend Connect gadget is not (yet) installable in one click. There are two elements required for complete installation, and these are relatively easy.

Firstly, log into Friend Connect. You will need to use the same credentials (username and password) as you do when logging in to Blogger.

Once you've logged in, you'll see a page which appears similar to this one:

Any blogs which you have created with your Google account will appear in the list on the left-hand side of the page.

Click on the blog you would like to work with (if this is not already selected). This will open a sub-menu beneath the title of your blog.

Click the "Social Gadgets" link in this sub-menu:

On the following page, scroll down to the "Recommendation" widget - this is the gadget we will be using to display our blog's most popular posts, as voted by blog members:

Click through to create and style the Recommendation gadget for your blog.

Style the Recommendation List

In the first area of this page, you can choose how your recommendation list will be styled when added to your Blogger layout.

If you'd prefer any of the color elements (such as the background and border) to be transparent, simply delete the hex value.

You'll be able to preview the changes made to the style and settings of your recommendation list in the top right corner of the page.

Configure the Voting Buttons

The second area of this page enables you to configure the appearance of the voting button. This is what will appear on the post pages of your blog, and is what your readers will click to recommend posts they enjoy.

There are two distinct types of voting buttons you could choose from:

A "compact" button appears like this
A "modular" button appears like this:

For either style of button, you can choose between the heart or tick icons. When choosing the "modular" button, the colours of the text, border and background may also be altered:

Generate and add the JavaScript for your Gadget

Once you've configured the appearance you prefer for the recommendation list and voting button, you can generate the codes required to add these to your template by clicking the button in the third section of the page:

This will generate two different sets of code - one for the recommendation list, and another for the voting button.

Add the code for the Recommendation List

The easiest way to include the Recommendation List (the list of your most popular posts) in your blog is to paste the code into an HTML/JavaScript widget in your Blogger sidebar.

Simply highlight all of the code in the "aggregation gadget" section, and copy to your clipboard. Then go to Layout>Page Elements in your Blogger dashboard, create a new HTML/JavaScript widget in the area of your choice and paste the code from your clipboard into the content section of your gadget.

Add the code for your voting button on post pages

Ideally, we should add the voting button to appear only on item pages. This ensures there is no conflict when posting multiple buttons on the same page (for example, the blog home page which displays more than one post); it also makes for simpler installation.

To add the voting button to our item pages, we need to edit our Blogger template code.

Go to Layout>Edit HTML in your Blogger dashboard, and ensure you have checked the "Expand widget templates" box.

Then using your browser's search function, locate the line which contains <data:post.body/>

This section of code may be wrapped in <div> or <p> tags depending on the template you are using.

Immediately after this line, paste the following section of code:

<b:if cond = 'data:blog.pageType == "item"'>  </b:if>

Next, copy the second section of code generated for your Friend Connect Recommendation widget:

And paste this between the &ltb:if cond...> and </b:if> tags which we previously added in the template code.

Here is how the completed installation should appear:

<b:if cond = 'data:blog.pageType == "item"'>

<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>  <div id="div-1020104213976883876" style="width:100%;"></div>  <script type="text/javascript"> var skin = {}; skin['HEIGHT'] = '21'; skin['BUTTON_STYLE'] = 'compact'; skin['BUTTON_TEXT'] = 'Recommend it!'; skin['BUTTON_ICON'] = 'heart'; google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */); google.friendconnect.container.renderOpenSocialGadget( { id: 'div-1020104213976883876', url:'http://www.google.com/friendconnect/gadgets/recommended_pages.xml', height: 21, site: '06135972569882299778', 'view-params':{"pageUrl":location.href,"pageTitle":(document.title ? document.title : location.href),"docId":"recommendedPages"} }, skin); </script> </b:if>

Once you've pasted the script, preview the changes you have made to ensure the button does not appear on your blog's home page. If all looks well and no errors are reported, continue to save your template and complete the installation.

Using your Recommendation Gadget

At first, your recommendation list will not display any posts. This is because no posts have yet been voted for using the voting button.

You could vote for a few posts yourself by clicking on the voting button on post pages, or you could simply wait for readers to vote by themselves.

When using the voting link, a pop-up page will appear prompting the user to log into Friend Connect (if they are not already logged in) and afterwards will be able to recommend the post. Votes are counted almost immediately, and are listed beneath each item in the Recommendation List:

What do you think?

I sincerely prefer the Friend Connect Recommendation Gadget to other "popular posts" widgets I have tried as the results are based on reder engagement and genuine recommendations which offer a greater sense of community than "page views" alone.

My only reservation is that this gadget cannot be added in a few simple clicks. Having to edit our Blogger templates to add the voting buttons id a dissuading factor for many when considering whether or not to install it.

That said, I have a good feeling that this gadget may soon be integrated into the Blogger system, as so many Friend Connect gadgets and features already have!

What do you think of the Friend Connect Recommendation gadget? Is installation too complex, or are you happy to use this gadget for readers to recommend their favourite posts?

Please let us know your opinions by leaving your comments below.

Image credit: RichKidsUnite, via Flickr Creative Commons

Share Posts from the Blogger NavBar

2009-08-29T10:41:00.000+01:00

Yet more treats for Blogger's 10th birthday celebrations were released for us today!

An additional button in the Blogger Navbar now enables us to share our posts via Twitter, Facebook, Google Reader and by email:

When a reader clicks the "Share" link on your blog's home page, they can opt to share the URL of your blog by Twitter, Facebook or Google Reader. On item pages, the pop-up box includes the additional option to share by email:

When readers share your blog and posts, additional parameters are added to the URL which helps you track the syndication of these posts using Google Analytics in the format "?spref=nn" where the nn part is changed to fb for Facebook, tw for Twitter or gr for Google Reader.

For example:

http://buzz.blogger.com/2009/08/share-from-nav-bar.html?spref=tw (sharing the announcement post on Twitter)
http://www.bloggerbuster.com?spref=fb (sharing the Blogger Buster homepage on Facebook)

You can then search for URLs ending with these parameters when using Google Analytics to view details of how your posts have been shared.

Of course, this new feature is only available to those who have not chosen to hide the Blogger Navbar!

If your Blogger template does not display the Blogger Navbar and you would like to make it reappear in order to use this new feature, here is what you should do:

1. Go to Layout>Edit HTML in your Blogger dashboard.

2. Using your browser's search function, locate the following section of code:

#navbar-iframe {
height:0px;
visibility:hidden;
display:none;
}

This should be located within the <b:skin> or <style> section of your template.

Delete this section of code, then preview your template. If all is well, the Blogger Navbar will be visible again, enabling your readers to syndicate your posts with ease. Instructions to hide the Blogger Navbar can be found here.

What do you think of the new Navbar "Share" feature?

I admire the determination of the Blogger team to roll out so many new features for this platform in just a few short weeks! The addition of this sharing feature will be useful for many bloggers, though those of us who choose to hide the navbar for aesthetic purposes will need to adopt other methods of sharing our posts.

What do you think of this latest birthday gift? Will you find this useful? Is this enough to persuade you to display the navbar again (if you have currently chosen to hide it)?

Please feel free to leave your comments and opinions below.

Introducing GadgetsForBlogger.com - A Searchable Directory of Gadgets for Blogger

2009-08-28T23:01:00.000+01:00

Since Blogger launched the Gadget directory, I've been keeping track of new submissions and developing several gadgets of my own. While Blogger's directory is searchable, I realised that many bloggers would find descriptive reviews, screenshots, developer details and installation instructions a useful addition to the brief descriptions offered in the directory listings.

So I decided to create Gadgets for Blogger - a searchable directory of gadgets which have been developed specifically for the Blogger platform.

Each gadget listed in this directory features:

The gadget title
A full description of the gadget
Screenshot of the gadget in action
Details of ads included in the gadget (where applicable)
Contact/website details of the gadget developer (where possible)
Quick install link, to add the gadget to your blog without having to navigate to your Blogger dashboard and through various menus to locate the installation link.

All gadgets listed on Gadgets for Blogger have been tested first, to ensure they display properly when installed in a Blogger blog and also to provide instructions where installation techniques may not be immediately obvious.

Featured Gadgets

The very best gadgets are assigned to the "Featured" category. These gadgets are all of exceptional quality in terms of coding, appearance and usefulness. The most recent additions to this category are highlighted above the main listings in the Featured posts showcase:

You can also find all Featured Gadgets by viewing the Featured gallery.

Submit Your Own Gadgets

If you have developed any gadgets of your own, feel free to fill in this form to submit your gadget for inclusion in the directory once they meet the following requirements:

Your gadget must have been developed for use with Blogger powered blogs
The gadget should be tested and working
Spam and malware gadgets will not be included. If your gadget contains ads, this will be described in the listing page.
Include the URL where your gadget is hosted. This enables us to create a link for readers to add the gadget directly from this site.

Here are some useful resources for Blogger gadget developers:

Blogger Gadget Developer's Guide
Google Gadget Developer's Guide
Best UI Practises for Blogger Gadgets
Google Code (for hosting your gadgets and associated scripts)
Submit your gadgets to Blogger for inclusion in the official directory

Regular Updates

I'll be updating Gadgets for Blogger on a weekly basis (at least) to include any new submissions to the official Gadget directory in addition to any direct submissions on the site.

Feel free to suggest any gadgets I may have missed and I'll try to get these included as soon as possinle.

Your Thoughts?

Do you think Gadgets for Blogger will be a useful resource for the Blogger community? Do you have any suggestions for how it may be improved?

Please feel free to let me know your thoughts about this new project by leaving your comments below.

Improved Label Gadgets - Now Supporting Label Clouds and More!

2009-08-26T01:04:00.000+01:00

As part of Blogger's 10th Birthday celebrations, the Blogger team have been hard at work developing enhancements and new features.

Today, Blogger launched an enhanced "Labels" gadget which now supports label clouds, and allows us to choose which of our labels are displayed within the gadget:

In April, we announced that we wanted to hear from you about your wish list for features in Blogger. Many of you said that the label gadget should be more flexible. Today we are rolling out two enhancements to the label gadget. (Via Blogger Buzz)

Blogger's Label Cloud

Label clouds are a popular way to display label lists in Blogger templates. Previously we have needed to use extensive customizations and JavaScript to enable labels to display in cloud format as opposed to a regular list, where the size of the font indicated the popularity of the label within the blog:

Adding a label cloud to your Blogger blog is now incredibly easy! Simply go to Layout>Page Elements in your Blogger template and choose to add a new gadget in the area of your choice. Select the "Labels" gadget from the "Basics" menu, and you'll be presented with a screen like this:

In the "Display" options, choose "Cloud", then save your new gadget. Now when you view your blog, you'll see your labels display in cloud-like formation, with more popular labels highlighted in larger text.

Customizing the Label Cloud

By default, the labels will be styled to fit with other elements in the same section. All labels will appear in the same color as other links in this area and size is determined by the popularity of the label, on a scale of 1-5 (where 5 is the most popular).

If you would like to style the label cloud, you can add additional CSS to your Blogger template using the following classes:

.label-size-1 a - The class of the smallest size label in the cloud
.label-size-5 a - The class for the largest size label in the cloud

Here's an example of how you could style the largest labels to get you started:

.label-size-5 a {color: #cd0000; font-size: 3em; text-decoration: none; }

.label-size-5 a:hover { text-decoration: underline; }

I'll write up a full tutorial in the next couple of days explaining in more detail how the labels may be customized to your particular preferences. In the meantime, I hope these class examples will help those familiar with CSS to begin styling their own label clouds.

Choose which labels to display

The second improvement to the Labels gadget is the ability to choose which labels are displayed in the gadget.

This is an ideal solution for those who use many different labels in their blog, and find the long display or confusing navigation difficult to deal with.

To select which labels you would like to display in your gadget, add (or edit) a Labels gadget, and choose "Selected Labels".

You can then edit the list of labels and deselect any which you prefer not to be displayed:

One feature which I like best about this enhancement is that we can choose to use more than one Label gadget to differentiate between "Categories" and "Labels" - at least in the sidebar gadgets!

For example, we could title one label gadget as "Categories", and choose to display only a handful of descriptive, "category" labels as a list. Next, we could add a second label gadget named "Tags" which displays as a label cloud and shows all tags used in the blog.

Of course, this does not yet perform the same differentiation for posts as true "categories" would, but it is a good start and enhances usability for our blog readers.

Final Thoughts

Overall, I am very impressed with these enhancements to the Blogger Labels gadget as they enable us to customize the navigation experience for our readers.

I'm sure the Blogger team have even more great features and enhancements to roll out as part of Blogger's 10th birthday celebrations and look forward to reporting and explaining more about these in the coming weeks.

Feel free to let us know your own opinions and experiences of these enhancements by leaving your comments below.

Happy 10th Birthday Blogger!

2009-08-23T22:07:00.001+01:00

Today marks ten years since Pyra Labs first unleashed Blogger onto the world! And how Blogger has grown: from humble beginnings to a multi-national, multi-lingual, Google-owned, highly powerful publishing platform which hosts over 300 million blogs (not counting those hosted on custom domains...).

In celebration of this remarkable date, the Blogger Team have planned some wonderful treats for the Blogger community:

Wait, what? What we could give you? That's right. This is our birthday — but we're celebrating your contributions over the years. Over the past decade, millions of people around the world have made Blogger what it is today: a vibrant community of real people telling their stories. [...]

As we turn ten, we wanted to give you some presents to commemorate this milestone and thank you for letting us be part of your story. Over the next several weeks we will be releasing a number of new features on Blogger. Some presents are because you asked for them this spring. Other presents are because they meant a lot to us. And some are because our friends (both inside and outside of Google) wanted to chip in and give you something... (via Blogger Buzz)

Already a few of these blogging treats have been released:

Support added for the PubSubHubbub protocol which enables our feeds to be syndicated in real-time by supporting feed readers, such as Google Reader. Learn more
Blogger support added to Google Reader's "Send To" feature, which enables easy syndication and sharing of posts. Learn more

There's a few more features which I suspect (though cannot confirm) will be released soon, and one striking, great big feature which I know will be welcomed by all...

I can't tell you about that yet.

But I promise, the wait will be worth it!

Wishing Blogger and the entire, hardworking Blogger team a wonderful 10th birthday! We're all looking forward to these new, interesting and useful features you have planned for us.

Here's to many more decades of "push button publishing" with Blogger!

Image credit: D Sharon Pruitt (via Flickr Creative Commons)

Thank You to my 10,000 RSS Subscribers

2009-08-21T12:39:00.004+01:00

As I logged into Feedburner today, I realised Blogger Buster has reached an awesome milestone - we now have 10,000 RSS subscribers!

It doesn't seem that long ago when I set my first target of achieving 500 daily readers, when Blogger Buster was in it's infancy. How far this site has come since then!

So today I wanted to extend a great big THANK YOU to everyone who subscribes to this site! I'm awed that 10,000 of you enjoy reading my Blogger posts enough to read my updates in your feed readers and by email subscription. This truly makes my blogging ventures worthwhile :)

For those of you who may read on occasion, who have bookmarked Blogger Buster for future reference or have simply stumbled upon this post, why not join the other 10,000 subscribers and also receive regular updates on the latest Blogger tips, tricks and news? Just click the subscription button below and choose how you would like to subscribe - I promise it will take only a few moments of your time.

Subscribe to Blogger Buster

Once again, thank you all for subscribing to Blogger Buster, for leaving comments, sending news tips and templates, and for your engagement in improving the Blogger community!

Tagnetic Poetry for Blogger?

2009-08-18T23:46:00.001+01:00

Here's something interesting I've been working on lately: a "Tagnetic Poetry" widget/add-on for Blogger.

Based on Roy Tanck's Tagnetic Poetry plugin for Wordpress, this widget can be used to add interesting stylized links for label pages or other interesting posts. It uses Flash to create and display the links and their titles, and chooses a different layout each time the page is reloaded. Try refreshing this page and you'll see how this works.

Here's an example of how this Tagnetic Poetry widget displays linked label tags from this blog:

Tagnetic Poetry by Roy Tanck and Merel Zwart requires Flash Player 9 or better.

Ideally, this widget needs lots of space and short labels/titles to display properly. The script will not display lengthy tags unless there is enough room for them to be rendered properly, so where many tags are displayed, one or two tags may be missing.

So... it's not ideal, and certainly not a useful function for bloggers who require a great many links to be displayed, but you've got to admit it looks pretty good ;)

I understand that many of you would like to install a tag board like this in your template, so I am working on an installable widget/gadget which will enable you to add this to your layout or within a post page.

However, installation is rather difficult. We cannot simply use labels to auto-generate the links because the script requires the tags and links in "escaped" HTML, and I'm unable to replicate. We would also experience the problem of lengthy (or many) tags interfering with the display and unescaped spaces in URLS (which would break the script altogether)... I'm sure this is a lack of experience with JavaScript on my part, and would welcome any ideas to improve this widget!

So in the meantime, I'll work on a tutorial to explain how I add this to Blogger templates and pages. This will be complex, but will enable you to install with a bit of work. And if there are any JavaScript developers who would like to help me work on an installable version - please do get in touch!

Thanks to Roy Tanck, upon whose hard work this Tagnetic Poetry widget is based. Don't forget to check out Blogumus - the Blogger version of his excellent WP-Cumulus plugin, and feel free to leave any comments below.

101 Awesome Free Blogger Templates.

2009-08-10T13:00:00.003+01:00

Blogger template design has evolved so much since I posted the showcase of 101 Excellent Blogger Templates and the follow-up of 125 more...

This past year, we have seen some incredible changes to the sheer quality and quantity of free templates available for the Blogger platform! From incredible magazine style designs with automatic post summaries to beautiful photo showcases, lifestream templates and everything between - there are high quality designs to suit every requirement, or inspire you in the creation of your own unique designs.

For your browsing and inspirational delight, here is my showcase of awesome Blogger templates for summer 2009. These have been selected because of their outstanding quality, attention to detail, beautiful layout and feature-rich design.

I've categorized these themes under nine headings to help you find the perfect template for your site: Simply Awesome, Magazine and Gallery Styles, Bright and Colourful, Minimal and Simple, Dark Designs, Feminine and Flirty, Travel Themes and Miscellaneous Templates.

Each template includes a high-resolution screenshot, a link to a live demonstration blog and links to the Blogger designer/coder's download page where you will find instructions, licensing and further details for the design.

Due to the sheer number of images, this page may take a while to load. Please be patient - I promise the wait will be worth it!

Simply Awesome!

This selection includes some of the most stunning and well-designed templates I have found. These templates are image-heavy and highly stylized, but I'm sure you'll all agree they are awesome!

Papelys y Color

Blog Amuki is one of the most astounding Blogger based designs I have ever seen! I was awestruck to discover this hugely talented designer has released some Blogger templates for free!

This is the first template by Amuki, which features a very interesting effect to hide the sidebar. Be sure to check out the demo to see this effect in action!

View Demo | Download Papeles y Color

Paper Wall

Originally designed for Wordpress by Indezigner, this theme has been converted for Blogger three times, by BloggerThemes, Blogger FAQs and Deluxe Templates. Each conversion is slightly different but both look absolutely superb and deserve these links to their download pages ;)

View Demo | Download from BloggerThemes | Download from Blogger FAQs | Download from Deluxe Templates

Showcase

This is a perfect template for anyone wishing to showcase images/templates and the like using Blogger.

Created by the talented Dante araujo, this showcase-style design works almost right out of the box and even includes javascript-based summaries so that text is hidden on non-item pages.

View Demo | Download Showcase Blogger Template

Eden's Garden

This beautiful template was designed by RayCreations. Featuring a stunning background, stylized headings and date headings, this is bound to impress visitors to your blog.

View Demo | Download Edens Garden

Tree House

Designed for Wordpress by Skinpress, this adorable theme has been converted for Blogger by FalconHive.

This theme is surprisingly easy to set up: full instructions are provided on the download page, while the navigation and 125px ads can all be configured using widgets in the layout.

View Demo | Download Tree House Template

Craftwork

This theme was originally created by EzWpThemes and converted for Blogger by Blogger FAQs. A feminine and quirky design, the appearance has been considered in all areas and makes for a stunning theme.

View Demo | Download Craftwork Theme

Gamma Ray

This stunning dark theme includes an animated featured posts section and very stylish typography. An original design by Insight Your Blogger.

View Demo | Download Gamma Ray

ImpreZZ

This fabulous template offers a three column layout with integrated Twitter updates and beautifully styled headings in the central column. Converted by Falcon Hive from the original design by Gopal Raju.

View Demo | Download ImpreZZ

Art Template

Here's another memorable EzWpThemes conversion, this time by Gosu of FoolBlogger.com. Designed to appear like a scrapbook, this highly stylized theme is colourful yet very functional.

View Demo | Download Art Template

Magazeen

Designed by WeFunction for Smashing Magazine, this Blogger template conversion from Zona Cerebral is simply awesome! Don't be deceived by the apparent simplicity of the layout: once you see this template in action you'll understand why I like it so much.

Beneath the header section is an area of thumbnails which link to recent posts. When you hover over a thumbnail, the title of the post it links to will fade in (and out) above the thumbnails. The footer too is well-styled, and while this template will require personalization for your particular blog, I promise the results will be well worth the effort!

Demo | Download Magazeen Template

Wooden Fence

Here's another stunning conversion from Alvaris Falcon, converted from the Wordpress theme by TemplateLite.

This three column theme is beautifully designed with image-heavy backgrounds in the style of a sunny garden.

View Demo | Download Wooden Fence Theme

Magazine and Gallery Styles

In recent times, magazine and gallery style themes have become very popular.

Magazine-style themes are ideal for niche blogs which are regularly updated, and where the showcase of a particular category assists readers in navigation.

Gallery-style templates are perfect for photo-bloggers, artists and designers to showcase their works as in portfolio fashion.

All of the following templates make excellent use of functions and CSS styles to ensure magazine and gallery style themes showcase the potential of Blogger as a powerful publishing tool.

Dreamy

Here is a simple, elegant and fresh template by Dante araujo which includes automatic post summaries and thumbnails on the home page.

View Demo | Download Dreamy Template

Clean Milano

Here is an elegant design with an unusual colour scheme, particularly effective for a business/corporate blog. Converted from the WP theme by Jinsona, Falcon Hive's Blogger template is excellent and well worth a look.

View Demo | Download Clean Milano

Falkner Press

This design is simply fabulous! Converted by BloggerTricks from the original design by CamelGraph.com, this features automatic summaries, recent posts with thumbnails, a featured posts section and integrated YouTube embed.

View Demo | Download Falkner Press Template

The Latest

This is a clean, magazine style theme with read-more feature for posts on the home page and split header section (perfect for adding wide adsense banners above the fold).

Converted from WpThemeDesigner's template by Anshul.

View Demo | Download The Latest

Photoplus +

This template by Dante araujo is a fantastic template for photo bloggers, designers and artists! Only the images of each post are visible: these thumbnails expand into a larger version using the JQuery FullSize feature.

Be sure to check out the demo for this template: I am very impressed by this template as it demonstrates the full potential of Blogger as a web-publishing tool.

View Demo | Download Photoplus +

Infinity

When I saw the Wordpress version of this theme on Smashing Magazine, I wondered when it would be possible to see a conversion of this for Blogger. And finally it is here!

Originally designed by Vikiworks.com, this has been converted for Blogger by Blogger FAQs and features thumbnails for posts on non-item pages, integrated Flickr photostream and stunning graphics in the background.

View Demo | Download Infinity for Blogger

Gumball Special

A clean, magazine style theme, Gumball Special was originally designed by Evan Eckard and has been converted for Blogger by Blogger FAQs.

View Demo | Download Gumball Special

Magasin

A stylish magazine layout from Falcon Hive which has been converted from the original theme by PaddITsolutions.

Features a featured posts slideshow, automatic post summaries and excellent use of space in the sidebar.

Demo | Download

Zitizen

A fully functional template with featured posts slideshow and recent posts thumbnails in the header. This is converted from a template by Jinsona by Cahaya Biru.

View Demo | Download Zitizen

Showcase Light

A pale version of Dante araujo's Showcase theme, which includes automatic thumbnails and a fresh take on the colour scheme.

Demo | Download

Schemer Mag

This is a stunning, unbtrusive magazine style design which makes use of all available space in a truly elegant manner. Converted from the WP theme by Wpthemedesigner.com by Blogger Tricks.

View Demo | Download SchemerMag Template

Zinmag Futura

This is a truly stylish, magazine style theme converted from Jinsona's WP Theme by Cahaya Biru. With bold contrasting colours, a sliding featured posts section and integrated Twitter updates, this is a stylish and highly functional template.

Demo | Download Zinmag Futura

Cellar Heat Light Gallery

This is a pale, gallery-style version of the popular Cellar Heat theme by Evan Eckard, which has been converted for Blogger by MagzNetwork.

View Demo | Download

Mahusay

Here is a stunning, elegant template which has been converted from PaddItSolutions' WP theme by FreeBloggerTemplate. It features a slideshow "featured posts" section in the header and stylish presentation throughout.

View Demo | Download Mahusay Template

GameZine

This is a tremendous theme which really needs to be seen in action in order to be fully appreciated! Gamezine is converted from the WP theme by Jinsona Design by Cahaya Biru. It is designed to be a showcase style template for gaming Bloggers, and includes a wonderful magazine-style on the main page.

View Demo | Download GameZine

Bright and Colourful Templates

The use of strong, bright or contrasting colours can really make a blog design come to lie. Here is a selection of colourful and memorable templates to enhance the appearance of your blog:

Spring

A stunning design from RayCreations with tabbed navigation and high-res background image.

Demo | Download Spring Blogger Template

Magasin Diez

This cheerful, bright coloured theme uses few background images and is very pleasing on the eyes. Converted from the WP theme by Deluxe Templates.

View Demo | Download Magasin Diez

Night Whimsey

This three column layout was converted from the original theme by Scribblescratch by DeluxeTemplates.

Demo | Download Night Whimsey

Retrograde

Harking back to designs of the past, this bold and colourful template will brighten any blog! Converted from the original CSS template from Dawghouse Design Studio by Blogger FAQs.

View Demo | Download Retrograde Template

Paradise Valley

Fresh, colourful and beautifully designed, this theme by RayCreations is simple yet truly awesome.

View Demo | Download Paradise Valley

Nature Blog

A clean and fresh blog theme, converted from the WP Theme by WebDesignLessons by Deluxe Templates.

Demo | Download Nature Blog

Red Light

This bright and eye-catching template was converted from Template Lite's WP theme by Blogger Styles. It offers a three column layout with stunning large background image and many stylistic features throughout.

Demo | Download Red Light Template

Green Scrapbook

Converted from the WP theme by SimplyWP, this muted colour theme is simple yet effectively presented. Blogger template coded by Ipietoon.

View Demo | Download Green Scrapbook

Maroon King

This is a simple, red-toned theme was created for Blogger by Skinpress and offers a clean simplistic layout and an integrated feed link in the header.

Learn more and download

Minimal and Simple Designs

Colour, layout and typography alone can serve as the basis for a great design. These simple, minimalist templates use few (if any) images, ensuring that the blog content is the main focus of the readers' attention:

Scrappy

This fast-loading three column blog features three narrow columns and lots of eye-pleasing white space. Ideal for micro-bloggers, this was designed for Blogger by Dante araujo.

View Demo | Download Scrappy Template

Extreme Georgia

This simple typographic template was converted from Mentariwork's CSS template by Deluxe Templates.

View Demo | Download Extreme Georgia

Typoork

Antonio Lupetti of Woork has always had an exceptional eye for design. Typoork is his latest free Blogger template offering, featuring an exceptional clean layout and beautifully ordered typography.

View Demo | Download Typoork

Quick Chic

An elegant, vaguely feminine theme with minimalist layout. Based on the theme by Quick Online Tips and Bloggerized by ChicaBlogger.

View Demo | Download Quick Chic

Halo 01

This is a two column template of my own design which features a unique approach to presenting the meta-data for each post.

View Demo | Download Halo 01

Showoff

A simple, yet highly effective design which includes integrated Twitter updates beneath the header and navigation links. Designed by Dante araujo.

View Demo | Download Showoff template.

Showoff Light

A pale white and red version of Dante araujo's Showoff template.

View Demo | Download Showoff Light

The Summer

A simple two column theme with only one backgroud image which instead focuses on CSS based colour and typography. Designed for Blogger by Deluxe Templates.

View Demo | Download The Summer Template

Smash My Typo

Originally designed for Smashing Magazine by Alexander Dahlberg, this elegant minimal template was converted for Blogger by Blogger FAQs.

View Demo | Download Smash My Typo

Excess

This simple green-toned template is based on the CSS template by FreeCssTemplates and has been converted for Blogger by Blogger FAQs.

View Demo | Download Excess Template

Think Simple

This elegant simple theme features three columns and integrated RSS subscription links. This was designed for Blogger by Deluxe Templates.

View Demo | Download Think Simple

Dark Designs

Templates of a dominant dark colour scheme work beautifully where bright contrasting images are presented in the posts.

Many designers choose to adopt a dark colour scheme for their blogs, though these templates may also be adapted for personal, business and technology-related niches:

Gotham Nights

This stunning dark theme was originally created for Wordpress by Evan Eckard, and has been converted for Blogger by Blogger FAQs.

View Demo | Download Gotham Nights

Black Power

This theme includes Twitter updates in the header, well-designed comment counts, plus integrated search, feed and navigation links. Converted from the WP theme by Skinpress by Falcon Hive.

View Demo | Download Black Power

Dark Mistry

Another stunning original design by RayCreations. Features a two column layout with unique styling of the different widget types and breathtaking main background image.

View Demo | Download Dark Misty

Tagland

A dark and serious theme by Dante araujo with a keen focus on each element of style.

View Demo | Download Tagland

Rock My World

Originally designed by Pelangipetang, this awesome grunge-style theme has been converted for Blogger by Deluxe Templates.

View Demo | Download Rock My World

Evidens

A stunning, simple dark theme which offers three columns in the layout and perfect attention to details. Originally created for WP by Design Disease and converted for Blogger by Blog and Web.

View Demo | Download Evidens for Blogger

Blue Diamond

This is an image-heavy, beautifully toned design featuring Twitter and RSS links in the header and a stylish approach to the layout. Converted from Skinpress' WP theme by Falcon Hive.

View Demo | Download Blue Diamond

BCute

Here is another conversion of a Skinpress theme by Deluxe Templates, this time a dark theme with a stylish and highly functional header section.

View Demo | Download BCute Template

The Conservative American

An unusual niche-style template with a patriotic feel, this two column template is not short of features including: automatic date, Twitter integration and navigation links. Converted by Zona Cerebral from the Wordpress design by Jeremy Buff.

View Demo | Download Conservative American

Zinmag Remedy

Converted by Falcon Hive from the Wordpress theme by Jinsona Design, this dark intriguing theme offers many great features, though requires a good deal of customization to install.

View Demo | Download Zinmag Remedy

Template Black

An original dark design by Templates Novo Blogger.

View Demo | Download

Woody

A wood effect template with semi-transparent backgrounds, converted from Frozr's design by ChicaBlogger.

View Demo | Download

Feminine and Flirty Designs

This round-up would not be complete without a selection of feminine and flirty designs for ladies who prefer a girly appearance to their themes:

WP Polaroid Pink

Adii's excellent WP theme was originally converted for Blogger by eBlogTemplates, and has been given a wholly feminine makeover by ChicaBlogger.

View Demo | Download WP Polaroid Pink

Meet the Chef

Gisele Jaquenod's designs are always cute, well designed and perfectly laid out. Here is her latest offering: Meet The Chef, a three column feminine design with unique header banner.

Read more and download

Flower Garden

This cheerful theme was designed by IpieToon and features a split sidebar, widgetized footer section and unique header banner (watch what happens when you move your cursor around...).

View Demo | Download Flower Garden Template

Nature Gift

This simple two column theme was originally designed by Top Tut and includes a beautiful header image. Converted for Blogger by BloggerThemes.

View Demo | Download Nature's Gift

Tired Girl

Tired Girl offers a beautiful header design and quirky approach to navigation. Designed by Skincorner for Blogger users.

View Demo | Download Tired Girl Template

Baby Cute

A cute theme by Ipietoon, which is perfect for those blogging about a new addition to the family. The PSD file may also be downloaded for customization of the header banner.

View Demo | Download Baby Cute

Vector Flower

A beautiful Blogger template offered by Klodian of Deluxe Templates, this two column template was converted from the original design by EzWpThemes.

View Demo | Download Vector Flowers

Girly Nature

This ethereal theme offers a beautiful colour scheme, and includes integrated search and RSS feed link. Converted from the WP theme by TemplateLite by Deluxe Templates.

View Demo | Download Girly Nature

Retro Book

A simple, retrospective design in sepia tones, this theme was converted from GetTemplate's original design by Chica Blogger.

View Demo | Download Retro Book

Floral Day

Subtle and feminine, this template was converted from SimplyWP's theme by ChicaBlogger.

View Demo | Download Floral Day

Glamorous

This original theme by Dante araujo offers a three column layout which can be easily customized by swapping out the background image. The PSD file is included for easy customization of the logo.

View Demo | Download Glamorous

Green Mile

I love the balanced layout of this subtle theme, which is based on the design by EzWpThemes and converted for Blogger by Deluxe Templates.

View Demo | Download

Water Color

With a stunning background image, tabbed navigation and stylish sidebar section, this template is impressive while pleasing to read. Converted from TemplateLite's original design by Falcon Hive.

View Demo | Download Water Color Template

Unusual Layouts and Styles

I love to see new design styles where the author has chosen to break out of conventional layout schemes. We tend to consider a blog layout as having at least one sidebar to the left, right or either side of blog content; that the header section should span the width of the blog, and other assumed layout options.

This set of themes defy convention: some are single column themes (ideal for showcasing photos!) while others do not appear like blogs at all!

Mainstream

Based on the WooThemes template, this Blogger conversion includes tabbed navigation buttons, social media links and stylish sidebar headings.

This has been bloggerized by WP Blogger Themes and is well worth a look!

View Demo | Download Mainstream

Launchpad

Are you launching a new blog soon? Launchpad is the solution to help potential readers subscribe for updates. You can write blog posts and simply upgrade your theme once the site is ready for launch.

This template was converted by ejner69 from ThemeShaper's original design.

View Demo | Download Launchpad

RS Garden

Please do take a look at the demo for RS garden to appreciate it fully - my screenshots do not do justice to this unusual theme!

Featuring a single, wide column on the home page and a narrow, left sidebar on item pages, this clean layout is ideal for photobloggers.

Converted from Rambling Soul's theme by BlogAndWeb.

View Demo | Download RS Garden

Photoblog

This simple one column theme is ideal for photobloggers and designers to showcase their works. Converted from ClipThePhotos' theme by Deluxe Templates.

View Demo | Download Photoblog

Stripped

This is a very clean, single column theme which features the post-meta-data in a column to the right of the post body and a widgetized three column footer. Converted from Nathan Rice's theme by Quite Random.

View Demo | Download Stripped

Halfbaked

This theme offers a highly unusual, fluid layout in which the sidebar and posts are separated by a central vertical line.

Converted from Guy Fisher's WP theme by Template GoDown.

View Demo | Download Halfbaked

Dark Flower

This unusual two column theme is left-aligned: a rare layout style in recent template design. It appears as a grunge-style notebook with highly stylized widgets in the sidebar and integrated navigation links. Converted from the EzWpThemes template by Deluxe Templates.

View Demo | Download Dark Flower

Tiny Studio

A narrow, single column theme converted from Pelangi Petang's template by Zona Cerebral.

View Demo | Download Tiny Studio

2Plus

Another left-aligned theme, this original design was created by Dante araujo. It offers a clean and simple layout with excellent use of contrasting colour and minified header logo.

View Demo | Download 2Plus

Travel Themed Templates

Here is a small selection of "travel" themed templates for Blogger, specifically chosen for those who wish to blog about their travels and world adventures!

76. Sailing

A bold, bright theme with integrated RSS link in the page curl. Converted from the EzWpThemes template by BloggerThemes.

View Demo | Download Sailing

Exotic Vacation

This is a beautiful, artistic template for travel bloggers. I particularly love the signpost for navigation around the blog! Converted from the WP theme by TemplateLite by Falcon Hive.

View Demo | Download Exotic Vacation

Lembrete

This notice-board style template was designed for Blogger by Lecca and features a split sidebar section.

View Demo | Download Lembrete

Traveling

Another template designed for Blogger by Lecca, this features a useful integrated Flickr photostream in the header which displays the latest Flickr uploads - perfect for updating with images on the go!

View Demo | Download Traveling Template

Travel and tour

Here is an elegant, simple theme for travel bloggers which features integrated navigation links and a quirky "polaroids" section in the footer.

Converted from Free CSS Templates' design by Deluxe Templates.

View Demo | Download Travel and Tour

Miscellaneous Templates

Here's a final selection of awesome free Blogger templates which were difficult to categorise elsewhere. All are of excellent quality and truly deserve a place in this showcase:

Community

An elegant and highly functional theme which offers integrated Twitter updates, email feed subscription and "SexyBookmarks" for easy syndication of posts.

Created by BieTempltes.

View Demo | Download

Business Talk

This stylish blue business theme was originally designed for Wordpress by EzWpThemes and has been converted for Blogger by FalconHive.

View Demo | Download Business Talk Template

Brilliance

Simple, elegant and well laid out, this template will perform well for a multitude of blog niches. Converted from Blog Oh Blog's original template by Deluxe Templates.

View Demo | Download Brilliance

MobiPress

MobiPress in another feature-rich template from Cahaya Biru, with a bold colour scheme and interesting layout. This was converted from the WP theme by Jinsona Design.

View Demo | Download MobiPress

Notebook

This is a beautiful grunge-inspired theme by Ray Creations, which inuludes a stylized welcome message and integrated navigation links.

View Demo | Download Notebook

Hanging

Originally a WP theme by Web Design Lessons, this lush green theme was converted for Blogger by Deluxe Templates.

View Demo | Download Hanging

The Business Templates

A professional theme, this can be adapted to have 2-6 columns for all your widget needs. The header image also may be changed to suit the requirements of your blog.

Coded by OurBlogTemplates.

View Demo | Download The Business Templates

Zinepress

Based on Andrew Lindstrom's beautiful Wordpress theme, this Blogger conversion was coded by Blogger FAQs.

View Demo | Download Zinepress

The Clam Shell

An awesome theme with big bold icons! Converted from Michael Soriano's template by Free Blogger Template.

View Demo | Download Clamshell

Wiking

This is a simple, grunge-style theme with a huge RSS icon in the header, integrated navigation links and beautiful typography choices. Converted from the Skinpress theme by Dante araujo.

View Demo | Download Wiking

Papercon

This elegant white theme was created by Denshou and may be downloaded from BTemplates.com

View Demo | Download Papercon

Chocolate

This delicious template was coded by Lawny and is based on a PSD tutorial by PSDVibe.

View Demo | Download Chocolate

Typebased

Typebased is a beautifully elegant design, originally created by Woo Themes and bloggerized by BTemplates. This design features two columns in the layout, and post data is separated in a column to the left.

View Demo | Download Typebased

Acosmintech

This stunning, glossy theme is based on the original template by Alexandru Cosmin and converted by WP Blogger Themes.

View Demo | Download AcosminTech

Night Sky

This design includes a breathtaking background image and stylized sidebar column. Another intriguing and original design by Ray Creations.

View Demo | Download Night Sky

Vixilus

This grey and blue themed design puts the blog's description in central focus - a feature noted among portfolio blogs and websites - while the blog title is minimal in the upper left corner. An original Blogger design by Dante araujo.

View Demo | Download Vixilus

Tonos Cálidos

Last - and most certainly not least! - this amazing theme by Blog Amuki is adapted from Falcon Hive's excellent Zinmag Tribune template.

Tonos Cálidos uses the magazine template, but injects this with subtle grunge overtones and a warm colour scheme. This is even more beautiful when viewed in the browser, and would make an excellent choice for a portfolio blog or personal site.

View Demo | Download Tonos Cálidos

Final Thoughts

Blogger templates have truly evolved over the past twelve months. It's been a pleasure to find such great templates and talented designers who offer their works for free download in efforts to improve the resources available to the Blogger community.

Each of these templates is the product of hard work, patience and perseverance. Wherever possible, I have linked to the download page on the Blogger template coder's site and - where applicable - to the original designers website (in cases where templates have been converted from another platform). For any of the templates you download, be sure to check the license and adhere to any conditions of use. After all, attribution for the work of these talented designers is the least reward we can offer for their efforts!

If you have found this a useful or inspirational resource feel free to share, bookmark or re-tweet! I truly appreciate your help to spread the word about the posts you enjoy most from this site :)

Please also take a look at my previous showcase posts to find even more beautiful Blogger templates which are completely free to use:

Let us know which designs you love the most by leaving your comments below!

Image credit (top of post): Swisscan.

Blogger Buster

Infograbbit: New Premium Template

Main features of the Infograbbit template

About this template

Keyboard Shortcuts for Posting with Blogger

How to use Google's Font API with Blogger

What is Google's Font API?

What fonts can we use?

How to use the Google Font API

Why is this good for Blogger users?

More information about the Google Font API

What do you think?

Better Post Previews - See how your post will look to readers

How it works

Do you use the new template preview? What do you think?

How to use non-standard fonts with Blogger

Why use Kernest?

How to use Kernest with Blogger templates

Add the font embed code to your template

How to change fonts for headings, paragraphs and other text areas of your template

Do you use Kernest for your Blogger template designs?

Blogger Buster - Relaunched!

About the new design

New articless in progress...

Soon to be accepting Blogger design projects!

What's your opinion of the new Blogger Buster design?

Blogger Buster eBooks - Updated Links

The Blogger Template Book

The Cheats' Guide to Customizing Blogger Templates

A new eBook in progress...

Declaring Email Bankruptcy

80+ Hand-Picked Beautiful and Original Blogger Designs

Simply Stunning...

Pale/Minimal Designs

Dark Designs

Colourful Templates

Photoblogs/Single Column/Unusual Layouts

Last clicks...

More please!

Your thoughts?

Help! My Template Disappeared!

UPDATED FILES

2/2/2010 - Butterfly Template is now updated:

Related Posts with Thumbnails for Blogger - New Version by BloggerWidgets

Resolved! Issues with the Twitter Updates Gadget (and others)

Profile Avatars for Blogger Comments - Updated

How to add comment avatars to customized/non-standard Blogger templates

How to upload an image for your commenting profile

Notes on Blogger's Comment Avatars so far...

Whose avatars will be displayed?

Can these profile images be styled differently?

Avatars load after other content on the page

What do you think of this new feature?

How to add Blogger's Read More function to customized templates

Will the "Read More" feature work for my customized template?

How to add the code required for Blogger-powered post summaries

To add a blog post with a Jump Link...

To add the code for Jump Links functionality to your Blogger template...

Styling the "Jump Link" and other interesting ideas

Change the "Read More »" text

Styling the "Read More » text

Replace "Read More &raquo" with an image

Display image "thumbnails" on non-item pages

Issues with the sidebar shifting beneath blog posts after adding Jump Links to posts

What do you think of this new function, and possible customization techniques?

Read More/Post Summaries Now Available in Blogger!!

Nexus 5 - A New Blogger Template for Free Download

Main features of Nexus 5

Ultra customizable!

Integrated Navigation Menu

Integrated "Featured Posts" section - no template editing required!

Hover Effect on Summarized Posts

Stylized "Social" Section

How to install Nexus 5

Configuring the Labels Gadget

Configure the Blogroll Gadget

Configure the Social Gadget

Display content in the Featured Post section

If you prefer to display posts from a different label...

Edit the "About" section in the footer