Blogger Buster

Housekeeping - Updates, Issues and Forthcoming Features

2009-07-02T13:42:00.000+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).

Blogger is 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 wants to hear from us!

2009-04-23T10:00:00.000+01:00

The Blogger Team have released Product Ideas for Blogger: a forum based on the Product Ideas platform which enables us to suggest and vote on new Blogger features, gadgets and even Blogs of Note:

One of the primary factors that drive innovation and improvements on Blogger is the voice of our users. We always take your feedback to heart, and we use it do help make Blogger the best service it can possibly be.

Take a look at this screenshot to get an idea of how this forum works:

We can log in to Product Ideas for Blogger using our Google account, then vote on existing suggestions by clicking the tick (vote up) or cross (vote down).

When you choose a category (features, gadgets or Blogs of Note) you will be presented with a question you have not yet voted on, followed by the most popular suggestions.

You can also get an idea of the ratio of "thumbs up" and "thumbs down" votes by looking at the vote bars to the right of the suggestions:

It's also possible to view the ideas suggested by a particular user by clicking on the name below each suggestion (take a look at mine here).

I'm really excited about this new feature, and think it is the perfect way for the Blogger team to see the features (and recommended blogs) which are most desired by the Blogger community. While we have previously been able to suggest a new feature and suggest blogs of note, these forms gave us no indication of how popular these suggestions were. This forum enables us to see what others have suggested, how popular these suggestions are, and also to vote these up or down depending on our own preferences.

Take a look at Product Ideas for Blogger to vote on your favourite suggestions and make a few of your own.

Another blog is already hosted at this address - How to fix

2009-04-21T17:01:00.000+01:00

When attempting to set up their Blogger custom domain, many Blogger users have received the following error message:

Another blog is already hosted at this domain

Although I have set up many custom domains to use with Blogger, until this weekend I had never experienced this issue for myself (and was unable to offer any definitive solution for those experiencing this problem). My friend was experiencing this very problem after setting up her new blog a few days ago. We have been able to find some solutions which I hope may help others who see this error message when attempting to set up their custom domain.

Assuming you have already configured the DNS settings for your particular domain provider and have attempted to publish to a custom domain through your Blogger dashboard, here are the steps you should take:

1. Publish back to your Blog*Spot domain

In order to make your blog accessible while troubleshooting your custom domain, it is advisable to publish back to your Blog*Spot domain for the time being.

To do this, simply go to Settings>Publishing and click the link to publish your blog to "blogspot.com".

Once this setting is changed, your blog will be accessible at your-blogspot-address.blogspot.com until the custom domain issue is resolved.

2. Check your DNS Settings are correct

When setting up a custom domain for your blog, you need to have a CNAME for your domain which points to ghs.google.com

Adding (or editing) the CNAME for your domain is the most complex and problematic issue when publishing to a custom domain.

Those who have purchased a custom domain through Blogger/Google (usually through the Blogger dashboard) will find their DNS settings were automatically configured when the domain was purchased.

If you purchased your domain name through a different vendor (ie: directly from the domain provider) you would have had to set up the CNAME setting for yourself.

To check that the CNAME setting has been configured correctly, you will need to login to the domain settings dashboard for your domain provider, and take a look at the CNAME setting(s). If you use GoDaddy, you can take a look at my GoDaddy domain tutorial. For other providers, take a look at one of these pages from Blogger Help:

Most people want to link their entire domain (eg: www.mydomain.com) to their Blogger blog. In this case, you need to look for the CNAME for the WWW prefix and ensure this points to ghs.google.com (the correct setting). If you notice that the entry for WWW points to an IP address (a series of numbers), this setting is incorrect and should be changed to ghs.google.com instead.

Those who wish to point their blog to a subdomain (eg: blog.mydomain.com), you will need to add/edit the CNAME for your subdomain (in this example, this would be "blog"). Ensure the CNAME entry for your subdomain points to ghs.google.com or change it so that it does.

Important: you should not attempt to use a naked domain (eg: mydomain.com) when setting up your Blogger custom domain or you will experience issues! Be sure to use "WWW" or a subdomain and set up the CNAME accordingly. Once your domain is properly set up, you can choose to redirect the root domain (mydomain.com) to your blog's home page as I will explain later.

Save any changes you have made in your domain dashboard and wait an hour or two for any changes to take effect. If you made any changes to the DNS settings, wait a few hours before attempting step 3.

3. Ping your domain to check it has been set up correctly

By "pinging" the domain you want to associate with your blog, you can check to be sure the settings have been configured correctly.

If you use Windows, click the Start Button, then choose "Run". In the box which pops up, type CMD and hit Enter. This will bring up a box like this:

If you use a different operating system, find out how to access the command line utility instead, or visit KLOTH.net to use the online pinging service.

Type in the following, substituting "www.mydomain.com" for your own custom domain (including either the www or your subdomain prefix):

ping www.mydomain.com

If your using the KLOTH service, you simply need to input the URL of your domain.

Then hit Enter.

If you have set up the CNAME correctly, you should see something like this (performed for www.bloggerbuster.com):

Notice how it says "Pinging ghs.1.google.com? If you see something similar for your own domain, this means it has been set up correctly.

However, if you see something like this (where a string of numbers is displayed instead of ghs.1.google.com or similar)...

This can mean one of the following:

The DNS settings have not yet taken effect. Wait a few more hours and try again (it can take as long as 48 hours for settings to propogate, though most become ready within 24 hours).
If you have waited longer than 48 hours and pinging your domain still does not resolve to ghs.google.com, it is likely that your CNAME is set up incorrectly, in which case you should go back to Step 2 and check again.

4. Try to set up your custom domain once more

By now, your domain's CNAME settings should be in order, so it's time to try linking your blog to your domain once more.

Go to the Settings>Publishing tab of your Blogger dashboard and click the "Switch to: Custom Domain" link.

Since you have already purchased your domain, you now need to switch to the Advanced Settings page by clicking the appropriate link.

In the "Your domain" box, type the URL of the domain you want to associate to your blog:

Remember to use either www.yourdomain.com or the subdomain (eg: blog.yourdomain.com). Do not simply type yourdomain.com!

It is also very important to type your URL in lowercase letters! If you use a combination of upper and lowercase letters (eg: www.MyDomain.com), this will cause problems for your custom domain. Once set up correctly, you will be able to access your blog through the custom domain even when typing upper and lowercase URLs in your browser. Check www.BloggerBuster.com to see this for yourself.

If you are able to save this correctly and can access your blog at your custom domain URL, congratulations you are all set up and ready to go!

But if you are still receiving the "Another blog is already hosted at this address" issue, continue to step 5.

5. The Magical Custom Domain Form

Because so many people have experienced issues with the "Another blog is already hosted..." message, the Blogger team have set up a form which you can use to resolve this issue.

The reason I included all other steps before this one is because this service will only work if the CNAME settings for your domain are correctly set up and verified. You should only fill in this form when you are sure the CNAME settings are correct.

You can access the Magical Custom Domain Form here, and read more about it on this page of the Blogger Help Group.

This form works by clearing any Google associations with the URL you are attempting to use for your blog (which seems to cause the "Another blog is already hosted" issue).

Within 48 hours (possibly less), your URL will be cleared and ready to use for your Blogger Custom domain.

Does this work for you?

After checking all other settings, my friend filled in the Magical Form and found her custom domain issue resolved in about a day.

I hope this tutorial will work for you too, but if not, please take a look at these other helpful tutorials:

Linking your "naked" domain to your "www" domain

