Blogger Buster

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.

16 Useful Twitter Tools for Blogger

2009-08-05T16:24:00.000+01:00

Since it's launch back in 2006, Twitter has become a leading pioneer in the world of social media. Bloggers in particular find this service an invaluable tool for syndication, news stories and community conversation.

For this post, I have rounded up 16 of the most useful tools, tips and free resources to help you get the most out of Twitter through your Blogger powered blog.

Display your Latest Tweets

Visitors to your blog may also enjoy reading your Tweets, particularly if they are of relevance to your blog's niche subject.

Here is a selection of the best tools for displaying Twitter updates in your Blogger layout:

The Official Twitter Badges

Twitter provides an animated "Profile" badge which you can use to display your latest updates as a widget in your blog layout:

You can configure the size, colours and number of updates for your badge in the settings, then grab the code which can be pasted in an HTML/JavaScript widget in your Blogger layout page.

Another alternative is the Twitter "MySpace" gadget, which uses Flash to create a different appearance to the gadget:

We can copy the code generated for this widget and paste into an HTML/JavaScript widget in our blog - it's not limited only to MySpace profiles!

Blogger Widgets and Gadgets

Another way to display your Twitter updates is to install a Blogger widget or gadget in your layout. These can be configured to display as few or many Tweets as you choose, and require only your Twitter username to install:

Simple Twitter Updates Widget
This was the first Twitter application I created for use with Blogger blogs and still remains one of the most popular tools on the site! To install, simply fill out the form and click "Add Widget" to install automatically in your layout.

Twitter Gadget for Blogger (EN)
This gadget works in much the same way as the Twitter Updates widget but is simpler to install and can be reconfigured after installation.

Twitter Updates Gadget (ES)
Daniel Ikeda has made a Spanish translation of my Twitter Gadget for easy installation.

TwitSig - Your Tweets in Pictures

TwitSig is an interesting free service which allows you to display your latest Twitter update as an image. You can add this in your layout as either an HTML/JavaScript widget (using the code generated on the TwitSig homepage) or as an Image gadget using one of the alternative backgrounds.

Here's an example of the default Twitsig badge:

This one uses magnets:

Here's another using a fortune cookie:

Visit TwitSig to generate your own updating Twitter updates image.

Add a "Follow Me" Badge

To encourage your blog readers to follow you on Twitter, try adding a "Follow Me" badge which links to your Twitter profile page.

Here are some useful tools and badges which you can use to add a linked "Follow Me" badge to your Blogger layout:

Twitter Follow Badge by Go2Web"0.com

Here's a new and interesting way to add a non-intrusive "follow me" badge to your site, like this:

The badge can be configured for different colour schemes, height from the top of the page and left/right alignment.

To add the badge to your Blogger blog, visit the TwitterFollowBadge page and fill in the form to your requirements. This will generate some JavaScript code which you should add just before the closing </body> tag in your Blogger template. However, in it's native form this code will not display in Blogger!

Instead, we have two options:

Paste the JavaScript into an HTML/JavaScript widget instead
Replace <-- and --> in the generated code with <-- and --> (this enables the script to function correctly and display the badge in your page)

TwitterButtons.com

TwitterButtons offers several pages of free "follow" buttons to help your blog readers follow you on Twitter:

Simply add your Twitter ID in the space provided and TwitterButtons will generate the code to add the button of your choice as a linked badge in your layout. Paste the code into an HTML/JavaScript gadget in your layout (or directly in your template if preferred!) and you're all set.

Twitter Buttons by Vincentabry.com

This site offers 31 different styles of Twitter buttons which you can add to your blog. Although the site is not in English, the Twitter buttons are.

To add these to Blogger easily, use your favourite image in a Picture gadget in the layout, then link this to your Twitter profile:

Add "Tweet This" Links to your Blog Posts

Twitter is an excellent service for syndicating blog posts and useful or interesting articles. Help your blog readers share their favourite posts on Twitter by providing a "Tweet This" link for each of your blog posts.

Here are three different ways you could do this:

Add a simple "Tweet This" link

The simplest of all Twitter syndication links is a text link which uses the URL and title of your blog post:

There are of course many ways in which this link could be styled, and where it could be positioned. For now I'll explain the most basic method of installation.

