Blogger Buster Birthday Celebrations!

Today is a special day for Blogger Buster: it's exactly one year since I wrote the very first post for this blog!

When I look back through my archives of the last twelve months, I'm really thrilled to see how much this blog has grown and how my experience of using Blogger has developed.

So this week, I'd like to publish a special mini-series of posts in celebration of Blogger Buster's first birthday, concluding this Friday with a fabulous competition as a "thank you" gift to you all for encouraging me to write!

For this week, I'm going to take a break from the regular tutorials to provide you with some celebratory content, including:

• Highlights of the past year


• The most popular posts from a year of Blogger Buster


• What to look forward to in the year to come

And...



• 100 (or so) tips for using Blogger more effectively

Then on Friday, I'll be posting details of the first ever Blogger Buster competition :)

There will be some great prizes on offer for the lucky winners. Entry will not only be easy, it will be an interesting experience too...

I'm not going to post too many details just yet, but what I will say is that simply entering this competition will be useful for you, even if you are not an overall winner!

Be sure to subscribe to Blogger Buster to read these posts and receive more news about the competition!

Author and Permalink FeedFlare (proof of original source for SEO)

I have created a FeedFlare unit which can be added to your Feedburner feed. This generates a link to the permanent page for each feed item, using the post author's name and the title of your blog as the link text.

Using this FeedFlare will help Google (and other search engines) determine that your post is the original source of content, and prevent scraper sites from ranking more highly in search engine results.

This FeedFlare can be added to any blog feed (not only those hosted by Blogger) and will generate the author's name, blog title and permanent link from the actual blog feed. Once added as a FeedFlare, no additional set-up is required to present the correct attribution for your posts.

Why you should provide a link back to your original post

Scraper sites are blogs which are made for Adsense. Rather than create original content, such splogs prefer to source content from other high ranking sites and present is as their own.

Where duplicate content is found in search results, the one which appears to be from the original source will rank most highly, while any sites which appear to be duplicating this content will feature much lower down the page (if their result even appears at all!).

By using this FeedFlare, you can add a link to the original source (the 'permalink') for each of your blog posts. This helps Google understand that your article is the original content, as Matt Cutts explains:

So if the syndicated article has a link to the original source of that article, then it is pretty much guaranteed the original home of that article will always have the higher PageRank, compared to all the syndicated copies. And that just makes it that much easier for us to do duplicate content detection and say: "You know what, this is the original article; this is the good one, so go with that." (Source)

Why use a FeedFlare for this?

Blogger enables us to add content to the footer of our blog feeds in the Settings>Site Feed section of our dashboards. We could easily add a link to our home page here, but unfortunately we cannot use this to generate a link to each article published on our sites.

For better rankings in search engines, it's important to link to the original article. This can be achieved using Feedburner's FeedFlare API, along with attribution to the post author (great for group blogs) and the title of the publishing site.

How to add this FeedFlare to your Feedburner Feed

Adding the Author and Permalink Feedflare to your syndicated content is simply a matter of copying and pasting one line of code!

Log in to your Feedburner account and access the dashboard for your chosen blog. Click on the "Optimize" tab, then on the "FeedFlare" link in the left sidebar.

On this page, you will notice a section where you can enter a new FeedFlare URL:

In this box, paste the following URL:

http://bloggerbuster.com/author-and-permalink-blogger.xml

This is the location where the FeedFlare XML file is hosted on my server.

Finally, click on the "Add new FeedFlare" button, then you will see this has been added as an additional FeedFlare option which you can add beneath your posts.

All you need to do now is tick the box left of the "Blog Permalink" title, move the position as required and save your preferences.

Then as soon as your Feedburner feed is updated, you will be able to see this link appear beneath each entry of your syndicated feeds!

You can see this FeedFlare in action now by taking a look at the Blogger Buster feed (opens in a new page).

I hope this FeedFlare will be useful for you. Please feel free to let me know what you think about this idea (including any suggestions for improvement) by leaving your comments below.

Display Elements only on Home, Item or Archive Pages in Blogger

