Wednesday, July 1, 2009

Create Tag Cloud For Your Blog

You may have seen "tag clouds" in other blogs which feature keywords from the blog posts in a cloud format. These are different to "label clouds" which are constructed of the labels you use for your Blogger posts. You can see an example of a "tag cloud" I constructed for Blogger Buster here:

I created this tag cloud for free over at ZoomClouds, which allows you to customise the size, colour scheme and included tags of your cloud. To create a tag cloud for your own blog, here's what you'll need to do:

1. Head on over to ZoomClouds and create your free account. This will allow you to use the tag cloud service and store your designs on site.
2. Now it's time to create your first tag cloud! Sign in to your ZoomClouds account and click on "create cloud|" near the top of the page.
3. Give your cloud a name and description, and submit your RSS or Atom feed. For Bloggers this will either be "/feeds/posts/default?alt=rss" or /atom.xml" at the end of your blog address (eg: http://yourblog.blogspot.com/feeds/posts/default?alt=rss).
4. Select how many days worth of content you want to include in your cloud. The maximum will depend on how many posts are included in your feed, so you may want to consider changing your feed settings if you want to include all of your posts in the tag cloud.
5. Click "create cloud" to create your cloud based on these settings.
6. You can then view your cloud with the default ZoomClouds design to see how it can look. To change the appearance of your cloud, click on "design" near the top of the screen and choose your settings, including border colour, fonts and more. You can save multiple templates of the same cloud here too.
7. To get the code for your cloud, click on "design" and scroll down the page a little until you see the code box. Select all of the code (Ctrl+A) and copy to your clipboard. You can then insert this into your blog template where you would like it to be displayed.
8. If there are tags in your cloud which you would prefer to be left out, you can choose this by clicking on "Filters" near the top of your ZoomClouds dashboard and adding each unwanted tag in the box supplied. Similarly, you can also add tags that you want to be included in the cloud which aren't yet featured.

Tag clouds could be used instead of label tags in your blog, or indeed as well as labels, since they are a reflection of your post content, rather than the labels you give to your posts. Example usage would be in a sidebar widget, though you may also want to consider featuring one at the top of your posts (see this post for a tutorial), or even in a blog post as I have done here!

Technorati Tags: | | | |

Change the Title Tags for your Blog

This new tag is already installed for new blogs (or if you change your existing template to one of Blogger's default ones).

However, if you have customized your template or uploaded a third party template, you will need to change the original <data:blog.pageTitle/> to the new <data:blog.pageName/> tag for this change to take effect.

But don't worry: this is REALLY easy! Here's what you have to do:

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

  2. Search for this tag: <data:blog.pageTitle/>

  3. Replace this tag with the following:
    <b:if cond='data:blog.pageType == &quot;index&quot;'>

    <title><data:blog.title/></title>

    <b:else/>


    <title><data:blog.pageName/></title>

    </b:if>

  4. Save your template! (See, this is an easy hack!)

Once you've changed this tag, you'll see that on post pages, the default [blog name] page title format for your post titles in the browser window will be replaced solely by your post title instead.

This will increase the chances of your posts being picked up in search engine results for keywords which appear in your post titles (and can ultimately help draw more targeted traffic to your blog.

I hope this little trick will be useful to you all! And for the Blogger team (if you're reading this): Thank you!


Contact



Your Name :
Your Email :
Subject :
Message :
Image (case-sensitive):