Go to Layout>Edit HTML in your Blogger dashboard and check the "Expand Widget Templates" box.

Then using your browser search function, locate the following line of code (or similar):

<div class='post-footer'>

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

<a expr:href='"http://twitter.com/home?status=Reading " + data:post.title + " @YOUR-TWITTER-USERNAME " + data:post.url' title='Tweet it on Twitter'>Tweet This</a>

Be sure to replace "YOUR-TWITTER-USERNAME" with your own username!

Then save your template. This will add a "Tweet This" link in the post-footer section beneath each blog post. Readers can click this link to post a pre-filled template "Tweet" like this:

Image based "Tweet This" Link

If you'd prefer to use a stylish button or larger image link, you can simply replace the text from the previous example with an image tag, like this:

<a expr:href='"http://twitter.com/home?status=Reading " + data:post.title + " @YOUR-TWITTER-USERNAME " + data:post.url' title='Tweet it on Twitter'><img src="http://image-host.com/your-image-link.jpg" alt="Tweet This" /></a>

Here's a great example of this effect on PSDrecipes:

Using Short URLs in "Tweet This" Links

Many of us use lengthy domain names which take up much of Twitter's 140 character limit for the tweeting of posts.

A while ago I posted a tutorial explaining how to enable short URLs for "Tweet This" links using Bit.ly. This explains how to add a similar text/button/combination link for each of your Blogger posts which adds a shortnened URL to the Twitter post template instead of the regular, lengthier one.

Enable "Tweetbacks" in your template

Our Blogger templates already support "Backlinks" (known as "Links to this post" in Blogger). However, these backlinks don't display links generated on Twitter which usually include shortened URLs.

Dan Zarella's original "Tweetbacks" script is JavaScript based and can be used in Blogger templates to display tweets about your post. It is very easy to install and requires no customization (unless you wish to style how the tweetbacks are displayed).

To add "Tweetbacks" to your Blogger blog, simply copy the code below and paste this in your template where you would like the Tweetbacks to appear:

<script src="http://danzarrella.com/tb.js"></script>

The simplest installation is to paste this code into an HTML/JavaScript widget in your Blogger layout. This will display Tweetbacks on every page of your blog, and will show the Tweetbacks attributed to each individual page.

Another possibility is to add Tweetbacks beneath the "Links to this post" section of your template, effectively grouping these tweets with backlinks to each individual post.

To achieve this, go to Layout>Edit HTML and check the "Expand widget templates" box. Then search for the following line in your template:

<b:includable id='backlinks' var='post'>

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

<h4>Tweetbacks<h4> <script src="http://danzarrella.com/tb.js"></script>

This will add Tweetbacks with the appropriate title just above the "Links to this post" section of your layout.

Note: you must configure "Backlinks" to "Show" in the Settings>Comments section of your dashboard to enable this method to work.

Add TwitPic Updates to your Sidebar

TwitPic enables us to share images to Twitter, which can be posted by phone, using the TwitPic API or directly from the TwitPic site.

I've developed a gadget which you can use to display your recent TwitPic updates in your Blogger layout which is easy to install and can be configured to your needs:

Use this link to add TwitPic Updates to your Blogger blog.

Add "Real Time" Twitter Updates

Being a fast, virtually instantaneous stream of updates on any given subject, many of us like to keep up with references, news and re-tweets in real-time, rather than having to update or revisit Twitter search at periodic intervals.

Here are two highly useful gadgets for blogger which can be used to display real-time updates in your actual blog layout:

Twitter Search

Developed by 32Hours.com, this gadget offers a stream of updates for a given search term, hash tag or username.

Simply add the gadget to your blog and change the terms for search after installation (your readers can use this too!):

Visit this page on 32Hours.com to learn more about this gadget and install in your Blogger layout.

Juitter Gadget - real time updates with configurable search terms

Based on the excellent Juitter JQuery plugin by Rodrigo Fante, this gadget enables real-time Twitter updates based on the search terms you specify on installation. You can choose to display tweetbacks referencing your Twitter username, a particular search term and even combinations of terms:

This gadget does not contain ads or added links, and can be configured to display exactly as you want.

Click here to add this Juitter gadget to your blog.

Have I missed anything out?

I hope I've provided a good round-up of Twitter tools which you can use to "Twitterize" your Blogger powered blog. If you feel I've missed out any Blogger-enabled tools, please feel free to let me know about these in the comments below.