When designing your Blogger template, you may prefer certain elements to appear only on certain types of pages.

If you would prefer certain widgets or elements of your design to appear on the home page, but not on individual post pages, for example, you can use the "b:if cond='data:blog.pageType'" function to control this.

In this tutorial, I'll explain how you can easily control page elements to display (or not) on certain types of pages in your Blogger powered blog.

To display elements of your layout on certain page types, you will need to edit your blog's template code.

Be sure to make a full backup of your existing template before attempting to use the information in this tutorial!

To make a backup of your template, go to the Edit HTML page in the Layout section of your blog's dashboard. Then simply click on the "Download full template" link near the top of the page.

This will enable you to save your template as an XML file to your computer, which you can use to restore your template if you accidentally mess things up!

How the layout tags work

The <b:if> function tells Blogger we are setting conditions for the following section of content.

To control whether elements are displayed for a particular page type (ie: index, archive or item pages) we add the data:blog.pageType tag to the b:if statement, and complete this by stating which type of page where we would like this content to be displayed.

After this tag, we add the code or content to be displayed. Then finally we close of the b:if conditional statement with a </b:if> tag.

Trust me, this is not as complicated as it sounds! Let me give you an example.

If I wanted to display a "Welcome to my blog" message only on the home page, I could use the following section of code:

<b:if cond='data:page.type == &quot;index&quot;'>
Welcome to my blog!
</b:if>

This code roughly translates as:

If this is the home page, display my "Welcome to my blog" message.
If this isn't the home page, don;t display anything here!

When we can translate the code into something more understandable, it becomes easier for us to use!

The three different page types

In the example above, I wanted to display my "Welcome" message on the home (or index) page.

In total, there are three page types for which you can use a similar statement:

• index (the home page)


• archives (to be displayed when readers view your archive pages)


• item (the individual post page)

We can replace the "index" section in the above example with either "archives" or "item" instead if we prefer to display only on archive or item pages.

To clarify:

If I want to display my welcome message on archive pages, I would use this section of code:

<b:if cond='data:page.type == &quot;archive&quot;'>
Welcome to my blog!
</b:if>

If I want to display this only on item pages, I would use this code instead:

<b:if cond='data:page.type == &quot;item&quot;'>
Welcome to my blog!
</b:if>

In your own blogs, of course, you may not wish to use this function to display a welcome message! In place of "welcome to my blog", you can insert any type of HTML code you like, such as an image, a hyperlink, and even an entire widget as we will explore below.

You can also wrap existing template code inside the b:if statements: simply type the first line above the section of content, and type the closing </b:if> tag directly below.

How to display widgets on certain page types

When we come to look at how widgets can be displayed on certain page types, the method is slightly more complicated (but not much!).

We cannot wrap an entire widget section in the b:if tags:

Instead, we must check the "expand widget templates" box near the top of the screen, and place the b:if tags just inside the b:includable tags which appear in the expanded widget template code.

Here is a diagram which displays where to add the two b:if lines to make a widget display only on the home page (click on the image for a larger version):

To clarify:

Place the initial <b:if cond='data:blog.pageType == &quot;index&quot;> tag just after the opening <b:includable id='main'> tag.

Place the closing </b:if> tag just before the closing </b:includable> tag.

Note: if you paste the sections of conditional code in the wrong place, you will receive an error message and cannot save your modified template code.

The "if not" statement

Let's say I wanted to display my "Welcome to this blog" message on all page types except for post pages. It would be much easier to say "if this is not an item page, display my message" than to use two seperate statements for archive and index pages.

For this, we can use (what I call) the "if NOT" tags.

In the examples above, you will notice the page type statement contains two "equals" symbols before the page type, like this:

<b:if cond='data:page.type == &quot;item&quot;'>

The doubling of the equals symbols basically tells Blogger:

If this page IS this particular type of page, display the following code.

To tell Blogger to display a section if the page is NOT a particular page type (for example, if the page is NOT a post page), we can substitute the first equals sign with an apostrophe, like this:

