September 25, 2009

Related Posts with Thumbnails for Blogger - New Version by BloggerWidgets

Aneesh of Blogger Widgets has developed a new "Related Posts" script for Blogger which displays thumbnails of images in addition to linked post titles:



In appearance, this Blogger "add-on" is similar to the LinkWithin script. Each section is highlighted in a complementary colour when the mouse hovers over it, and the entire section is clickable, leading to the URL of the "related post" displayed.

September 23, 2009

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

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

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

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

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

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


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

September 18, 2009

Profile Avatars for Blogger Comments - Updated

Displaying avatars beside comments in our blogs has been a long anticipated feature. Today, the Blogger Team announced that this feature is now enabled for Blogger blogs, allowing us to see the profile image or avatar of those leaving comments on our posts:
Today we have extended embedded comments to display profile images next to the comments that your visitors write. Though profile images have been available with the other commenting options, we are happy to bring them to embedded comments as part of the Blogger Birthday feature series (via Blogger Buzz)
However, this feature currently seems available only to those using Blogger's default templates.

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

September 11, 2009

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


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

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

September 10, 2009

Read More/Post Summaries Now Available in Blogger!!

One of Blogger's most requested features has been the ability to summarize our posts on home and non-item pages using some sort of "Read More" function.

I'm thrilled to announce today that the Blogger Team have now enabled this for us to summarize our posts! No more laborious editing of the post HTML or template codes is required to display only summaries on our home pages :)

September 08, 2009

Nexus 5 - A New Blogger Template for Free Download

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

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


September 01, 2009

How to Create a Sitemap with Google Feed Control


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

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

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



Overview

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

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

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





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



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

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

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

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

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

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

Thank you for sharing your script, Abu!

How to create your sitemap with Google Feed Control

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

  1. Generate an API key from Google
  2. Add the template for your sitemap to a post page
  3. Paste in your API key
  4. Paste in the URLs for your label feeds
Let's look at each step in detail.


Generate your API key

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

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

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

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


Paste the template for your sitemap into a post page

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

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

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

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


Paste in your unique API key

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

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


Paste in the URLs and titles for your Label Feed URLS

This step of the tutorial is a little more complex.

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

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

      feedControl.addFeed("http://URL-OF-YOUR-LABEL-FEED?max-results=100", "TITLE-OF-YOUR-LABEL");
In total, I have used 10 lines (for 10 different labels) in the template script. If you require more, simply duplicate this line and add your label feed urls and titles as appropriate.

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

Your label feed URLs will be something like this:

http://your-blog.blogspot.com/feeds/posts/-/LABEL-NAME
or
http://www.yourblog.com/feeds/posts/-/LABEL-NAME
where LABEL-NAME is the name of the label you are using in your blog.

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

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

http://www.bloggerbuster.com/feeds/posts/-/Gadgets?max-results=100
If any of your labels include spaces, you must replace the spaces with %20 instead.

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

http://www.bloggerbuster.com/feeds/posts/-/Customize%20your%20Blogger%20Template
Finally, the URLs of your label feeds are case sensitive. If you use any capital letters in the names of your Blogger labels, you will need to match these in the label feed URLS.

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

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

<style type="text/css">
  /**
   * Suppress everything except for title
   */
  #feedControl .gf-snippet,.gf-author,.gf-spacer,.gf-relativePublishedDate {
    display : none;
  }
</style>
<script type="text/javascript" src="http://www.google.com/jsapi?key=MY-API-KEY"></script>
<script type="text/javascript">
    /*
    *  How to use the Feed Control to grab, parse and display feeds.
    */
   
    google.load("feeds", "1");
   
    function OnLoad() {
      // Create a feed control
      var feedControl = new google.feeds.FeedControl();
   
      // Add blogger label feeds.
      feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Customize%20your%20Blogger%20Template?max-results=100", "Customize your Blogger Template");
      feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Customize%20your%20Blogger%20Template?start-index=101&max-results=100", "Customize your Blogger Template (Part 2)");
      feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Blogger%20News%20and%20Issues?max-results=100", "Blogger News and Issues");
      feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Gadgets?max-results=100", "Gadgets");
      feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Free%20Blogger%20Templates?max-results=100", "Free Blogger Templates");
      feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Resources?max-results=100", "Resources");
      feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Custom%20Domains?max-results=100", "Custom Domains");
      feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Images%20Icons%20and%20Badges?max-results=100", "Images and Icons");
      feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Labels%20Categories%20and%20Tags?max-results=100", "Labels, Categories and Tags");
      feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Monetize%20Your%20Blog?max-results=100", "Monetize Your Blog");
      feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/RSS%20Feeds%20and%20Syndication?max-results=100", "RSS Feeds and Syndication");
      feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/SEO%20and%20Blog%20Traffic?max-results=100", "SEO and Blog Traffic");
      feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Blogger%20Template%20Resources?max-results=100", "Template Resources");
      feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Announcements?max-results=100", "Blogger Buster Announcements");
      feedControl.setNumEntries(-1);
   
      // Draw it.
      feedControl.draw(document.getElementById("content"));
    }
   
    google.setOnLoadCallback(OnLoad);
    </script>
<div id="content">
Loading, please wait...</div>
Once you have finished adding the Label feed URLs and titles to your Sitemap post, you can publish your post and enjoy using your new Blogger sitemap!


Troubleshooting your FeedControl Sitemap

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

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

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

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

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

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

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

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

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

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


      feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Customize%20your%20Blogger%20Template?max-results=100", "Customize your Blogger Template");
      feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Customize%20your%20Blogger%20Template?start-index=101&max-results=100", "Customize your Blogger Template (Part 2)");
If your label includes more than 200 posts, you can add a third variable where the start index is 201, and so on.


Adding extra content, and styling your sitemap

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

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

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

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

  • #feedControl - the ID for the overall sitemap
  • .gf-title - the title of each label
  • .gf-author - the author of each post
  • .gf-relativePublishedDate - the published date displayed beneath each title


Final Thoughts

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

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

Advertise on Blogger Buster

Browse through the Archives

All existing posts are still available to view while I'm working on the site, albeit seen in a much simpler interface. Feel free to browse through the archives to find tutorials, templates and articles to help you build a better blog:

© Blogger Buster 2010 Home | About | Contact | Hire Me | Privacy Policy