Free HTML and CSS Tutorials at BeepTheGeek.com

2009-08-04T12:00:00.001+01:00

Many of my tutorials here on Blogger Buster help Blogger users learn how to customize their Blogger templates by manipulating the template code. When customizing our Blogger templates, we need to use a combination of HTML tags and CSS in addition to Blogger template tags.

While I try to make my tutorials easy to follow, I understand these are also contextually aimed at a specific task, and that many of you would like to learn more about HTML and CSS in general in order to make your own unique customizations and templates.

Over the weekend, Gagan of BeepTheGeek.com let me know about a new course he has started to help bloggers learn the basics of HTML and CSS: HTML Tutorials. This is a weekly course specifically designed for those who want to learn the basics of web design which is just as important for customizing Blogger templates as designing stand-alone web pages.

Beginning with an introduction to HTML tags, Gagan hopes this free online course will enable everyone to understand the basic concepts of HTML and how this may be applied to blog template design:

The series will include all HTML concepts and will teach you everything about HTML along with CSS tips and tricks for fast and easy designing. I’ll start from the basics so that each and every concept is clear to you. By the end of the series you will be able to edit your templates.

At the end of the course, Gagan will publish the entire series of tutorials in an eBook for easy reference.

I hope this free course will be of interest to those of you wishing to learn more about Blogger template design. Pop over to BeepTheGeek.com to take a look at the course and let us know what you think.

Image credit: eelke dekker

Over the past few weeks, I've been working with Bloggers improved API for Gadgets and have now completed work on several useful gadgets which can be installed with just a few clicks.

I've found that the Gadget API offers a much better interface to the end-user than HTML/Javascript widgets (although it takes me far longer to create Gadgets than widgets!). While they are a little more difficult to create, I think the end-product is worth the effort:

Gadgets can be added from within the Blogger dashboard (so we don't need to use search engines, or visit the owner's site to install).
Gadgets are easily customized, and can be easily reconfigured after installation
The new API includes the ability to include Blogger post and comment feeds for the blog in which they are installed.
Developers can ensure gadgets blend with the theme in which they are installed using "Skins" parameters.

How to install Gadgets in your Blogger blog

Gadgets are as easy to install as Blogger's default widgets. Simply go to Layout>Page Elements in your Blogger dashboard and click the "Add a Gadget" link in the area where you want to install your gadget.

A pop-up screen like this will appear:

From here, you can browse gadgets in the directory, search for gadgets of interest, or add a gadget using the URL where it is hosted.

Once you have chosen a gadget to add, you should be presented with a configuration screen like this:

There will be different options here, depending on the gadget you have chosen to install. This example shows the configuration options for my Twitter Updates gadget.

At the very least, you should be able to alter the title of the gadget, however most gadgets have other configuration options available. A preview of how the gadget will look in your blog will appear below these options (do bear in mind that the width of the gadget may be wider when displayed in your blog if the area in which it is added has larger dimensions than the preview screen).

Once you've changed any settings, be sure to click the "Update" link in order to see the changes appear before you save. The gadget will then appear in your blog, and it's position can be changed in the Page Elements section of your dashboard.

Blogger's Featured Gadgets

The Blogger team have created The Featured Gadgets blog which details gadgets of particular interest. Some of these gadgets are also included in the Featured Gadgets section of the Gadget directory (available when you choose to add a new gadget through your dashboard).

I'm thrilled to find four of my own gadgets are "featured": Recent Posts, Recent Comments, Picasa Photostream and Twitter Updates, and look forward to seeing the efforts of other Blogger developers in the future.

Developing Blogger Gadgets

The Blogger team have created extensive documentation for those hoping to develop gadgets for use with Blogger in addition to the extensive resources for creating Google gadgets.

I've also begun a three-part series for creating Blogger gadgets over at Blogging Tips to explain the basics including how to utilize Blogger feeds in our gadgets, use skinning parameters and user preferences for customizable gadget utilities.

Once you've created a Blogger gadget, you can add it to the Blogger Gadget directory using this link. Your gadget should appear in the public directory within about 30 minutes of successful submission and the best gadgets will be featured in the Featured Gadgets blog.

Gadgets I'm working on now