<b:if cond='data:page.type != &quot;item&quot;'>

The closing </b:if> tag should remain the same.

To clarify:

In the examples above,

== "[page-type]" (with two equals signs)

This means "If this IS the specified page type, display the content"

!= "[page-type]" (with an exclamation mark followed by one equals sign)

This means "If this is NOT the specified page type, display the content.

Note: these examples are just a part of the complete <b:if> template tags; for the entire conditional page type function to work, you will need to use the complete tags, as referenced above.

There are some limitations...

Unfortunately, there are some limitations when using page conditional tags in Blogger templates which I haven't yet been able to work around:

The "index" page type also functions for search pages and label pages.

Blogger's help center does state that one of the page types is "main", which refers to the home page.

However, using "main" in the pageType statement has never worked for me. Instead, we can use the "index" page type (not referenced in Blogger's help pages for some strange reason...), though this will also affect the search pages, which includes label pages too.

We cannot display elements only on certain page URLS

A few readers have asked if it is possible to display sidebar widgets only on certain post pages (which would be rendered by their unique URL).

I have tried many combinations of template tags, HTML and JavaScript code to accomplish this, but have had no success with this so far.

I have a feeling that Blogger may soon introduce password protected pages (since this is on the current wish list for user voting), though until such template tags are introduced, we are unable to display template elements for certain post URLs.

If anyone has successfully coded either of these two functions, please do get in touch to let me know how it may be achieved in Blogger!

Conclusions

Using the conditional page type function in our templates, we can choose to display widgets and other blog content only on index, archive and item pages. We can also choose not to display specified content on these page types.

I hope this tutorial has offered a good overview of how the b:if and data:page.type template tags can be used in your Blogger templates. Please let me know if this has been useful for you, or if there is anything you would like explained in more detail by leaving your comments below.

Reader Poll: What do you enjoy most from Blogger Buster?

To help me improve the general quality and type of content produced here, I would love to know which types of posts you enjoy reading the most?

If you have a few moments to spare, please take part in the reader poll below or leave a comment to let me know what you enjoy most about Blogger Buster.

You can also suggest (or vote for) particular articles you would like to read by using the Skribit widget in the sidebar.

I appreciate all feedback you can offer about the general content of the site, so please feel free to let me know what you think and help me make Blogger Buster a better blog for you!

Blog Rankings: Is Wikio More Accurate than Technorati?

Technorati is the world's most popular blog aggregation and ranking system. Selected as one of Time Magazines 25 sites we can't live without, it is probably the first site which comes to mind when referencing how well our blogs compare with others.

Wikio on the other hand is a relatively new site. A European based news and blog aggregator, Wikio began ranking the top 300 blogs late last year, and currently tracks around 37,000 blogs (compared to the millions tracked by Technorati).

There are significant differences in the ways Technorati and Wikio compile their rankings and this makes me wonder: which of these two sites rank blogs more accurately?

I discovered Wikio's Top Blogs lists quite recently while researching the most popular Blogger powered blogs. While many of the sites featured in the overall list are familiar, I was intrigued to see that Wikio also ranks blogs according to category, such as Technology, Food and Wine, Politics and Music.

The concept I find most interesting about Wikio's blog ranking system is that only links within blog posts contribute towards a blog's authority and rank.

Technorati offers two forms of blog ranking:

• Authority: This is the number of unique blogs which link back to your blog (the higher your blog's authority, the better!). If the same blog links to yours ten times, only the most recent link will count towards your blog's authority.


• Rank: The number one ranked blog is the one which has generated the most unique links (the greatest authority) over the past six months. Your blog rank may not be unique: for example, if your Technorati rank is 10,043 there are 10,043 ranks between you and the top ranking blog, and other blogs may share the same authority as yours. The lower the number of your Technorati rank, the closer you are to the top.

With Technorati, any form of link can pass "link love" to your blog: this means links in posts, links in blogrolls and any other links present in the blog template.

Because Technorati tracks all types of "blog reactions", it's ranking system can easily be gamed.

Technorati's Flawed Algorithm

According to Patrick Altoft, there are four major methods of manipulating Technorati rank:

1. Create a popular plugin


2. Exchange links


3. Create popular blogging software


4. Design a popular blog theme

Each of these methods generates "artificial" backlinks to the author's blog: rather than be editorial (deliberately created by the blog editor to reference another's writings, authority or newsworthiness), these links may be present in the blog layout or blogroll, but not within blog posts.

Blogs which have used any of these methods to generate backlinks or awareness of their product are then manually removed from the Technorati Top 100 list.

Jackbook, for example, should rank at number 43 in the top 100 list:

But when we look where Jackbook.com should feature in the top 100 list, Jacky's listing is nowhere to be seen...

Other sites to be banned from the Top 100 list include Blogger-Templates, Binary Moon and even John Chow!

Does this mean Wikio's algorithm is a more reliable method of ranking blogs?

Wikio's Top Blogs List is Not Without its Faults...

Wikio ranks according to the number of incoming links from other blogs which are found within articles. Using this system is a much more reliable method of determining authority as such links are rarely bought, and are not generated by plugins, widgets and templates.

Although I prefer Wikio's system of ranking, I think there are still a few drawbacks to this system:

• Only a fraction of the actual number of blogs are tracked, meaning those which are included in Wikio's database may rank much more highly than they relatively should.


• Rankings are only updated once per month, whereas Technorati updates rankings several times per day.


• Wikio is a much younger system, and has yet to achieve the popularity (and recognition) held by Technorati.

Wikio's categorical blog rankings do serve the general blogosphere more accurately than Technorati (which seems rather biased towards technology based sites), but as there are few categories (and fewer blogs listed in the database), there is still much which can be improved upon.

What do you think?

Have you explored Wikio to see which blogs rank highly in your chosen niche? How do you think this system compares to Technorati as a means of ranking blogs?

I'd love to know your opinions on which system ranks blogs more fairly, if indeed you think that blogs should be ranked at all!

Please share your opinions by leaving a comment below.

Top Tips for a Faster Loading Blog

Blog readers can be quite impatient. When accessing your blog through search results, Stumbleupon or links to your blog, it is ideal that your entire blog page should load within a few seconds, otherwise such visitors may move on to another site instead.

The question, "How can I make my blog load more quickly?" is one which is asked often by readers of this site. So in this post, I'll offer a few simple tips and tricks you could try which should ensure you have a faster loading blog.

While you may think your blog loads quickly when viewed on your own computer, you should be aware that your visitors may be using different (and possibly slower) connections to access your pages.

The aim of a fast-loading blog is to ensure your pages load in a reasonable time for all connection types.

Those using dial-up will undoubtedly be used to slower page loading times than visitors who have DSL access; however you must also consider that search engine spiders need to access your site and can index pages much more quickly when a site is optimized for speed.

Find out how quickly your site loads

One of the best tools I have found for understanding page loading time is Web Optimization's web page speed report.

This tool is very easy to use: simply type your blog's home page URL into the text box, and hit the "Submit Query" button:

It does take a few minutes to parse the information from your website, though once the page has loaded, you will see loads of useful information about your site.

Now I admit that the information in this page can seem quite intimidating! This service is generally aimed at experienced webmasters who understand the technical details of HTTP requests, external objects and so on. The section we are most interested in is the "Analysis and Recommendations" which will look something like this:

At a glance, we can see which areas of our blogs require some tweaking in order to load more quickly:

• The sections highlighted in green are the areas of the site which have optimal performance, and do not need to be changed.


• The sections highlighted in yellow are not critical, but could be optimized for better loading times.


• Those sections highlighted in red demonstrate areas which really slow down page loading time, and are top of the list for immediate optimization!

If all of these sections display in green and yellow when using this tool, you have little to worry about in regard to your page loading time. However, if you see many red sections you are advised to make some changes to your blog, or potentially lose readers due to excessive loading times!

Ideally, we need to work towards a page loading time of under 8 seconds using a 56k dial-up connection (page loading times will be much faster for DSL and T1 connections).

To achieve this optimal loading time, we need to try to follow these guidelines:

• The overall size of the page should not exceed 80kb


• Use as few external JavaScripts as possible


• Try not to display many images on each page, both in your posts and blog template


• Aim for the smallest file size possible for your images


• Reduce the size of your CSS (style) section wherever possible!


• Make few HTTP requests (in other words, aim to have scripts, images and any other external elements on as few servers as you can!)

This may seem like a lot of work, and if you are new to blogging or web design, it may also seem bewildering! So rather than focus on each factor in great technical detail, I'm going to suggest 6 useful methods you could use to reduce your blog loading time dramatically.

1. Remove any widgets/scripts you don't really need

Unofficial Blogger widgets and JavaScripts can add some great interactive elements to your layout. Unfortunately, each different widget/script you use will need to be referenced from a different server (known as HTTP requests), and will slow down page loading time.

So take a look at all of the widgets and scripts you use in your Blogger layout:

• Do you really need to have each and every single widget?


• Does each widget offer some value to your readers?


• Would your readers really notice (and complain) if you removed a few of these widgets/scripts from your layout?

If you answered "no" to these questions in regard to some of the scripts you use, you should consider removing them from your template altogether.

I know that widgets can help your blog appear more pretty, but consider the impact on your page loading time: you could be losing precious readers if these slow your page down!

2. Try to reduce the amount of images you use in your layout

Loading externally hosted images is another high contribution to your page loading time. So if you use a lot of image-based buttons; feature many image widgets in your sidebar, or use a template which is heavily image based, try cutting down on these to see if this may help your blog load more quickly.

Bonus Tip!

If you really don't want to reduce the number of images you use in your template, you could host these with Blogger instead of an external image host.

To do this, create a new blog post, and upload all of the images you would like to use to this post. These images will then be hosted on one of Blogger's image servers.

Preview your post, and right click on each of these images. You should be able to copy the image location, which you can use to replace the image URLs in your template code.

Using this trick reduces the number of HTTP requests for your images: all of the images you use will be hosted by Blogger, rather than a completely different host. This can have a dramatic impact on your page loading time, especially as Blogger's servers are hosted by Google (which in theory, should be one of the most stable hosts in the world...)

3. Reduce the file size of your images

Another method of reducing the impact of images on page load time is to reduce the file size (not actual size) of all images used (whether in posts or layout).

Many image manipulation programs allow you to optimize images for the web, which reduces the overall file size (in bytes and kilobytes) of the image.

You may also like to try using an online image optimizer to reduce the size of your images. There may be some loss of quality (especially for larger images) but on the other hand, your overall page loading time will be reduced.

4. Simplify your CSS

The CSS section of your Blogger template takes up a lot of the overall file size of your blog pages. This is because each element of your <b:skin> (or <style> for those using classic Blogger templates) is featured on a separate line. There is a lot of unnecessary "white space" (page breaks, indentations and spaces) and possibly HTML comments.

By eliminating unnecessary white space and HTML comments, you can reduce the overall size of your blog pages. However, doing this can make it difficult to edit the style section afterwards!

If you would like to improve page loading time by optimizing the style section of your Blogger template, here is the easiest method you could use:

1. Copy all of the code between the <b:skin> and </b:skin> tags in your blog's HTML code (for classic template users, this is the section between the <style> and </style> tags).


2. In a new browser window or tab, visit the CSS Optimizer website, and paste your style code into the "direct input" box.


3. Click the "Optimize" button (there is no need to check the box which says "do not remove line breaks").


4. The next page will offer your optimized style code inside a text box, along with data of how much this has been compressed.
   
   
   
   Copy all of this code to your clipboard.


5. Replace all of the existing code in your Blogger template (between the <b:skin> or <style> tags with this optimized code.


6. Preview your template to ensure your template displays properly with these modifications, and finally save your template.

5. Optimize the placement of scripts/widgets in your template

There will undoubtedly be some externally hosted widgets and JavaScript's you would like to keep in your layout. To improve the impact these have on blog loading time, you can move these towards the bottom of your template code.

If you use a widgetized layout, move such widgets to your right-hand sidebar (or possibly even the footer section) of your blog. This will ensure that your blog content will appear before these scripts begin to load, so visitors can appreciate your posts while the page continues loading.

6. Reduce the number of posts which appear on your front page

Each post which appears on your home page will add to the overall file size and loading time of your blog.

Even if you only display summaries of your posts on the home page, the entire HTML code for your posts will be visible in the source code. This is because the post summary hack hides the main part of the post using CSS.

When choosing how many posts to display on the home page, you should consider the general length and style of your blog posts.

If you write around 5-600 words for each post, using few or small images (and infrequent multimedia), then 5-7 posts would be optimal to display on your home page.

If you write much longer posts (as I do here at Blogger Buster); use many images, or video in posts, any more than 3 or 4 posts would slow down the loading time of your blog.

On the other end of the scale, if your posts are generally short with few (if any) images, you could probably display 10 or more without affecting page load time.

To change the number of posts which can be displayed on your blog's home page, go to Settings>Formatting while logged in to your Blogger dashboard. The first option enables you to choose how many posts are displayed on the front page:

Overview

When considering how to reduce blog loading time, the main thing to consider is reducing the amount of code and files which are used in your blog's mark-up.

Removing (or optimizing) as much unnecessary JavaScript and images as you are able; reducing the number of posts displayed on the main pages, and optimizing the style section of your blog's template code will certainly help your blog to load more quickly. This is beneficial for new visitors who may become impatient while waiting for large pages to load, and is also a key aspect of optimizing your blog for search engines (as spiders are able to crawl your content more quickly.

A word of caution...

I must tell you that Blogger Buster (in it's current form) is NOT a good example of optimal blog loading time!

The template I use currently requires lots of JavaScript and images; in this instance I have forsaken page loading time for aesthetic appeal...

In researching blog loading time and methods of optimization for this post, I have learned the value of a fast loading blog, and also many methods I could use to ensure this blog loads much more quickly.

Over these next few weeks, I will "practice what I preach" by gradually toning down the use of scripts and images. A faster loading blog will be of benefit to us all!

What do you think?

In this article, I've tried to cover the most significant changes you can make to optimize the loading time of your Blogger blog. Have you used other methods to speed up your own blog's loading time? If so, which methods did you use to achieve this?

Feel free to leave your own ideas and comments by leaving a message below.

Complete List of Blogger Widgets

Here is a list of useful widgets which you can install to your Blogger layout directly from this site:

• A Customized Twitter Widget
  
  Installing this widget will add a customized Twitter updates widget to your Blogger layout.


• Popular Posts (most commented) widget
  
  This widget will list the ten most popular posts from your blog, based on the number of comments.


• Top Commenters Widget
  
  Displays a list of the most frequent commenters on your blog (see also how to filter your name from the top commenters list).


• A New Year Banner for your blog
  
  This widget will install a "New Year" banner ribbon to the top right hand corner of your blog.


• A Christmas Banner for your blog
  
  This widget will install a Christmas banner to the top right corner of your blog.


• Recent Comments
  
  Displays a list of the most recent comments made to your blog posts. May be customized to display a snippet of the comment.


• A "Time of Day" Image Greeting
  
  Displays a different image greeting depending on the time of day.


• Digital Clock Widget
  
  Use this to add a digital clock to your blog layout.


• Realtime Clock and Date Widget
  
  Add a realtime clock and date widget to your Blogger layout with this easy to install widget.


• A Simple Search Widget
  
  This widget will add a simple search form to your layout which readers can use to search through your posts.

This list will be updated with new widgets as they are created.

To discover even more widgets, scripts and add-ons available to Blogger users, have a read through the Widgets and Add-ons section of this site.

If you have any ideas for other useful widgets, please let me know by leaving a comment below, or adding this suggestion to the Skribit widget (bottom of the sidebar) for others to vote on too.