As I mentioned earlier, you need to use www.mydomain.com or [subdomain].myblog.com when setting up your custom domain. You cannot set up the domain effectively using the root URL of your domain (eg: http://mydomain.com).

Those who have purchased their domain name through Blogger should be able to redirect their non-www domain to their blog with ease. Simply check the setting on the Settings>Publishing page which says "Redirect yourdomain.com to www.yourdomain.com and save.

If you purchased your domain from a different vendor, checking this setting will probably not work. In other words, yourdomain.com will not redirect to www.yourdomain.com even when this setting is checked.

For this issue, there are a number of "fixes" you could use:

For Blogger Buster, I created a "meta-redirect" page which is hosted with my domain provider, GoDaddy. You can read how I set up this redirect page here.

For a different domain, I set up a 301 redirect using .HTACCESS. This requires Linux hosting to be available at the root domain (check here for instructions for free basic hosting if using GoDaddy as your domain provider). Setting up an .htaccess file is not particularly easy, but if you're interested, take a look at this in-depth article from Taming the Beast (in particular, the section for "www vs non-www).

Another possibility is to forward your non-www domain to your www domain using the forwrding settings in your domain dashboard. Ettiene has written a tutorial for this which may be useful for those wishing to try this possibility. Although I have never used this method for my own blogs, I'm assured by others that this works to redirect the non-www domain to the www domain of your blog address.

Your thoughts?

I hope the methods outlined in this article have helped resolve any issues you are experiencing with your Blogger custom domain.

Please let me know your thoughts and opinions, particularly if you have advice on other methods which could work to prevent the dreaded "Another blog is already hosted" message, by leaving your comments below.

Adsense integration now easier than ever with Blogger's Monetize tab

2009-04-15T17:37:00.000+01:00

Have you noticed the new "Monetize" tab at the top of your Blogger dashboard?

This new section of our Blogger dashboards makes it easier than ever to integrate Google Adsense in our blogs and see just how much our blogs are earning.

Google's Adsense program is a simple solution which many Bloggers use to monetize their sites. For some time now, Blogger have made it easy for us to include Adsense ads in the sidebar (as a page element) and around blog posts (as an option in the Layout>Page Elements section, when you click the "Edit" link for your blog posts).

If you have already configured Adsense in your blog by adding an Adsense page element to the layout, or enabling ads between posts, by clicking on the Monetize tab you will be able to see statistics for your earnings, like this:

On this page, there are also links to view your Adsense Payment History, earnings reports and to switch the account associated with this particular blog. You can also choose to "remove ads" from all aspects of your Blogger layout at the click of a button.

For those who have not yet chosen to monetize their sites with Adsense, or who have configured Adsense manually in their templates, you will see a page like this instead:

This means that your Adsense account has not been associated with this blog. No earnings reports will be displayed, even if - like me - you have manually configured Adsense by adding the required JavaScript to your Blogger template code.

For those of you yet to add Adsense to your layout, simply choose one of the ad-layout options most suitable for your needs anc click the "Next" button. You may be required to set up an Adsense account (or associate an existing account with your Blogger profile), after which your ads will be immediately placed in your layout. Then when you visit the Monetize tab, you will be able to see details of your Adsense earnings for the ads you have placed in your layout.

What you need to know about Adsense monetization and the new Monetize tab

Although Blogger have made it very easy for members to add Adsense to their blogs, not every applicant will be successful in getting their own Adsense account.

Adsense reviews all applicants to the program before agreeing to (or denying) a new account. In order to apply for an Adsense account, you must be over 18 years old and have a website which complies with Adsense policies. If you post any questionable content on your site, you really should check these policies to ensure your site complies before submitting your application.

Also, the reports displayed on the Monetize tab will only show page views and earnings from the time that you connected your Adsense account with this blog. If you have previously linked your Adsense account with your Blogger profile, it seems the "All Time" earnings will display earnings from today onwards (one of my blogs uses an Adsense Page Element, but is only displaying earnings from today).

A new channel in your Adsense account for each Blogger blog you monetize

If you log into your Adsense account, you will notice a new channel has been set up for each of your blogs, which contains the URL of your blog in the title.

The information from this channel is what's used to present the earnings data for the Monetize section of each blog you write.

Not yet an ideal solution for everyone...

I am very happy to see that the Blogger team have put such effort towards integrating all of the Google services we Bloggers currently use. However, I am a little disappointed at some aspects of this new feature.

For my own blogs, I have added Adsense manually, by editing the Blogger template and inserting ad codes where I would like them to be displayed. For this reason, I am unable to see any reports on the Monetize tab. In fact, it appears as though I have not set Adsense up at all.

Also, the earnings displayed on the Monetize page will only include the earnings for this particular blog, not your total earnings from any different sites operated.

However, these are small issues, and perhaps these issues will not affect most other Blogger users.

What do you think?

Will this new "Monetize" dashboard feature make it easier for you to connect your Adsense account with your blogs? How well do you think this feature performs so far?

Please feel free to leave your comments and suggestions below.

How to add "Tweet This" links to your Blogger Template (with short URLs)

2009-03-19T12:00:00.003Z

Twitter has become one of the most popular ever syndication and networking tools for bloggers. A few readers have asked if it is possible to add a "Tweet This" link to our Blogger templates, and while this was possible, I had not discovered a method of automatically shortening the URL of our blog posts until now.

Luckily for us, Bit.ly have created a JavaScript-based solution which shortens the URL to just a few characters and enables bloggers to add a Tweet This link configured for their posts. In this tutorial, I'll explain how you can add this to your Blogger template so your readers can Tweet your posts to their Twitter followers, enabling your Blogger posts to be syndicated to a wider audience.

Editing your template to add the Twitter links

First of all, you should make a full back-up of your existing template (which you can later restore if you make a mistake in the coding). To do this, go to Layout>Edit HTML in your Blogger dashboard and click on the "Download full template" link near the top of the page. Save your template to a location on your computer which you can easily access later.

Next, go back to the Layout>Edit HTML page and ensure you have checked the "Expand widget templates" box. The place where we need to add the Twitter code is contained within the Blog Posts widget.

Search for this section in your Blogger template code (or similar):

<div class='post-footer-line post-footer-line-1'>

If you cannot find this exact line of code, search for 'post-footer' instead. Alternatively, you can add your code immediately after the <p><data:post.body/></p> line.

Just after the 'post-footer' line you have located, paste the following section of code:

<b:if cond='data:blog.pageType == "item"'><span style='float: left; background: url(http://lh6.ggpht.com/_xn2gmPb9TfM/Sb_fZkjAxpI/AAAAAAAAD3E/_9xpsQgFfTg/s128/twitter-16x16.png) left no-repeat; padding-left: 20px;'><script charset='utf-8' src='http://bit.ly/javascript-api.js?version=latest&login=tweettrackjs&apiKey=R_7e9987b2fd13d7e4e881f9cbb168f523' type='text/javascript'/> <script charset='utf-8' src='http://s.bit.ly/TweetAndTrack.js?v=1.01' type='text/javascript'/> <a expr:onclick='"return TweetAndTrack.open(this, \"" + data:post.url + "\");"' href='#'> <span style='display:none;'>I'm reading: <data:post.title/></span>Tweet this!</a></span></b:if>

Preview the changes to your blog template to make sure you have not made any errors in adding the code. If all is well, the preview page should load (though you will ne unable to see the Twitter link on the preview page).

Finally you can save your template. Now when you view an item page on your blog, you will see a link in the post-footer section which looks like this:

Tweet this!

This link automatically generates a Bit.ly shortened URL for your post. When a reader clicks on this link, they are taken to Twitter.com (where they can log in if required) with a pre-filled Tweet which appears like this:

http://bit.ly/url I'm reading: [title-of-blog-post]

If you would prefer the prefilled Tweet to say something other than "I'm reading", you can edit this phrase in the code you add to your Blogger template. Readers can edit this pre-filled Tweet before updating if required.

I hope you will enjoy using this Twitter syndication link in your own Blogger templates. Please try this out for yourself to see how it works and feel free to leave your comments below.

A Simple Flickr Photostream Widget for Blogger

2009-03-17T13:41:00.027Z

After posting about Roy Tanck's animated Flickr widget, I realized that I'd never actually written up a tutorial for the simple Flickr Photostream widget which I use in many of my premium templates.

This version of the Flickr Photostream is a static widget designed to display thumbnails of your most recent Flickr uploads, and can be added quickly to your Blogger layout using a one-click installer. It's an ideal solution of you prefer a simpler method to display your Flickr photos which does not slow down page-loading time. You can see an example of how this widget could appear below:

www.flickr.com

To add this widget to your Blogger blog, you will need to have your Flickr user or group ID which may look something like this: 8191003@N02

The simplest way you get your Flickr ID is to use idGettr (opens in a new window), where you paste the URL of your Flickr Photostream in the box so idGettr can discover your ID for you.

Once you have your Flickr ID you can use the form below to add your own simple Flickr Photostream widget to your Blogger blog:

I hope you enjoy using this widget for your Blogger blogs! Please feel free to leave your comments below.

Image credit: Flickr badge by Poolie via Flickr Creative Commons.

Blogumus for your Flickr Photos!

2009-03-12T12:47:00.001Z

Roy Tanck's Flickr Widget requires Flash Player 9 or better.

Get this widget at roytanck.com

If you enjoyed using Blogumus - the animated flash-based widget to display your blog labels - then I'm sure you'll love Roy Tanck's latest widget creation: an animated, cloud style Flickr widget! You can see an example of this in action on the left which uses my Flickr Photostream.

Roy's widget is very easy to customize and add to your blog. Simply visit the Flickr Widget page and use the form to add your Flickr photostream feed URL, then choose the dimensions and background color for your widget.

Once you're done, press the "Generate code snippet" button to be presented with a preview of your widget and the code. You can then paste this code into an HTML/JavaScript widget in your sidebar, or even directly into a blog post (as I have done here).

Roy Tanck created the original WP-Cumulus widget upon which my Blogumus widget is based. He has done a fantastic job in creating this widget. It uses a much smaller file size than the Blogumus/WP-Cumulus widget and doesn't hog nearly as much of your computer memory!

I hope you enjoy using this widget to enhance your own Blogger powered blogs! Let us know what you think about Roy's Flickr widget by leaving your comments below.

Blogger Followers now Integrated with Google Friend Connect

2009-02-26T11:30:00.000Z

When Google Friend Connect was introduced a few months ago, it seemed inevitable that eventually this service would be closely integrated with Blogger to enable more social interaction around our blogs and social communities.

Today the Blogger Buzz blog announced that Friend Connect has been integrated with the Followers feature, enabling readers to log in and become a follower of your blog using their preferred login details (rather than using only their Google account).

As explained in the introductory post:

[...] Your readers come from across the web, from Yahoo, AOL, WordPress, Typepad... not just Blogger. That's why we're excited to announce that we've integrated Blogger Following with Google Friend Connect.

Friend Connect encourages readers to use one account (whether it's a Google account, a Yahoo, AIM or OpenID account) to follow any site - a Blogger blog, a WordPress blog, or any other site that has incorporated Friend Connect.

This integration promises more exposure for our blogs as those from other social networks can follow our posts, be updated of new articles and share their followings with friends from other social sites.

For those who have already set up "Following" on their Blogger blogs, the integration has already been set up for you. Your Followers widget will have already changed to reflect the new Friend Connect features and enable those using other login details to follow your site.

Here is what the Blogger Buster followers widget looks like now:

I did need to alter some of the colors to ensure it matched the overall design of my blog, but otherwise this was integrated with my overall design. If you need to edit some of the font colors for your own Followers widget, simply click the edit icon or go to Layout>Page Elements in your Blogger dashboard and choose the "Edit" link. On the pop-up screen you will be able to change the colors for the different text sections of your widget.

Here also is a video which the Blogger team created to explain "How to follow" a blog:

As hinted in the introductory post for Friend Connect integration, we're likely to see even more new features based on Google's social integration features over the next few months!

Feel free to let us know what you think of Friend Connect and the updated Followers widget by leaving your comments below.

Bx-Errors When Uploading New Templates? The Problem and the Fix

2009-02-24T11:34:00.000Z

For around a week now, many Blogger users have experienced Bx-error codes when attempting to upload a new template to their blogs when previously these templates had worked just fine.

I discovered the reason for this on the Blogger Help Group after reading this post from Gatsby, a Blogger Employee:

Recently we changed the way our template editor accepts certain third party code, so that it is now less tolerant of certain templates. We did this because we had seen a lot of data corruption due to 'bad templates,' and we are trying to stave off some of these issues pre-emptively.

Now we realize that this has caused some inconvenience to folks, so we are re-thinking our decision and will post an update on that shortly.

At the time of writing this post, I have not found any notification that this issue has been fixed, and many of my own custom templates do not work in their initial state (I'll explain the fix later in this article). Since there are so many bloggers complaining in the Blogger Help Group, I would imagine the Blogger Team will resolve this issue shortly.

However, in the meantime, many of us are stuck wondering what to do about our templates:

Those wishing to upload a new template will at present need to fix their template in order to be able to use it.
Those of us who design and distribute Blogger templates are facing complaints from our readers (and in some cases, from buyers of our premium themes). Should we "fix" all of these templates or wait for the Blogger team to resolve the template editor issue?

Personally I would prefer to wait a few more days for the Blogger Team to fix the issue (and hopefully provide some clarification of what is expected from third-party templates!). In the meantime, there is a method which we can use to fix the templates which initially receive a Bx-error code.

How to upload templates without receiving a bX-error code

Many Bloggers who have been unable to upload third party templates have received the following error codes:

bx-bliced
bX-ev85ll
bX-39cc9q
bX-y6cz0v
bX-982020

There are several other codes too, though the issue appears to be the same for all.

Thanks to joleneliow from the Blogger Help Group, many Blogger users have reported that the following fix resolves the issue, and they have been able to upload a new template successfully. Here are the steps you should take:

First of all, try to upload your new template in the Layout>Edit HTML section of your dashboard. Not all templates have been affected by this issue, so it is advisable to check before attempting to edit your template significantly. If you do receive a bX-error code when trying to upload your template, you should proceed to step 2.
If your new template is an XML file (with the .xml entension), browse to where this is located on your computer and right click the file. Choose to open with Notepad (or your favorite basic text editor). If your template is contained within a text file (for you to copy and paste into the template editor), simply open this with your text editor.
Search for every instance of b:widget id= in your template, for example:
- b:widget id='Header1'
- b:widget id='Blog1'
- b:widget id='Label1'
- b:widget id='HTML1'
Replace each of these IDs with the next number up. For example, Header1 should become Header2; Blog1 should become Blog1, HTML3 should become HTML4 and so on.
Once you have changed each and every instance of widget id to a different number, you should save the template under a slightly different file name (to be aware of your altered file). If this is an XML file, be sure to save with the XML extension.
Now you have made these changes, attempt to upload your file again in the Layout>Edit HTML section of your Blogger dashboard. Now you should not receive the error code and will be able to upload your template.

If after following these steps you are still unable to upload your revised template, it is worthwhile to close your browser and delete all temporary internet files and cookies. Then restart your browser and try to upload again. Clearing all of these temporary files from your browser will ensure you receive a fresh page when editing your template. Previously when I have received error codes while editing Blogger templates, this technique has resolved the issue.

It may also be worthwhile using CCleaner to remove all such temporary files from your system. This is a free program which I use on a regular basis to clean up (and speed up) my computer.

I do hope that these techniques will enable you to upload a new template to your blog if you have previously received a bX-error code. If you know of any alternative solutions please do let us know about these by leaving a comment or sending me an email.

A message for the Blogger Team

I completely understand your concerns that certain third party templates may contain code which causes data corruption (and I'm sure most other Blogger users do too!). None of us enjoy experiencing issues with our blogs, and of course ensuring all templates contain no malicious code is of the utmost importance in maintaining a safe and enjoyable environment for Blogger users.

If it would be possible to post some guidelines for template developers, this would be truly appreciated! This way, those of us who design templates for Blogger can ensure we meet these guidelines in order for our templates to work correctly, without causing issues or bX-errors.

Another possible solution would be to provide a repository of "approved" third party templates, much like the one provided by Wordpress.com. I do understand that this would be a huge development and require much work, though I'm sure there would be many volunteers willing to help check templates before they become publicly available (myself included) and the Blogger community in general would be thrilled to have such a feature available!

How to easily add interactive Google Maps to your Blogger posts

2009-02-02T15:34:00.112Z

Adding Google Maps integration to your web projects can offer visitors a more interactive experience of your website and assist the understanding of where events or business takes place.

In a recent project, I decided to utilize Blogger to create a website for a local business, and found that including Google Maps was of great benefit for visitors to understand where the business is located. However, of the many tutorials on the web which explain how to add Google Map functionality to our websites, I was unable to find clear instructions for how maps can be added to a Blogger powered blog.

Luckily I discovered two simple and highly useful techniques for adding Google Maps to blog posts with no editing of the template required.

In this post, I'll explain just how easy it is to add interactive Google Maps to your blog posts, which can offer your readers further insight into events, business or other local information which are relative to your site or blog posts.

An Overview of Google Maps and Blogger

Bloggers write for many different reasons: some to log their daily activities or keep in touch with friends and family; others to publicize their business, or earn an income online by providing useful and informative articles.

No matter what the genre of our subject matter, there may well be times when area maps relevant to our posts may enhance the experience for our readers. A family blogger for example could illustrate their holiday destination, while a business blog could demonstrate the location of their shops.

While Blogger's recent "Geotagging" feature proves useful to many Bloggers, there are times when nothing less than an actual map will do. And when you consider the interactivity offered by Google Maps (2d maps, sattelite views and even driving directions), the prospect of adding such a feature to our blogs becomes even more enticing!

Here, for example, is a map of Downing Street in London, England:

View Larger Map

Using this map, you can easily switch between the 2-dimensional map, a satellite view and even the terrain of the ares. You can move the map in any direction to see the surrounding area; zoom in and out for a closer/distant view, and incredibly you can link to driving directions too!

Such interactive elements can add a huge amount of interest to your posts, and can assist reader's interaction with your site, whether this be a deeper understanding of the locations you write about, or to help potential customers find out where your business is based.

There are two main methods you could use to add customizable Google Maps to your blog posts:

Paste code for an Iframe generated by Google Maps
Using the Google Maps creator from KabaWeb.com

Neither of these options requires you to edit your Blogger template in order to add these maps to your posts (or even your sidebar, if you prefer this location). Whats more, these can be added simply by copying and pasting a section of code to your posts.

Let's go through each of these methods in turn and explain the circumstances in which these would be most useful.

Adding an Iframe generated by Google Maps

I personally find this to be the easiest and most reliable method of adding Google Maps to Blogger posts.

To begin, simply visit the Google Maps website and type in the location you wish to display:

For example, if I wanted to display a map of The White House, I would type: "The White House, Washington DC, United States". The search results would then be displayed in a screen like this (click on the image for a larger preview):

If nescessary, we can narrow down the location by clicking one of the links on the left in order to get a more accurate map.

Once we have the map we would like to embed in our Blogger post, we need to retrieve the code required to display it.

To do this, click on the "Link"icon at the top right of the map:

In the pop-up, click "Customize and preview embedded map". This enables us to tweak the dimensions of the map to ensure it fits well within our blog post.

If you are using a default Blogger template, I would advise you to use the "Small" option which will measure 300px in width. This ensures the map will not overlap the space you have available for your blog posts which could mess up the overall layout of your blog.

In cases where you use a widened posts column, you could choose a larger map size or even specify your own dimensions. As a guide, the medium map size is 425px wide while the large embed is 640px. Your selection will automatically generate a new preview which gives a good idea of how well this will fit into your Blogger template design.

Finally, copy all of the code in the third section of this page to your clipboard. We will paste this into our Blogger post shortly.

How to embed the iframe code in your Blogger posts

To add your iframe code to a post, simply crewate a new post and paste the iframe code where you would like your map to appear within the post.

There are no hard and fast rules about how to embed the iframe code in your posts, though I do have some suggestions based on my own experiences:

Using Blogger in Draft to write your posts makes the process easier! Just ensure the compose settings are set to "Interpret typed HTML", then you can use either the "Compose" or "Edit HTML" version depending on your personal preferences.
If you prefer to use the regular Blogger post editor, ensure you paste the iframe code when using the "Edit HTML" tab, not the rich text composer. Unless you paste the iframe code in the Edit HTML page, your maps will not display properly.
It can be easier to write your entire post, then paste the iframe code afterwards, where you would like your map to be displayed. This ensures you don't accidentally delete any of the code when editing, which would render your maps useless.

You should be able to preview how your post will appear after pasting the iframe code into your post, regardless of whether you use Blogger in Draft or the regular post editor, so be sure to check how everything looks before hitting the publish button!

When using Google's simple embedded maps may not be perfect for your needs

Using this simple embed code does not offer complete control over how your maps will appear. If you prefer to use a custom marker or more than one reference point on your maps, you would need a more advanced solution and extensive HTML code.

For a more customized option, I would advise you to check out KabaWeb's Google Maps creator which offers a simple interface for such advanced usage of Google Maps.

Using KabaWeb's Google Maps Creator

KabaWeb's Google Maps Creator allows greater control over how your maps and any information about the locations are displayed. Here for example is a map of 10 Downing Street in London with my choice of marker and a more personalized information bubble:

Using this version of an embedded Google Map is slightly more complicated that using the code generated by Google, though it is most useful to have greater control over the content of your maps.

Generating a Google Maps API key

In order to use the Google Maps Creator, you will need access to your own Google Maps API key, which you can generate from the API sign-up page.

To generate your key, you should accept the terms and conditions for use, then add your blog's URL where prompted. Your API key will be specific to your site, so you cannot use the same key elsewhere. This also means you cannot preview how the maps will appear within your posts (as the URL for preview pages will be different from that where your posts are published).

Once your API key has been generated, copy this long string of numbers and letters to Notepad or your favorite text editor. You will need to access this again soon.

Generating your maps

Once you have your API key saved, you can then generate your maps on the Google Maps Creator page.

Here you can set the following options depending on your requirements:

Your map's name
The location you wish to display. The preferred format for accuracy seems to be STREET-NAME, TOWN, COUNTRY.
Map height and width: the default setting for width is 700px, too wide for most Blogger post sections. Be sure to reduce this to accomodate the settings for your own template
Zoom size: unless you prefer to display a town or country view, you can leave the default setting of 14px
Map Control: This chooses whether to display controls to the left of the map which visitors can use to zoom in and out
Show map types bar: This chooses whether to display the switch to toggle between map, satellite and hybrid views.
Show overview inset: This chooses whether to display the inset in the bottom right of the map, which offers a quick overview.
Info Text: This is the text displayed in the balloon overlay. You can use plain text or HTML code to style how your informative text will appear.

Once you have changed the settings for your preferences, click the "Generate this map" button, which will update the map preview beneath to show how your embedded map will appear.

Embedding the map in your Blogger post

Once you have generated the map you wish to display, you can use the code provided to paste into your Blogger post (or an HTML/JavaScript widget in your sidebar).

To find the correct code, scroll right down the page until you see the section marked "Portable Code". This is the section of code which is best to use with Blogger powered blogs.

Copy the entire section of code in this box to your clipboard, then switch over to your Blogger post editor.

Be sure you have completely written your blog post before pasting the code for your map, especially if you are using the regular post editor (not Blogger in Draft). When attempting to use this version of an embedded Google Map, I have encountered errors when attempting to edit the post after embedding the code.

If you are using the regular post editor, switch to the Edit HTML tab and paste your code where you would like your map to appear. Then replace "YOURKEY" in the third line with the API key you obtained from the Google Maps developer pages. Then finally, publish your post.

Be sure not to switch back to the "Compose" tab after pasting the code for your map! If you do, the code will become corrupted and your maps will not display properly in the page.

When using Blogger in Draft to compose your posts, it is not necessary to switch to the "Edit HTML" tab. However, it is still advisable to paste the code only after you have finished writing your post, and do not switch between the different post editors.

Once you have published your post, you can take a look at your new maps in your blog posts!

Final thoughts

While Blogger's new Geotagging feature offers an interesting way to add locations to our posts, it is often the case where nothing less than a map will suffice in the understanding of our post content! Using the methods described above, you can easily add interesting and interactive Google Maps to your Blogger posts, ensuring your readers have a deeper understanding of the locations mentioned in your posts.

If you know of other simple methods to add maps to Blogger posts, please feel free to let us know by leaving your comments below.

Google Blogger For Dummies to be released in February!

2009-01-29T17:09:00.092Z

If you're familiar with the "Dummies" series of books, you'll understand how helpful and insightful these textbooks can be in dealing with any subject.

That being said, I'm happy to announce that Google Blogger for Dummies is due to hit bookshops on February 3rd. It's available to pre-order now from Amazon.com
(priced at $16.49) and will be available in Barnes and Noble, Waterstones and other bookshops, and also directly from Wiley.

The author, Susan Gunelius, has been kind enough to send me a 60 page preview of this book, complete with a full and detailed table of contents and two sample chapters for my preliminary review. Also, when the book is released early next month, Susan has graciously offered me a copy of the book so that I can review it in it's entirety and offer Blogger Buster readers my insights.

What Google Blogger for Dummies will cover

Being a "Dummies" guide, Google Blogger for Dummies will cover both the basics of using Blogger (creating and setting up a first blog) and also some advanced techniques and insights which even experienced bloggers will find both useful and insightful.

There are 16 chapters in all (plus the "Parts of Tens"): the first five chapters explain how to set up and manage a blog with Blogger, while the remaining chapters offer insight into building a successful blog including advice about social networks, publishing blog posts and managing your template. All of this is written with particular reference to Blogger.

Here is the "At a Glance" Table of Contents of Google Blogger Dummies:

Part I: Introducing Google Blogger

Chapter 1: Choosing Blogger as Your Blogging Software
Chapter 2: Welcome to the Blogosphere
Chapter 3: Blogging Basics and Buzzwords

Part II: Using Google Blogger

Chapter 4: Getting Started with Blogger
Chapter 5: Setting Up Your Blog
Chapter 6: Writing and Publishing Blog Posts
Chapter 7: Enhancing Your Blog with Templates
Chapter 8: Adding Features and Functionality with Elements and Gadgets
Chapter 9: Managing Your Blog

Part III: Making Money with Blogger

Chapter 10: The Business of Blogging
Chapter 11: Maximizing Revenue with Google AdSense

Part IV: Growing Your Audience

Chapter 12: The Power of Networking and Relationship Building
Chapter 13: Boosting Your Search Engine Ranking

Part V: Extending Your Blog

Chapter 14: Growing or Downsizing Your Blog.
Chapter 15: Blogging from Different Media
Chapter 16: Moving Beyond Blogger

Part VI: The Part of Tens

Chapter 17: Ten Useful Social Networking and Social Bookmarking Sites
Chapter 18: Ten Common Blogger Problems and Possible Solutions
Chapter 19: Ten Places to Find Free Blogger Themes and Templates

Furthermore, each chapter is further divided into useful sections which succinctly explain each aspect in detail, accompanied by tips and hints to help you get the most from your blogging experience.

My thoughts so far

After reading through the sample chapters, I can honestly say I'm looking forward to reviewing the full text. Susan's writing is pleasant and easy to read, while her advices on the "etiquette" of blogging ensure Google Blogger for Dummies explains as much about the experience of effective blogging as it does about using the Blogger platform.

Once I've received my copy and have read this in it's entirety, I will review Google Blogger for Dummies in detail here on Blogger Buster. In the meantime, keep an eye out for this title as it's sure to be landing on the shelves of a bookstore near you.

The Top 20+ Free Blogger Templates of 2008

2009-01-10T13:55:00.009Z

In 2008 we saw a surge in the quantity and sheer quality of free Blogger templates made available for us to download. Now that designers are turning their attention towards designing for this free blogging system, we can only expect this trend for increased quality to extend far into the new year.

Over the past twelve months I've published several posts offering collections of free Blogger templates for you to download. However, there are certain templates which are simply outstanding: the cream of the crop, which have proved their worth as the best Blogger templates of 2008.

Here is my personal selection of the 20 best Blogger templates from 2008 (in no particular order or preference!) with previews and links to their download sites. I hope you will enjoy browsing through these templates if you are searching for an ideal template for your blogging project or simply to be inspired by great design.

The Daily Inspired by Woork

Antonio Lupetti's fabulous design is exclusively available for use with Blogger templates. Featuring a magazine style layout with many useful features, this clean and professional design provides the perfect canvas for business, design and magazine style blogs.

I must point out that this template is an advanced layout, and you will need to be familiar with the Blogger and HTML code if you intend to use this as much editing is required for this template to function properly. In any case, this is one of my favorite templates ever created for Blogger, and I'm sure most of you will love this design as much as I do too!

View this template in action | Download The Daily Inspired Blogger template

Dreamwork Redux (Converted by JackBook)

This stunning template is a conversion of the Wordpress template by Vinh Le and includes many useful customizations. The footer section is fully widgetized while the sidebar contains integrated widgets for recent posts and comments.

I loved the original striking style of the original Wordpress theme so I personally was thrilled to see this template ported over to Blogger!

View this template in action | Download Dreamwork Redux template for Blogger

Notepad Chaos (Converted by GosuBlogger)

Here is a truly stunning, grunge style design which was converted from the Wordpress theme distributed through Smashing Magazine.

Besides the stunning header section, this design offers styling of appropriate widgets in the sidebar; tabs for the date headings, and an informational section in the footer.

GosuBlogger has done a great job of this conversion to ensure no functions have been lost in the conversion and that new widgets can be added with just a few clicks.

View this template in action | Download the Notepad Chaos Blogger Template

Color Paper (Converted by Falcon Hive)

This dark grunge style template is made to appear printed on colored paper. It features a fully widgetized sidebar, integrated search function and tabs for the date headings.

I've only recently discovered Alvaris Falcon's beautiful selection of Blogger templates but I'm sure his talents will spread his fame as a Blogger template designer throughout this next year!

View this template in action | Download Color Paper Blogger Template

Creative Art (Converted by GosuBlogger)

Here is another stunning Blogger template by GosuBlogger which is converted from the Wordpress theme by DT Website Templates.

This template uses a striking background image for the header section, tabs for navigation, an integrated Flickr photostream and fully widgetized sidebar.

Preview this template | Download the Creative Art Blogger template

Revolution Theme for Blogger (Converted by Aborregate)

Brian Gardner's themes for Wordpress are among the most popular available and virtually revolutionized the WP theme market. Aborregate's conversion of the classic Revolution theme for Blogger provices a highly useful, functional and customizable layout with an air of professionalism which makes it ideal for the business minded blogger.

This theme includes tabbed navigation in the sidebar, a three column layout and stylized icons for post meta data.

Aborregate's site seems to be down at the moment, so instead I have provided links to the demo and download locations on BTemplates.com (the premier collaboration site for free Blogger templates).

Preview this theme | Download Revolution for Blogger

WP Polaroid (Converted by eBlog Templates)

Since it's release in January last year, the WP Polaroid conversion of Adii's Wordpress theme has proved one of the most used Blogger templates ever - and for good reasons! This wide two column template is the ideal solution for a portfolio or showcase site, with space in the header section for information about the site, integrated ads above the sidebar and a sllit widgetised sidebar section with custom images for each heading.

View live demo | Download WP Polaoid for Blogger

Zinmag Remedy (Converted by Falcoln Hive)

This is a truly stunning template when seen live in action. Converted from the template designed by Jinsona Design, this layout features a fantastic slideshow below the header (great for showcasing feature posts), a truly magazine-style layout and even a video section on the home page.

Please do take a look at this template in action as I personally am awed at the excellent job Alvaris has made with this conversion for Blogger! This screenshot does not give justice to the excellent functions included in this design!

View live demo | Download Zinmag Remedy template for Blogger

Angel (Converted by Hajunik)

This beautifully simple theme was converted from the Wordpress template by Blog Oh Blog and offers a clean yet professional layout with tabbed navigation in the sidebar, icons for lists and stylish icons throughout.

View live demo | Download this template

Wordpress Fun (Converted by GosuBlogger)

Here is another template offering a definite "WoW" effect! Origanally created by Malleika Attawel for Smashing Magazine, this template features a stunning header image and colorful layout with plenty of room for all your favorite widgets.

View live demo | Download this template

Butterfly (Converted by Blogger Tricks)

This beautiful template features a stunning vector style header and two column sidebar for your widgets and advertisements and was converted from the original theme by Templates4All.

Although this theme offers simple functions, the beauty fo the design has ensured this template is a popular choice for Blogger users.

View live demo | Download Butterfly template for Blogger

Masinop (Converted by Falcon Hive)

Here is another amazing template conversion by Alvaris of Falcom Hive. Featuring a colorful bar set against a dark grey background, this template offers a professional yet wholly useful approach for Blogger template design.

The sidebar is fully widgetised with an integrated search bar and a section for important blog links, while the footer offers space for advertising or an "About this site" paragraph.

View live demo | Download Masinop for Blogger

Wordpress Admin (Converted by ThemeLib)

Here is an unusual and wholly elegant theme conversion from ThemeLib. This Wordpress Admin styled template is designed to mimic the Wordpress dashboard while offering a fully useful approach to the Blogger layout. I love the simplicity and professional style of this theme, and those icons for comment counts of each post are the perfect finishing touch.

View live demo | Download Wordpress Admin Blogger template

Squick Design (Converted by Blog and Web)

This elegant design was converted from the original template by Web Page Design and offers a clean, vector style layout with space beneath the header for your company motto or introduction.

View live demo | Download Squick Design Blogger template

Japanese Fleur (Converted by ThemeLib)

This beautiful template features a two column layout, integrated RSS feed icon and search functions. It was converted from the Wordpress.org theme by Lorelie and offers a beautiful template for those wanting a feminine approach to their design.

View live demo | Download Japanese Fleur Blogger template

Japan Style (Converted by Falcon Hive)

Here is another stunning design which has been converted by Alvaris Falcon. This stunning layout offers a Japanese theme with a wonderful background image for both the header and footer sections.

It offers integrated navigation buttons, feed subscription link and search in the sidebar. I'm sure you will agree this is a truly beautiful Blogger template!

View live demo | Download Japan Style Blogger Template

Emo Blue by ZixPk

This original Blogger template is a dark and sleek design which features a subtle grunge design. It is a three column layout with integrated feed links and search function and is fully widgetized.

View live demo | Download

Welcome Autumn by Gisele Jaquenod

Gisele's templates are always beautifully designed (just take a look at her blog to see the best examples). This autumn themed template features the familiar "Birdy" character above the sidebar and it's neutral color scheme enables this template to be used for a whole variety of blog niches.

Read more and download the Welcome Autumn template for Blogger

Made in Spain (via BTemplates)

According to the statistics from BTemplates.com - the leading resource site for free Blogger template downloads - the Made in Spain template is among the most popular Blogger templates of all time, boasting almost 20,000 downloads from BTemplates alone at the time of writing.

This two column template offers a notebook style appearance, tabbed navigation to the left of the main section (made to appear like post-it notes) and a fully widgetized sidebar.

View live demo | Download the Made in Spain template for Blogger

DfMarine (Converted by TemplatesNovoBlogger)

Here is a sleek and professional template which was converted from the original theme by Deziner Folio.

It features a stylish three column section for links/bookmark icons below the header, a fully widgetized sidebar, calendar icons and much more.

View live demo | Download DfMarine Blogger Template

Bonus!

Here is another AMAZING template which I'd forgotten to add to this list (thank you Daniel for reminding me!)

Cellar Heat (Converted by MagzNetwork)

This fabulous template displays posts in rows of three, side by side on the home page, while on item pages the posts are expanded to fill the main area. It includes a single sidebar to the right of the posts column and three widgetized sections in the footer area.

Originally created by Evan Eckard for Smashing Magazine, I am awed by the wonderful conversion made by Magznetwork and truly recommend this template for those who desire an edgy, grunge style theme.

View live demo | Download Cellar Heat Blogger Template

Overview

While some of these templates may be familiar from my previous Blogger template articles, I've only recently discovered most of these templates and feel it only fair to share the best of my discoveries with you.

There are dozens more beautiful Blogger designs I have encountered over the past year and this is my personal selection of favorites. So if you feel I've left out an outstanding design or would simply like to share your own favorite designs, please feel free to discuss this in the comments below.

Import blogs from another service to Blogger with the Google Blog Converters Project

2009-01-10T01:19:00.000Z

A few months back, Blogger announced the ability to import and export Blogger hosted blogs. At the time, it was not possible to import blogs from any other service to Blogger, which left many of us a little disappointed though wondering when this service could be made available.

Well it seems there is hope that Blogger can make such a service available through our Blogger dashboards soon enough! Today the Google Code blog announced the Google Blog Converters project: an open source project which aims to make available the ability to import/export feeds from many different blog platforms:

This new Open Source project provides the ability to easily move blog posts and comments from service to service. This initial release provides Python libraries and runnable scripts that convert between the export formats of Blogger, LiveJournal, MovableType, and WordPress.

In addition, the source code includes templates for hosting these conversions on Google App Engine. Future additions to the project will include support for BlogML and synchronization tools between various services that do not provide a import/export feature but do provide APIs for accessing and modifying blog contents.

At present, the scripts provided by the Blog Converters Project are not so user friendly for those unfamiliar with scripting languages (though I hope those of you fluent in Python or familiar with the Google App engine may be able to make significantly more progress than I have!).

Instead, you may be better advised to check out these existing online projects if you need to convert a blog from another host over to your Blogger blog:

Wordpress2Blogger - Import posts from a Wordpress blog to your Blogger account
LiveJournal2Blogger - Import posts from a LiveJournal blog to your Blogger blog

I look forward to seeing how this progresses and hope we can expect to see an official Blogger application in the near future enabling us to import directly from our Blogger dashboards!

Please feel free to leave any comments or suggestions about this project below.

Get the latest Blogger updates via Twitter!

2009-01-10T01:13:00.000Z

The Blogger team have (finally) decided to embrace Twitter as a means of publishing updates for Blogger users. By following the official Blogger feed on Twitter, you can now receive news of status updates, blogs of note, service interruptions and fabulous new features even sooner than before.

If you already use Twitter, be sure to follow these official Blogger tweets.

Merry Christmas!

2008-12-25T13:45:00.000Z

Wishing all Blogger Buster readers a very Merry Christmas!

Blogger's new Geotagging feature (and how to use it!)

2008-12-15T17:53:00.004Z

The Blogger team have added a new "Geotagging" feature to Blogger in Draft which enables you to add a location to each of your blog posts. This will then display in your post-footer section (near your post labels, timestamp, etc), and will act as a link to a page on Google Maps where readers can learn more about the location.

Here's an example of how this would appear, as taken in screenshots from the explanatory post on the Blogger in Draft blog:

When you click on the linked location, this will open a new page from Google Maps which shows you the exact location which the author has attributed to the post, like this:

RSS support for Geotags

Your post locations will be included in your blog's RSS and Atom (XML) feeds using GeoRSS which is a web standard for Geotagging. This is important as it allows feed readers, map readers and search engines to associate your posts with particular locations. For example, if you tag your blog posts "New York", these posts can be found more easily by those searching for content based on the New York area.

How to tag your posts with a location

In order to Geotag your posts (add a location) you must create or edit your post through Blogger in Draft. This is because this feature is still experimental, and has not yet been rolled in to the main post editor.

When you create (or edit) a post through Blogger in Draft, look to the left of the Labels area to see the "Add location" link:

This will bring up a pop-up box which appears like this:

Type the location you would like to add in the search box near the top of this pop-up box, and press "Search". You may need to refine your search by adding more details (eg: country, city name, street address) in order to find the location you require.

Once you have found the correct location, you can zoom in (for more accuracy) if you prefer, and finally save your location.

Important: once you have geotagged a post, you cannot remove this tag!

If you do need to remove your geotag for some reason, Blogger recommends that you copy the content of your post and create a new one, then delete the old geotagged post. At present, this is the only way to "remove" a geotag, though it is more of a workaround than a proper solution ;) I suspect the Blogger team will enable us to properly delete or edit a post's geotag before this feature is rolled out for the main post editor.

How to make your Geotags appear beneath your posts

The first step to making Geotag links appear beneath your posts is to enable this setting in the Blog Posts widget.

To do this, go to Layout>Page Elements while logged into Blogger in Draft, and click the "Edit" link for the Blog Posts widget. On this pop-up page, you will notice a new checkbox for "Location". Ensure you have ticked this checkbox, and save your changes.

If you have recently changed your template to a default Blogger theme (or have recently started a new blog), this simple change of setting will enable you to see Geotag locations beneath your posts straight away. If you are unable to see your Geotags after this change of setting, you need to follow one of the instructions below instead.

Since this is a new Blogger feature, your existing template may not currently include the code required to make geotags appear for each of your tagged posts.

If you use a default Blogger template, the simplest way to enable the Geotags for your posts is to pick a new template. Simply go to Layout>Pick new template in your Blogger dashboard and choose the template you would like to work with. This can be the same template you are currently using.

This method refresheds the template code and adds the section required to make the Geotags appear in the post footer section. Alternatively, you could "Revert the widget templates to default" on the Layout>Edit HTML page of your blog. This has the same effect as choosing a new default template.

If you use a customized or third party template, you will need to add the code required for the Geotags to display manually by editing your template code.

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

We need to add the required code to the "post-footer" section of the main blog posts widget. The easiest way to locate this section is to use your browser's search function to find the following line of code:

<div class='post-footer'>

<div class='post-footer-line post-footer-line-1'>

If you cannot find either of these lines in your template code, search for "post-labels", "post-icons" or "timestamp" to locate the appropriate section of your template instead.

Once you have located this section of your template, you need to add the following section of code:

<span class='post-location'>
<b:if cond='data:top.showLocation'>
<b:if cond='data:post.location'>
<data:postLocationLabel/>
<a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
</b:if>
</b:if>
</span>

Be sure to add this outside any other tags! If you did find the <div class='post-footer'> tag (or similar) in your template, the safest place is to add the code immediately after this line.

Then preview your template. If all is well, you should now see Geotag links appear beneath any posts you have Geotagged with a location (though none will appear on posts which have not been tagged).If you have made any errors when adding the code above, you'll receive a message that your template cannot be parsed. In this case, simply "Clear edits" and attempt to paste the code again.

Is Geotagging a useful feature for Blogger?

I personally feel that Blogger's integration of this new feature will prove very useful for a large proportion of the Blogger community. So far the comments I have read on the introductory post for this new feature have been very positive, and it seems many creative coders have already expanded their ideas for how Geotagging can be intrgrated for widgets and other useful features.

However, this may not be a feature which is beneficial for us all. Here on Blogger Buster, for example, the location where these posts are typed does not complement the content and has no added benefit for readers (I like to think the content posted here has international appeal!).

What are your opinions of Blogger's new Geotagging feature? Will you be using this feature to complement your own blog posts?

Please feel free to let us know your own opinions and comments by leaving your message below.

ThemeForest's $25,000 Giveaway - Your chance to get a premium Blogger theme for FREE!

2008-12-09T19:22:00.001Z

As many of you will be aware, I also design premium Blogger templates which are sold through ThemeForest.net: a relatively new site which offers premium quality site and CMS templates. To help promote and raise awareness for the site, Envato are offering a $10 credit to the first 2500 commenters - a total of $25,000!

This $10 credit could buy you one of the premium Blogger themes available on the site, or any other of the quality site templates, Photoshop source files or CMS templates available.

To qualify for your free $10 credit, simply visit this post over at PSDTuts (also part of the Envato network) and follow the steps. You will need to be a registered member of ThemeForest to qualify for your credit, though it costs nothing to join (ie: you don't need to credit your account in order to become a member).

If you've been considering trying out a Premium Blogger theme or are just interested in what ThemeForest have to offer, why not spend a few moments to comment and qualify for this great offer? Be quick though: only the first 2500 commenters will receive their credit :)

A Simple Snow Effect Widget for Blogger Blogs!

2008-12-03T09:58:00.005Z

Here is a simple snow effect widget which you can add to your Blogger powered blog in just one click! This widget does not use images to generate the snow effect: instead it uses plain white text (full stops and apostrophes) to act as snowflakes which trickle down the page. You can see this widget in effect here on Blogger Buster over the holiday period.

Click the button below to add this widget to your Blogger powered blog:

This widget was created using the Snow Effect Without Images script by Kurt Grigg which is distributed by Dynamic Drive.

This widget has been tested in both IE and Firefox and also in complex Blogger templates which use many other JavaScripts. Unlike other snow effect scripts, this simple non-image based widget works just fine!

I hope you enjoy using this festive decorative widget in your Blogger blogs! Please let me know your opinions or if you experience any trouble installing this widget by leaving your comments below.

Christmas is coming...

2008-12-01T13:39:00.000Z

... So over the next few weeks I'll be posting some festive Blogger tutorials (and possibly a festive themed template or two!).

In the meantime, why not check out my latest post over at Blogging Tips: The Festive Toolbox, which offers a great range of resources to help you decorate your blog for the holiday season?

If there are any particular festive customizations you would like to learn about, please let me know by leaving your comments below.

Free Blogger Template: Halo 01 (Minimalist, grid based design)

2008-11-26T18:00:00.001Z

Here is another free Blogger template for you to download: Halo 01.

This template uses a minimalist, grid-based layout and a unique presentation of post meta-data (labels, posting date, etc) which appear in a column to the left of each post. You can preview a larger version of this template by clicking on the image or viewing the demonstration blog.

More features of this template include:

Navigation links beneath the header
Icon to the right of the header (which can be replaced with your own photo or avatar if preferred)
Fully widgetized sidebar
Three column footer section
Styling (and code) to display your own Flickr photostream
Fonts and colors can be customized through your Blogger dashboard

View Demo | Download Full Template (Zip file)

How to upload the Halo 01 Template to your blog

Download the Halo 01 template and save this to a location on your computer. This template is contained in a Zip folder which you will need to extract using Winzip or your favorite extraction program (if you use WIndows XP, you should be able to decompress the file automatically).

Ensure you have saved the Halo_01.xml file to a location on your computer which you can remember easily. Then log into your Blogger dashboard and go to Layout>Edit HTML.

Near the top of the screen, you will see the "Backup and restore" section where you can upload a new template to your blog:

Click on the "Browse" button to locate the Halo_01.xml file on your computer, then press "Upload" to replace your old template with this new template.

If you have many widgets in your existing layout, you may be prompted to delete these before the changes can be saved. Be sure to make a back-up of any important widgets before saving these changes! Alternatively, take a look at my tutorial for how to retain widgets when changing Blogger templates.

Once you have uploaded your new template (and confirmed deletion of widgets if necessary), your new template is ready to be configured.

How to change the navigation links

The navigation links beneath the header section have been coded into the template. To edit or add your own links, you will need to edit this section of the template code:

<div class='nav'>
   <ul class='nav fix'>

       <li><a expr:href='data:blog.homepageUrl' title='Return to the the frontpage'>Home</a></li>
       <li><a href='#' title='Read about this blog'>About</a></li>
       <li><a href='#' title='Link title'>Link</a></li>
       <li><a href='#' title='Link title'>Link</a></li>
       <li><a href='#' title='Link title'>Link</a></li>

       <li><a expr:href='data:blog.homepageUrl + "feeds/posts/default"' title='Subscribe to the main feed via RSS'>RSS</a></li>
       <li class='skip'><a href='#main' title='Skip to content'>Main</a></li>
   </ul>
</div>

The code highlighted in red demonstrates the actual links you should change: replace these with the URL which you want the navigation buttons to point to.

The code in blue is the link text. You should replace these snippets with the text you would like to be displayed on the navigation buttons.

How to configure your Flickr Photostream

The CSS code required to style the Flickr Photostream is already present in the Halo 01 Blogger template. To add the code required to display a Flickr Photostream, go to Layout>Page Elements in your Blogger dashboard and click the "Edit" link for the Flickr Photostream widget.

Then copy and paste the following code into the content section for this widget:

<script src='http://www.flickr.com/badge_code_v2.gne?count=9&display=random&size=s&layout=x&source=user&user=8131003%40N03' type='text/javascript'/>

Replace the user ID number (highlighted in bold red) with your own unique Flickr ID. If you do not know what your Flickr ID is, you can find this easily using idGettr; simply enter your Flickr username and this simple utility will find your Flickr ID for you!

Finally, save your changes to this widget. Now when you view your blog in your browser, your own Flickr images will appear as thumbnails in this widget.

How to change the icon in the header

The generic icon in the top right of the header section can be replaced with your own avatar if you prefer.

Firstly, design your avatar and ensure this is 60px wide and 50px tall. Upload this new avatar to your favorite image host (I prefer Picasa Web Albums, though you could use Photobucket or any hosting service you prefer). Be sure to copy the URL of your avatar to your clipboard.

Next go to Layout>Edit HTML in your Blogger dashboard, and check the "Expand widget templates" box. Then search for the following line of code:

<p id='authorIntro'><img alt='Icon' src='http://lh6.ggpht.com/_xn2gmPb9TfM/SS2ChwchInI/AAAAAAAADXc/4BrtWQUyDKg/s144/avatar.gif'/><span><data:description/></span></p>

Replace the code highlighted in red with the URL of your new avatar, being sure not to disturb the surrounding single quotes ('). Preview your template to ensure no mistakes have been made when pasting your URL, and if all is well, proceed to save your template.

Licensing and copyright information

All images and content used in this template were created by myself, including the mini-icons used for the post meta-data.

This template is distributed under the Creative Commons Non-Commercial Attribution 3.0 license. This means you can use the template in any of your projects and make any modifications you choose, so long as you do not sell this template and provide attribution to the original author in some way.

Your thoughts?

I hope you enjoy using the Halo 01 template for your blogging projects! Please feel free to offer your comments and opinions using the form below.

How to make columns of equal height in Blogger

2008-11-25T18:00:00.001Z

An issue of blog design is that CSS based layouts cannot produce columns of equal heights. For example, when designing a two or three column template, it is almost impossible to make the sidebar(s) stretch to the length of the main posts column. This is particularly noticeable when a background color (or image) is used for the sidebar which does not stretch to the length of the page.

This issue is also relevant for those who display their blog posts side-by-side on the home page. Posts which are of equal height would appear in a harmonious grid-like format which is more pleasant to the eyes, whereas posts of unequal length disrupt the grid-like pattern and can often cause disarray in the layout.

In this tutorial, I'll explain how to use JavaScript to ensure columns of your choosing (whether the sidebars and main column, or individual posts) appear at equal heights to ensure a pleasant and harmonious layout for your blog design.

The "Matching Columns Script" and how it works

In this tutorial, we will be using an adaptation of the "Matching Columns" JavaScript by Alejandro Gervasio. which was modified to work in FireFox by Stefan Mischook for Killersites.com. You can read the original article and even view a video explaining how this script works over at the Killersites blog.

This JavaScript matches the height of all columns which use a specific CSS "class". It finds the length of the longest columns which uses this class name, then creates extra CSS declarations to ensure all other columns using this class are lengthened to the same height.

For example, if we use the class of "column" for both the main posts section and sidebars in our blog template, the script will ensure that the main column and both sidebars appear of equal length when viewed in a web browser.

The original Matching Columns JavaScripts use external files which are linked to in the head section of the web-page. However, I have adapted this method for use in Blogger templates so we can use "inline" JavaScript, meaning we do not need to host a JavaScript file on an external host.

How to add the Matching Columns function to your Blogger layout

The first step to creating columns of matching height in your Blogger layout is to add the required JavaScript code to the head section of your template.

This is very simple! All you need to do is copy the following section of code and paste this just before the closing <head> tag in your Blogger template (it is quite long so be sure to copy the entire section of code to your clipboard!):

<script type='text/javascript'>
/*
Enables columns to be of the same height for better blog designs.
Derived from a script by Alejandro Gervasio.
Modified to work in FireFox by Stefan Mischook for Killersites.com
Adapted for inline use with Blogger blogs by Amanda Fazani of BloggerBuster.com

How it works: just apply the CSS class of 'column' to your pages' main columns.
*/
function matchColumns(classname){

     var divs,contDivs,maxHeight,divHeight,d;

     // get all <div> elements in the document

     divs=document.getElementsByTagName('div');

     contDivs=[];

     // initialize maximum height value

     maxHeight=0;

     // iterate over all <div> elements in the document

     for(var i=0;i<divs.length;i++){

          // make collection with <div> elements with class attribute 'container'

          if(new RegExp("\\b" + classname + "\\b").test(divs[i].className)){

                d=divs[i];

                contDivs[contDivs.length]=d;

                // determine height for <div> element

                if(d.offsetHeight){

                     divHeight=d.offsetHeight;

                }

                else if(d.style.pixelHeight){

                     divHeight=d.style.pixelHeight;

                }

                // calculate maximum height

                maxHeight=Math.max(maxHeight,divHeight);

          }

     }

     // assign maximum height value to all of container <div> elements

     for(var i=0;i<contDivs.length;i++){

          contDivs[i].style.height=maxHeight + "px";

     }

}

// Runs the script when page loads

window.onload=function(){

     if(document.getElementsByTagName){

          matchColumns('crosscol'); // class=column
          matchColumns('column'); // class=maincolumn

     }

}
</script>

Once you have pasted this section of code in your template, proceed to save it. If for some reason you have made any errors when pasting the code, you will receive an error message and be unable to save.

Now to make sections of your Blogger layout have equal heights, we need to apply the class of "column" to those sections in the actual template code. I will offer two variations of how this can be achieved in this tutorial: making the sidebar and main-wrapper equal height, and making all posts equal height (for use when making posts appear side-by-side).

Make the sidebar(s) and main posts column of equal length

This method works best for layouts including at least one colored sidebar (whether this feature a background color or background images for effect). There are many different non-standard templates using this style of layout, so it's likely that the identifiers of the divisions referenced here could be different in your own template.

To make the sidebar(s) and main column of equal length, you will need to add the class of "column" to these divisions in the template.

For the main-wrapper (the section which holds your blog posts) you should look for a line like this in your template:

<div id='main-wrapper'>

Add the code highlighted in red to this line:

<div id='main-wrapper' class='column'>

If you cannot find <div id='main-wrapper'> in your template, this may be called 'main-wrap' or 'main-section' instead. Use your discretion to find the appropriate code tag; you can always change things later!

Next, you need to add the class of column to your sidebar or sidebars. If your template features more than one sidebar, this could become a little complicated though I will do my best to explain!

Most Blogger templates identify the sidebar-wrapper like this:

<div id='sidebar-wrapper'>

If you find this in your template code, simply add the section in red:

<div id='sidebar-wrapper' class='column'>

The main sidebar could also be called 'sidebar-wrap', 'left-sidebar' or even 'left-bar' depending on the template you are working with. Again, use your discretion and add class='column' in the place you think most appropriate for your template.

This also applies in templates where you have a second sidebar. It may be named <div id='sidebar-right'> ; 'right-sidebar-wrapper', 'new-sidebar-wrapper' or something entirely different. Simply add class='column' inside the division tag which you think references the correct section in your template.

Now to check if your modifications have been successful, attempt to preview your template. Since the JavaScript we are using is contained within the template (not referenced from an external host) you should be able to see the difference straight away. This means that your blog sidebar should appear as long as your main posts column.

If all looks well, you can proceed to save your template and enjoy your new matching columns. If your sidebar and main column do not appear at equal heights, clear your edits and begin again being sure to check the placement of the class='column' sections you have added.

To make posts of equal height

This method is particularly useful when using my recently posted customization to display posts side-by-side on non-item pages. Using this method ensures your posts appear in a grid-like fashion with spaces beneath shorter posts so all headings are correctly aligned.

For this example, you will need to ensure you have checked the "Expand widget templates" box on the Edit HTML page, as we will be adding the class of "column" inside the main posts widget.

Firstly, ensure you have added the JavaScript before the closing </head> tag in your Blogger template.

Next, search for the following line of code (or similar):

<div class='post'>

If you cannot find this line, search for the following instead:

<div class='post hentry'>

Or any other division tag which begins with <div class='post

You do not need to add the entire class='column' phrase here as this div already has class attributes. Instead, we simply need to add the class identifier, like this:

<div class='post column'>

or alternatively,

<div class='post hentry column'>

This is because divisions can have more than one "class" (though they can only have one "id"!).

Once you have added this extra class to the posts section, preview your template to see that your blog posts are now all of equal height.

Important information when making posts of equal height

If you choose to make your posts of equal height, you must consider that all of your posts will appear as long as your longest post. So if you have one particularly long post on your home-page when all others are relatively short, there will be long gaps beneath all of your shortened posts!

Other uses for the matching columns script

You can also adapt this script and methods to add columns of equal height to your blog footer (in conjunction with my three column footer hack, perhaps!), or to any other areas of your blog template which you would like to be of matching heights.

Simply apply the class of "column" to all divisions which you would like to appear at the same height, and ensure you have pasted the JavaScript before the closing </head> tag in your Blogger template!

Your thoughts?

I hope you have found this tutorial to be a useful addition to the arsenal of Blogger customizations and tutorials posted here on Blogger Buster! Please feel free to leave your comments or let us know how you have used the matching columns script in your own designs by typing your message below.

How to display Blogger posts side by side (create a newspaper style layout!)

2008-11-21T18:00:00.001Z

In recent weeks, one of the most requested tutorials has been how to display posts side-by-side. An example of how this is used is the classic (and much loved) Hemingway template, in which posts are displayed beside each other:

The Hemingway template does not include a sidebar in the layout. Instead, widgets are contained in the footer section (beneath the posts) which effectively puts most focus on the blog posts and less on the widget contents.

You can download the Hemingway template for Blogger from BlogCrowds in both the black and white variations of design.

Many bloggers prefer a three column template in which two of the columns are dedicated to blog posts (and with only one sidebar). An example of this layout can be seen in the popular Drudge Report blog:

In this tutorial, I'll explain how you can create a three column Blogger template in which two columns are dedicated to posts, while the third may be used as a regular sidebar. On item pages, the post will take up the full width of two columns to ensure there is no unsightly gap between this and the sidebar.

We're going to base this tutorial on the Minima template, though the same principles can be applied to most Blogger templates. Here is an example of what we will achieve:

Overview (Read this first!)

In this tutorial, I'll explain how to transform the default Minima template so that posts appear in (narrower) columns, side-by side on home, archive and search pages, with a sidebar of the same width appearing on the right hand side of the posts.

To transform the basic Minima template into a three column, newspaper style layout is fairly straightforward and includes two basic steps:

Increase the width of the overall template to accomodate the extra column
Add some conditional CSS to make the posts appear beside each other on non-item pages

However, once we have done these two steps, there will be a few other code and CSS issues which we need to resolve in order that the template will appear as it should. I will take you through all steps nescessary to ensure the layout appears as it should, with explanations and visual examples at each stage.

An issue which you should consider when using this tutorial is that the width of each posts column (on non-item pages) will be decreased to 290px. This means you should ensure images in posts are no wider than 290px (including any padding or borders) otherwise the posts columns will be pushed beneath each other, rather than be displayed side-by-side.

If you usually display large images and wish to do so on item pages, we can add some extra CSS to the template to restrict the width of images on non-item pages, as I will explain later in this tutorial.

Most of the techniques described in this tutorial may also be applied to different templates. If you would like to transform your own (non-Minima) template in this manner, my advice would be to follow each step of this tutorial in a test blog first, then see how this could apply to the different CSS classes and identifiers in your own template. It's much better to have some experience of this technique beforehand than to jump in feet first!

Step 1: Create a test blog

While it is not essential to create a test blog to make changes to your blog layout, I'm sure many of you will find this useful! This way you can make changes without affecting your main blog, and if you happen to make a mistake you can start all over again ;)

I have written a comprehensive tutorial about creating a test blog which you can read here. If you'd like to jump straight in, here are the basic steps covered in the test blog tutorial:

Create a new blog (choose the Minima template for the purpose of this tutorial)
Fill it with some posts (at least 2, though more would be preferable)
Make it private, and prevent your blog being indexed by search engines

If you're looking for a quick and easy way to add "dummy content" to your blog, check out LoremIpsumDolarSitAmet.com which generated paragraphs of dummy text automatically (including my favorite filler text: Jabberwocky!).

Once you have created your test blog, we can begin changing aspects of the layout.

Step 2: Alter the dimensions of the layout

Now I am assuming you are using the Minima template (it doesn't matter which color), and that the sidebar is on the right-hand side of your layout.

At the moment, the layout is too narrow to accomodate a third column. So we need to alter the dimensions of the layout in order to create more space.

Increase the width of the #outer-wrapper

The #outer-wrapper is the container which holds all of the content in this template, including the header, main posts section and sidebar.

At present, your outer-wrapper will be 660px wide. We will increase this to 940px which will allow us to have three columns of 290px, 290px (the posts) and 300px (for the sidebar), plus margins between to allow for eye-pleasing white-space.

To achieve this, find the following section in the b:skin section of your layout:

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

Change the 660px (highlighted in red) to say 940px instead.

Increase the width of the #main-wrapper

The #main-wrapper is the section which contains your blog posts, blog pager (newer/older posts) and any messages which appear when you perform a search or filter posts by label.

We need to increase this from 410px to 620px, which will allow enough room for posts to display side-by-side in two narrower columns.

To do this, find the following section of code:

#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

And replace 410px with 620px instead.

Make the sidebar wider

Personally, I find a three column newspaper style template to be more pleasing when all three columns are approximately the same width. So we will increase the width of the sidebar from 220px to 300px, which will equal the width of the post columns and their white-space.

So find the following section of code:

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

And replace 220px with 300px instead.

Fix the header and footer widths

If you take a look at your template now, you will notice that the header and footer sections are narrower than the overall width of the blog.

This is because the Minima template uses specific widths for the #header-wrapper and #footer sections of the layout.

To widen these two sections (which complements the new wider design) we need to remove the width statements in the b:skin section of the template. This will then allow the header and footer to stretch to the width of the outer-wrapper and appear harmonious to the design.

Firstly, find the following section in your blog template:

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

And remove the line highlighted in red.

Then locate this section of code:

#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

And again, delete the line in red.

Now preview your template: you should notice that the header and footer sections now stretch to the overall width of the blog.

The blog description may look a little lop-sided with this new setting, like this:

To align the description centrally beneath the blog title, simply find this section of code:

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}

Then delete the line in red. Since the description uses margins and padding, we can do away with the "max-width" property, which ensures this section is properly aligned to the heading above it.

Ensure the #blog-pager spans the width of the main posts section

When displaying posts side-by-side, it is ideal to have an even number of posts displayed. However, it is not always possible to do so. For example, on archive pages there may be an uneven number of posts for any given time period, or a blog search could produce 3, 5 or another uneven number of results.

For this reason, we must ensure the blog pager (which displays links to the home page, newer and older posts) has a fixed width. Otherwise it may appear at the top right of the posts, which is not harmonious to the design.

To apply a fixed width to the blog-pager, locate the following line of code in your template:

#blog-pager {

And immediately after it, add the lines in red:

#blog-pager {
width: 600px;
clear: both;
text-align: center;
}

This will ensure the pager always spans the width of both post columns on non-item pages.

Save your modifications!

At this point, we have made some heavy modifications to the Minima template. So if you have not already done so, save your template now.

Step 3: Ensure the "date-header" appears in the right place!

In the Minima template, the section of code which produces the "date heading" for each post is outside the main "includable" for the blog posts. Since we are making two columns of posts appear on the home page of this template, we need to alter the placement of the date-header code, otherwise the date-headings will appear out of place!

This step is probably the most complicated of the whole tutorial, so take your time and do this carefully :)

For this, we will need to delve into the widget template for the posts section. You need to ensure you have checked the "Expand widget templates" box on the Edit HTML page:

Now search for the following section of code:

<data:adStart/>
<b:loop values='data:posts' var='post'>

<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:post.includeAd'>
<data:adEnd/>
<data:adCode/>
<data:adStart/>
</b:if>
</b:loop>
<data:adEnd/>

This section brings together all elements of your blog posts to display in your active blog pages. The lines I have highlighted in red generate the date-heading for each post. These are the lines which need to be moved to a different place in the template code.

Highlight these three lines in your template, and key CTRL+X (or CMD+X) to temporarily "cut" them from the template. These will be copied to your clipboard so you can paste them in the new location.

Once you have "cut" these three lines, locate this line of code in your template:

<a expr:name='data:post.id'/>

And paste the three "cut" lines immediately after it.

Now preview your blog to ensure the date-headings are visible above each post. If all looks well, you can proceed to save your template.

Step 4: Add conditional CSS to make posts appear side-by-side on non-item pages

We have modified many aspects of our Minima template in preparation for the new posts column on non-item pages. Now we can add some conditional CSS which will make posts appear side-by-side!

This is actually quite easy! All you need to do is copy the following section of code to your clipboard:

<b:if cond="data:blog.pageType != "item"">
<style>
.post {width: 290px; margin-right: 20px; float: left;overflow: hidden;}
</style>
</b:if>

And paste this immediately after the closing </b:skin> tag in your template code. You can then preview your template, and will be able to see the results right away!

Save your template at this point, and view your demonstration blog in your browser. Have a play around with the pages, viewing archives, performing searches and the like. You will see that on non-item pages, the posts appear in narrow columns side-by-side, whereas on item pages, the post will span the width of both columns!

Taking care of images in your newspaper-style template

Your new post columns are slightly narrower than the width for "large" images which you may upload to your posts. This means that large sized images will be "cut off" when displayed on non-item pages.

There are two ways you can work around this:

Only ever post small/medium sized images to your posts
Specify the width of post images on non-item pages.

If you choose the second option, you will need to add a little more CSS to the conditional style we added, just after the closing tag, like this:

<b:if cond='data:blog.pageType != "item"'>
<style>
.post {width: 290px; margin-right: 20px; float: left;overflow: hidden;}.post-body img {width: 280px;}
</style>
</b:if>

This would reduce the width of large images to only 280px on non-item pages, whereas on individual posts, the images will display at full width.

However, any images which would usually be smaller than 280px in width would be stretched to this width.

You could of course choose for images to be even narrower (eg: 100px or 150px) if you plan on serving smaller sized images as well as large ones. Simply change width: 280px to your chosen specification.

Summary

If you would like to apply this technique to a different template, or would simply prefer a summarized version of this template, here is a quick summary of the steps required to make posts appear side-by-side in a Blogger layout:

Prepare your existing template
- Widen the outer-wrapper
- Widen the main posts column
- Ensure the header and footer sections are widened accordingly
- Don't forget to adjust the width of the blog-pager section!
Ensure the date-header code snippet is above the code for the post title, and not seperately coded within the posts loop
Add conditional CSS outside the <b:skin> section of your template, which ensures the posts appear side-by-side only on non-item pages. You may need to experiment with different widths and margins to find the ideal dimensions for your own layout.
Be aware of how images may appear in your new layout and make changes accordingly

I hope this tutorial has explained how to create a newspaper style template in Blogger in which posts appear side-by-side. The methods used here have been tried and tested for modifying the Minima template, though for other Blogger templates you may need to make more adjustments and possibly change background images to accomodate the new dimensions of your three-column layout.

If you have any useful tips to accompany this tutorial, or would simply like to leave a comment, please feel free to leave your message below.