In addition to the four gadgets mentioned above, I have a further three gadgets which are almost ready for public release: a Flickr Photostream Gadget (install with your Flickr username, not the URL of your feed); a TwitPic gadget (to display your recent TwitPic updates) and a Juitter gadget, for real-time updates which mention your username or other search terms.

Over the next few days, I'll update with posts for all my gadgets with full details of functions and installation so you can add and enjoy these gadgets in your Blogger powered blogs.

Your thoughts?

I hope you will enjoy using Blogger gadgets which use this improved API and look forward to seeing gadgets which other developers create.

If you've created a gadget for Blogger or if there's a particular gadget you'd like me to create, please let me know by leaving your comments below.

Housekeeping - Updates, Issues and Forthcoming Features

2009-07-02T13:42:00.001+01:00

I realize my posts have been rather scarce lately, mostly because I've been so busy with work and other commitments which have left me so little time to write posts for this blog.

So let me explain what's happening with Blogger Buster at the moment, along with a few hints about what you can expect in the forthcoming weeks.

Problems with my file hosts

Many of you have reported problems downloading templates and other files which are hosted on http://bloggerbuster.com.

This is because my hosting service has been completely overpowered by the sheer number of requests for files and has been temporarily suspended. I need to transfer all of my files over to a new (enhanced) hosting account which can cope with this level of bandwidth, but I'm afraid it's taking a little longer than expected due to some issues I'm having with FTP.

I may well need to move all these files to a completely different location, and if so, I will of course update with the new URLs you'll need to download these files. My main concern is to find a reliable file host for all our file-hosting needs, and which won't impact too much on the running of this site. Please bear with me while I make new arrangements for these files.

What I'm working on now

There have been several developments for Blogger (and perhaps more planned for coming months), so as you may imagine I've been working on these developments to create useful resources and tutorials for you all.

In particular, I've been learning a lot about the Gadget API for Blogger. This enables us to create interesting, useful and interactive gadgets for Blogger using a system which (I feel) is a great improvement to using widget installers.

I've created a few Gadgets for Blogger now which I'll post about over the coming days (though you may already be able to find some if you search for "Blogger Buster" when adding a gadget to your layout).

Update #1
I've just managed to get a new laptop, and have spent the past few days transferring over my files and settings. Finally, all is fixed so I'll have a new post (or two) up this weekend :)

Blogger is still looking for web designers and artists!

A couple of weeks ago, the Blogger team tweeted a request for web designers and artists who are interested in designing templates for Blogger.com.

If you're a web/blog designer or artist, this is something you may well want to check out. You can find out more and register your interest in participating on this page.

Requests for tutorials and gadgets

If you have any particular requests for tutorials or Blogger gadgets, please let me know about these by leaving your suggestions in the comments.

While I can't promise to fulfil every request, I'll try to do the most popular ones over the coming weeks.

There's so much happening at the moment and many more updates in progress which I really look forward to showing you in the future.

Thank you all for visiting, subscribing and sticking around!

Blogger Read More/Post Summaries - The Best News Yet!

2009-06-09T19:38:00.000+01:00

One of the functions most voted for in Blogger's recent Product Ideas forum was the ability to summarize blog posts on non-item pages.

I've written about a few different approaches to this, but these methods were never so easy to implement.

Luckily I came across this tutorial from Quite Random which offers the simplest - and most useful - method of displaying post summaries automatically for our Blogger posts, complete with a thumbnail from images used in our posts.

This customization is very easy to implement (there are literally only two steps) with very little editing of the template required. I installed with immediate success on several templates to test it out, and with only a little tweaking on one of my most customized designs.

In short, this is a fabulous implementation of post summaries for Blogger. Be sure to pop over to Quite Random to check out this post and learn how to install this hack for your own Blogger blogs.

However... This is not my only source of good news regarding post summaries for Blogger!

The Blogger team are in the process of implementing this function in Blogger! Or at least, I'm pretty certain they are.

Take a look at this screenshot which was taken from a clean installation of Minima (a default Blogger template) on a new blog (click the image for a larger version):

These tags look suspiciously like tags which could be used for implementation of post summaries. What's more, it seems we can choose whether or not to summarize our posts, and also the text used for the link to read the full article.

I can't say for sure when this implementation will become available, though I believe this will first be rolled out into Blogger in Draft so any issues can be resolved before the summaries become available to us all.

There's not yet been any mention about this on the Blogger in Draft blog, Blogger Buzz or even by the team on Twitter, but since this code is now appearing in new templates I'd guess this will become available in the very near future.

Stay tuned, I'll get more news about this as it happens and will (of course) explain how to use summaries in customized templates too.

This is a feature I'm very excited to know is in progress, so if anyone does have any news to share, please let me know!

Display your current location on your blog with Google Latitude

2009-05-05T11:31:00.001+01:00

If you use Google Latitude, you can now display your current location on your blog using a Google Public Location Badge.

Google Latitude is a feature of Google Maps which, should you choose to enable this, allows selected friends and family members to see your location. You can also give permission for Latitude continuously update your location in the background.

The Public Location Badge is a gadget which you can easily add to your Blogger blog to provide readers with your current location. This feature may be especially useful for travel bloggers or personal bloggers who wish to share their location with friends and family members.

How to add a Public Location Badge to your Blogger blog

In order to add a Public location badge, you will need to use Google Latitude. If you have a compatible mobile phone, you can install the latest version of Google Maps on your handset and use this application to update Latitude with your current location. Those who do not have a compatible handset (or who choose not to use this option) can add Latitude to iGoogle and interact with this application from their desktop/browser.

Visit this page to choose which method you will use to update Latitude with your location.

Once you have set up your handset or iGoogle Latitude settings, you can visit the Latitude settings page to choose with whom your location is shared or add a Public Location Badge to your blog.

Choosing which settings to use for sharing your location

When you visit the Public Location Badge page, there are several options available to choose how your location will be shared:

Disable Google Public Location Badge (default setting) - this means that no-one will be able to view your current location, except of course for Google and any friends with whom you have chosen to share your status.
Enable and show city-level only - this setting enables anyone to view your location at city level only (not your actual, precise location). Even if you have not added the badge to your blog or website, your status may still be accessed through Latitude searches.
Enable and show best available location - this setting enables anyone to view your location on a more precise level. Again, even if you have not added the badge to your blog or website, your status may still be accessed through Latitude searches.

Your choice will depend on your personal preferences. If you have set up Latitude but prefer your status to remain private, be sure to disable your public location badge. And if you do choose to share your location through a badge on your blog, be sure to take into account Google's privacy notice:

If enabled, your location will be publicly available to everyone. You will not be able to limit where and with whom you share your location through the badge.

Add the badge code to your Blogger blog

It is very easy to add your public location to your Blogger blog. Once you have chosen the settings and tweaked the width and height of your gadget according to your needs, you can simply press the "Add to Blogger" button which will transfer the code directly to an available widget location in your layout:

After adding your gadget to your blog, you can visit the Layout>Page Elements page to move the gadget to an appropriate location in your blog's layout.

Another option would be to paste the code for your location into a blog post. Simply copy the HTML code in the box to your clipboard, then paste into a blog post when editing using the "Edit HTML" tab. This will embed your gadget directly into your blog page.

Important note: once you create and publish this snippet on any web page, anyone with access to your web page could copy the code elsewhere so that your location is still accessible even after you remove the code from your page. If you want to stop broadcasting your location, you must disable this by visiting the Public Location Badge page.

Will you be using the Public Location Badge in your blog?

Personally I prefer not to use this gadget in my own blogs, since this has no relevance for the subjects I write about, but as I mentioned earlier, this new feature may be a useful gadget for travel bloggers or those who wish to update family and friends with their location.

Have you added this gadget to your own blog? Or would you consider using it? Please let us know your opinions and experiences of the Public Location Badge by leaving your comments below.

Google Blogger for Dummies - Full Review

2009-04-30T20:43:00.000+01:00

Some time ago, I was able to preview Susan Gunelius' new book, Google Blogger for Dummies, which is now available to buy from your local bookstore. After receiving my own copy, I've spent the past few weeks reading intently in order to provide you all with my full review of this "Dummies" guide.

Blogger for Dummies?

The "For Dummies" series of reference books published by Wiley are complete guides on a range of subjects which present information in plain English. "Dummies" books are offered as complete guides on the given subject, where the information presented makes the subject easy to understand even for a complete beginner.

In Google Blogger for Dummies, Susan Gunelius offers a simple and comprehensive approach for understanding and making the most of the Google Blogger platform. Chapters range from "Setting up your blog" right through to "Making Money With Blogger" and "Boosting your Search Engine Ranking". This ensures that readers learn far more than how to use Blogger to publish our blogs: we can learn how to use Blogger to create an authoritative, income-generating and professional blog on the niche project of our choice.

What's covered in the book

Google Blogger for Dummies is split into six main parts, with each part containing several chapters which comprehensively detail an aspect of blogging with Blogger. Furthermore, each chapter is segmented further into mini-sections (usually no more than a page long) which offers detail, advice and information on the aspects of blogging you may encounter.

Part I: Introducing Google Blogger

This section offers a complete overview of Blogger and blogging in general, which is especially useful for those who are creating a blog for the first time.

By covering in brief the aspects of using Blogger which are detailed more fully in later chapters, Susan creates an excitement about choosing Blogger and anticipation of Blogger's effectiveness as a powerful blogging tool.

Part II: Using Google Blogger

In this section, we are presented with detailed instructions for creating and maintaining a Blogger blog, including how to initially create a blog; how to manage archives; comments and backlinks; writing blog posts; enhancing the appearance with templates, and using gadgets/widgets in the layout.

Each chapter is enhanced by screen-shots and useful tips to ensure we can easily follow the instructions and advice given. I especially enjoyed reading Susan's advice about choosing which subjects to write about, and issues of copyright/fair usage. Such considerations are often misunderstood (or even overlooked) by those who are new to blogging, and her expert advice shines light on what is otherwise a cloudy issue.

Part III: Making Money with Blogger

As pointed out in Google Blogger for Dummies, many people choose to start a blog in order to earn money from it. By devoting an entire part of this book to the subject of making money, Susan understands the needs of many Blogger users (both newly initiated and seasoned bloggers) and offers information most relevant for those using the Google platform as their publishing tool.

In this part, we can learn about the many different types of advertising we can add to our blogs to generate an income, including text links, paid posts, contextual ads, and of course Google Adsense.

Part IV: Growing your Audience

This section of the book offers practical, useful advice for growing the audience of our Blogger blogs which is presented and explained in a very "down to earth" manner.

Most bloggers are concerned with growing their blog's audience and increasing their authority in search engine rankings. I'm often asked about this aspect of blogging by Blogger Buster readers, but since this is something I've learned through a combination of gradual experience and "trial and error", it is not something I am expressly confident in explaining.

Susan's explanations are very clear and easy to understand. She explains the nature of relationship building for bloggers, how to network with other online writers and particularly how to optimize our blogs for search engine rankings. Advice to help track blog statistics, effective linking and keyword analysis are also included which I feel is a boon to new bloggers who may have little understanding of what these buzzwords mean.

Part V: Extending your Blog

This section offers details for growing and downsizing our blogs. By "growing", Susan refers to adding team members, writing for other's team blogs and creating a new blog linked to our blogger profiles. "Downsizing" refers to the practise of deleting a blog we no longer wish to own.

In this section, we can also find details of blogging with different media (such as email posts, video blogging and posting via a mobile phone). Custom domains and FTP blogging are also discussed for the benefit of those who prefer to associate their blogs with their own domain name.

Part VI: The Part of Tens

In all "Dummies" guides, the "Part of tens" is used at the end of the book to reference key points or resources appropriate for the particular subject of the book.

In Google Blogger for Dummies, the Part of Tens includes:

Ten useful social networking and social bookmarking sites
Ten common Blogger problems and possible solutuins
Ten places to find free Blogger themes and templates

The "Blogger problems" section was the one I found particularly useful as it covers problems which Blogger Buster readers have contacted me about with regularity. These issues are explained in detail, along with problem-solving solutions and ideas for prevention so these issues do not occur again.

Excellent Presentation

One of the reasons I am a fan of Dummies books in general is the overall presentation of these guides which enables readers to locate the information they require with ease and literally "dip in" at any stage to find useful tips or references.

The front cover is bold and unmistakably part of the Dummies series with a bold yellow background. Key points of the book's content are presented on both the front and back covers, along with a brief biography of Susan Gunelius - a professional blogger in her own right with expert status in marketing and branding.

A key aspect of presentation which I find useful in any technical guide is the use of headings and points to break up text, and appropriate hints relevant to the main content at key points. In this respect, Google Blogger for Dummies comes up trumps: the content is very well organised making it easy to follow; icons refer to tips, warnings and technical areas of the content, while highlighted text boxes enhance basic instructional sections with advice based on Susan's professional experience on a given subject.

The contents section actually comes in two segments: the first offers a brief overview of the parts and chapters, while the second is a comprehensive guide to include all major sub-headings (the individual topics) which are covered in the guide.

Near the end of the book is a comprehensive glossary which provides easy referral for key terms associated with both Blogger and blogging in general. Finally, a complete index offers a means of easily locating any terms or subjects with which we need particular guidance.

Unfortunately the screen-shots in Google Blogger for Dummies are in black and white, rather than full colour. Having read other Dummies guides before, I had not expected colour images; however, colour in some sections (such as when discussing templates and layouts) would have been more beneficial for readers of this guide to offer a more complete analysis of the sections being discussed.

So is it a complete guide to Blogger?

Almost, but not quite. The range of subjects discussed is very comprehensive in Google Blogger for Dummies and Susan Gunelius' expertise in blogging offers a highly comprehensive guide for building and maintaining a successful blog. However, there are a few small areas which I feel could be further enhanced, particularly as many readers of this guide will have little or no experience using the Blogger platform.

For example, in Chapter 16 when explaining how to purchase a domain from a third party, more information regarding changing the DNS settings would have been much appreciated. This aspect of using Blogger is often difficult to navigate, and while I understand that the process does differ between domain providers, an overview explaining key terms or a link to Blogger's help pages on this subject would lift the fog and enable new bloggers to manage this important aspect of Blogger much more easily.

I'm also concerned that the subject of editing the Blogger template is virtually skimmed over in this guide. Although the Layout>Edit HTML tab is briefly mentioned as a menu item and is referred to in the process of uploading third party templates, no explanation of how to manually edit the Blogger template is given. This may be a personal opinion, since editing templates is a key aspect of my experience with using Blogger; however, I'm sure that many readers of this book would have appreciated at least some advice, if only an overview of how Blogger template files are coded combined with HTML/CSS resources where more could be gleaned on this complicated subject.

In summary...

After having read most of the books available about the Google Blogger platform, I can honestly attest that Google Blogger for Dummies is the best and most comprehensive guide available. Rather than simply explain how to use Blogger, this book offers a complete guide to building a successful blog with Blogger, an interesting and wholly useful standard which few other books about blogging platforms have adopted.

I do certainly recommend Google Blogger for Dummies, particularly for those who are new to blogging or who have recently decided to use Blogger as their publishing platform. While certain advanced aspects of working with Blogger could be enhanced, the basics are all included, enabling even a complete novice to build, manage and maintain their blog using this easy to follow guide.

Google Blogger for Dummies is currently available from Amazon, Barnes and Noble and other online bookstores for around $16.49.

Blogger Buster

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

Change the Fonts and Colors to Create your Unique Design!

Images, CSS and JavaScripts

Credits and Licensing

Your thoughts?

How to Create a Sitemap with Google Feed Control

Overview

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

How to create your sitemap with Google Feed Control

Generate your API key

Paste the template for your sitemap into a post page

Paste in your unique API key

Paste in the URLs and titles for your Label Feed URLS

Troubleshooting your FeedControl Sitemap

Adding extra content, and styling your sitemap

Final Thoughts

A Popular Posts Gadget from Google Friend Connect

How to install your Friend Connect Popular Posts Gadget

Style the Recommendation List

Configure the Voting Buttons

Generate and add the JavaScript for your Gadget

Add the code for the Recommendation List

Add the code for your voting button on post pages

Using your Recommendation Gadget

What do you think?

Share Posts from the Blogger NavBar

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

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

Featured Gadgets

Submit Your Own Gadgets

Regular Updates

See also...

Your Thoughts?

Improved Label Gadgets - Now Supporting Label Clouds and More!

Blogger's Label Cloud

Customizing the Label Cloud

Choose which labels to display

Final Thoughts

Happy 10th Birthday Blogger!

Thank You to my 10,000 RSS Subscribers

Tagnetic Poetry for Blogger?

101 Awesome Free Blogger Templates.

Simply Awesome!