Free SEO stats display box - my birthday gift to you!

I discovered a free online tool which allows you to display a box like this in your blog, featuring Pagerank, Alexa, MSN, users online and many more SEO stats!

To create your own, simply visit this page on MyPagerank.net, input your website details and choose the stats you wish to display. You will then be given the Javascript code to place in an HTML/Javascript widget in your blog, as well as a preview of the widget.

As you can deduce from the title, today is my birthday. While I'd hoped to post something great for you all in honor of this day, I have to admit, this wasn't the gift I had hoped to post on site today... I had actually hoped to have the new site template ready instead, though unfortunately I came across too many setbacks and it's still not ready yet :(

The good news is that the extra time I'm taking over the design will make it even better once the whole thing is done! So far, I've created a whole new Web 2.0 style design which should load faster and be much easier to use. Tools and templates will be much easier to find than they are now, along ease of subscription, inline comments and a lack of unnecessary distractions from the content.

As soon as I've ironed out most of the kinks, I will post a preview of the new template for you all to see. In the meantime, I hope you enjoy this free SEO statistics widget instead.

Technorati Tags: happy+birthday | bloggerbuster | seo | stats | display | widget | pagerank+display | alexa+rank

A new style of AddThis widget now available

I'm sure you all know how useful I find the AddThis social bookmarking widget by now. Well, the makers have created a new version which features a drop-down menu when your mouse hovers over it. Try it here is you like:

To install this new version of the AddThis button, you will need to have an account with AddThis as the Javascript includes your unique username in order to function properly. Of course, the service is still free to use though!

This new style of AddThis button can be installed by visiting this page in the AddThis blog. Simply log in using your username and password (or create a free account if you don't already have one set up). On the next page you can choose your button style: this new version is lower down the page. Don't worry that it currently says "TypePad and Blogger widgets coming soon" as you inly need to copy the Javascript widget into your blog template, which should be present in the iframe below.

If you already have an AddThis button in your template, simply paste the new code over the top and save your template. If you do not already feature an AddThis button, you should take the following steps:

1. Go to Template>Edit HTML and ensure the "expand widget templates" box is ticked.


2. Find this section in your blog template:
   

   <p><data:post.body/></p>

   
   
3. Paste the AddThis code right after this line, save your template and view your new social bookmarking feature!

As Polyname suggests, it may be nescessary to wrap your AddThis code in <div> tags in order for it to properly display in your template, though for most templates I've found it works fine without these extra tags.

I find this new style to be more user friendly as you are shown the sites which could be used to bookmark the page rather than being taken to a seperate page to do your choosing. The only downside is that I can't include this widget in new templates due to the necessity of user ID in the code.

Thanks to Polyname for the email telling me about this great new style! I do appreciate the hint.

Technorati Tags: addthis | social+bookmarks | button | widget | add+on

Download the "Shinobi" template

Here is a new template I've been working on for a while now: the "Shinobi" (Ninja) template. This template features a unique "Web 2.0" style theme including inline comments. Take a look at the screenshot or preview the blog in action on the Shinobi Template demonstration blog. Read on for more details and to download the XML template.

The Shinobi template features:

• Unique theme with rounded corners and ninja-style header.


• Inline comments on post pages, so readers can leave their comments without having to leave the page.


• Complementary label cloud.

You can download the XML template using the link below:

Download the Shinobi Blogger Template (Zip File)

Included in the zip file are both the XML template and a help file with details of how the template can be installed and configured. If you would also like to copy over your widgets from your existing template, please refer to this post which explains the whole process.

All images used in this template are hosted by Blogger Buster, so you do not need to upload them to your own servers. Feel free to modify this template as you wish. However, I do ask that the credits within the template itself remain intact. Please do not redistribute this template without a link back to the original author!

As always, your comments and opinions are much appreciated!

Technorati Tags: blogger+template | templates | xml | layouts | web+2.0

Making your links more interactive with Snap-Shots

While researching design techniques for new templates, I discovered Snap-Shots: a way of making your links interactive by displaying previews of websites, video, RSS feeds and audio as the readers mouse hovers over them. Although I've seen this on other sites before, I never realised this service was free to use, and also that it barely impacts page loading time at all.

Here is a preview of what Snap-Shots can do for your blog. Read on if you'd like to know more!

Snap-Shots creates a pop-up preview of whatever content your link points to. You can use this to display previews of websites, videos, recent RSS entries and even audio if that is what your link points to.

Installation is really easy, especially for Blogger blogs. The process can be summarized in four steps:

1. Head on over to Snap-Shots and click on the "get started" link.


2. Choose your color scheme, pop-up size and upload your logo if you would like this to be displayed too. You can also set advanced options, such as wether to only show a preview, show internal links, etc.


3. Register your details (website URL and email address).


4. Choose to install Snap-Shots as a widget in your blog using the widget installer.

And that's basically it! From this point forward, all external links in your blog can feature previews when your readers hover their mouse over the links!.

Snap-Shots is one of the features I am working into the new look Blogger Buster template. However, with the default installation I discovered a few things I wanted to tweak, which I anticipate other Bloggerrs may find slightly annoying too.

Most notably, I didn't want all external links to feature previews, especially links to my feeds, trackbacks and comments. By default, Snap-Shots will be linked to all links in your blog after installation. To prevent previews for certain links or blocks of content, you will need to add the class "snap_noshots" to these areas.

For individual links, you can add the class like this: <a href="yoururl" class="snap_noshots">Link text here</a>

To prevent links for a whole div (eg: your sidebar), you can add it like this: <div id='your_element_id' class='snap_noshots'>

If your link or element already contains a class, you can simply add this as another class by enclosing the "snap_noshots" within the same quotation marks, like this:

<a href="your_url" class="link_class snap_noshots">link text here</a>

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

Another of my preferences was to display the previews only when the reader hovers over the snapshot icon (the speech-bubble), rather than the whole of the link text. I feel this gives more preference as to wether previews are displayed, and also prevents frustration at continuous image pop-ups when they are not required. This can be enabled in the settings for Snap-Shot itself: simply edit your preferences and choose "Snap-Shots triggered by the icon only". Simple as that!

With these tweaks in place, I'm quite happy with the result in my test blog and will be implementing Snap-Shots into the all-new Blogger Buster site as I feel this will enhance your reading experience since you'll be able to preview sites and templates linked to in my posts without having to leave the page you're reading to do so!.

Snap-Shots is also very easy to uninstall if you decide you'd orefer not to use it any more: just delete the widget from your blog (which contains the script call to display the previews) and the pop-ups will completely disappear.

Please let me know what you think of this free service by leaving your comments and opinions below.

Technorati Tags: links | interactive | snap+shots | template | modifications

Create rounded corners without using external images

Rounded corners are one of the biggest web design trends. Usually rounded corners are created using images as backgrounds for the section we want to appear rounded (such as those used in the Rounders template or created using Cornershop). However, it is also possible to create rounded corners using only CSS styling!

Spiffy corners is a site which can generate the code for you, based on the foreground and background colors you specify. Then all you need to do is add the code to your blog template, and your rounded corners will appear in your sidebar, your main posts section, or indeed anywhere you wish in your blog!

The rounded corners wizard is really simple to use: all you need to do is specify the colors you wish to use and a preview image is generated for you. You can then choose the amount of "roundness" you require and the wizaed will generate two sets of code for you to use: the CSS style code, and the html code to wrap around your blog elements. Then all you need to do is copy and paste these codes into your blog template.

For Bloggers, this is very advantageous, since this dismisses the need for externally hosted images to create the rounded corner effect. Also, this helps speed up page loading time as the corners are created in the style rather than by calling images from the server.

I will certainly be using this technique in my new design for the site, and heartily recommend this as an alternative for those who wish to design Web 2.0 style corners for their blog templates. Take a look at the Spiffy Corners site and let me know what you think too.

Technorati Tags: rounded+corners | web+design | blog+templates | web+2.0

Free blog icon set download

Here are three sets of blog icons I designed while working on the new template for this site. There are 10 icons in all in red, blue and green color schemes, each against a transparent background for use in any color scheme.

You can download these icons using the link below:

Download blog icons set

These icons are all in .gif format to ensure that the transparency is compatible across all major browsers. Feel free to use them in your templates and websites, or to modify them as you wish. However, please do not redistribute these icons without also including the license document in the file.

Please feel free to leave your comments and suggestions below.

Technorati Tags: blog+icons | images | icon+set | template | design

Will Google PageRank be updated soon?

If you use the Google Toolbar, you may well be familiar with Google PageRank as you can see the rank of any site in your toolbar. The toolbar PageRank was usually updated every three months, but we have not yet seen an update since April-almost five months ago now!

For many newer sites, this has been rather disappointing (here at Blogger Buster, for example, we still have a PageRank of 0, despite efforts to improve this). So why is this update taking so long, and when can we expect to see an update?

PageRank is the status given to sites by Google which can help web-users understand their importance. Rank is determined on a scale of 0-10 with a rank of ten being attained only by sites such as Google Yahoo and MSN. IOt has long been understood that if you can acquire backlinks from high ranking sites, your own site's PR will in turn be improved, since effectively the higher PR site will be "endorsing" the content of your own.

However, many services have taken this too far, offering paid backlinks which have no real relevance to the quality of a site's content. Of course, Google do not like this as it means bad quality (and even spam) websites could achieve a much higher PageRank than they really deserve.

So, for this PageRank update, Google seem to be making changes to the algorythms used in deciding PageRank in order to be fair to the sites which deserve it, and lowering the PR of sites which use paid links or attempt to cheat the system.

Here's the good news

Although we are only able to see changes in PageRank using the Google Toolbar (or sites such as the BB Tools PR Checker), PageRank is updated very frequently indeed. This is altered in Googles internal PageRank system, and can be reflected in the search results pages when doing a Google search.

Sites which previously had a PR of "n/a" because they were so new may now have a PR of 0 instead, which usually means that they will be given a more appropriate PageRank in an imminent update.

The general consensus of sites I have read when researching this post is that the next PR update will happen rather soon, though it's anyone's guess when a subsequent update will happen.

In the long run, I'm sure that the updates to the existing PR allocation system will work better for us all: quality content-driven sites will be awarded a higher PageRank than those which don't deserve a second glance!

For those of you who are (like me) impatient to see a PageRank update, I found a useful PageRank prediction tool over at iwebtool.com. This uses the number of backlinks to your site to provide a prediction of your PageRank for the next Google update. Unlike other similar tools, this one does not require that you already have a PageRank to offer a prediction, and also offers a percentage of accuracy for the prediction. Blogger Buster, for example, has been predicted to have a PageRank of 3-4 with a percentage accuracy of 86%.

Have a try with your own blog URLs and let me know what you think. I will of course post when Google do finally update PageRank, and will continue to twiddle my thumbs until then!

Technorati Tags: pagerank | google | site | rank | blog | authority

Learn about Web 2.0 in five minutes

Here is a great video I found over at Deziner Folio which explains Web 2.0 in a way we can all understand:

I actually found this while researching Web 2.0 design, and was so impressed by this great explanation of Web 2.0 I thought I'd share it with you all. For me, this video embodies everything I love about the web. And when you consider that blogging is a part of this online revolution, it can be quite inspirational too!

Please let me know what you think too by leaving your comments below.

Technorati Tags: web+2.0 | video | deziner+folio | blogging | inspiration

How I copy widgets from one template to another

When you choose a new default Blogger template, all of your widgets are copied over to the new template. However, if you try to upload a customized template (such as the ones featured here), you will probably get a message asking if you want to delete most of your existing widgets. I am often asked "how can I copy my widgets over to a new template?", so in this tutorial I will share the method I use to do this quickly and painlessly.

Your blog widgets are saved in your Blogger account, rather than in the actual template of the blog. The widgets are called to your blog by anchors within the template which look like this:

<b:widget id='HTML1' locked='false' title='My Widget Title' type='HTML'/>

As you can see in this example, each widget in your blog is given a unique identity (in this case, "HTML1") and a title, which is the same as the title you provide when you create the widget.

If you upload a template to your blog which contains the same widget identifiers, then the widgets will be called from your account by the template, and will display in your blog as normal. On the other hand, if you upload a template which does not contain the same widget identifiers, you will be prompted to delete widgets from your account.

So to ensure you can maintain your widgets from your existing blog template in your new blog template, we must copy these widgets over to the new template before uploading this to your blog.

The method I use to accomplish this is by using a second "test blog". I have explained all about creating and using a test blog in this post. If you don't already have a test blog available to use, you will need to create one temporarily to help you copy your widget identifiers over to your new template. Once you have created your test blog, here is the method for copying over your widgets from your old template to your new one:

1. Log in to your Blogger dashboard.


2. You will need to be able to edit both your existing blog template and your test blog template, so it's advisable to have two browser windows (or tabs) open at the same time. You can easily do this by keying CTRL+N to bring up a new page. So for the moment your Blogger dashboard will be available in both browser windows.


3. Now, in the first browser window, select your test blog and go to Template>Edit HTML. Click on the "Upload New Template" link near the top of the page and upload the new XML template you wish to adapt for your main blog. Once this template has uploaded, deselect the "expand widget templates" box.


4. In the second browser window, select your existing blog template and again go to Template>Edit HTML. Do NOT check the "expand widget templates box", as this will make things much easier for you. Now, locate the widget content identifiers in your template sidebar. Most likely, the section will look something like this:
   
   The code featured inside the red box displays the identifying code for your widgets, which calls the widgets to appear in your blog. You need to copy all of these <b:widget...> sections to yout clipboard, or paste into Notepad for easy editing in a few moments.


5. Once you have copied the widget identifiers from your old template, go back to the browser window in which you can edit your new template.


6. Find this section in your blog template:
   

   <div id='sidebar-wrapper'>
   
   <b:section class='sidebar' id='sidebar' preferred='yes'>
   
   There may or may not be content here...
   </b:section>
   
   </div>

   
   If there are any widgets defined here, it is advisable to delete them. Otherwise you may end up with duplicated widgets. Then in their place, paste the widget codes from your old template:
   

   <div id='sidebar-wrapper'>
   
   <b:section class='sidebar' id='sidebar' preferred='yes'>
   
   Paste the widget identifiers here
   </b:section>
   
   </div>

   
   
   
   If there are no widgets present in the sidebar of your new template, the code may look like this instead:
   

   <div id='sidebar-wrapper'>
   
   <b:section class='sidebar' id='sidebar' preferred='yes'/>
   
   </div>

   
   In this case, you should delete the trailing slash from the end of the line (highlighted in red). Make a line break then paste your widget content as before. Then finally create another line break and add the following line:
   

   </b:section>

   The finished result should look something like this:
   
   
   


7. IMPORTANT! Do not preview your template at all during this process! If you do, you run the risk of duplicating the widgets which will cause you many problems. This seems to be a glitch on Blogger's behalf rather than an error of this method. In any case, do not preview the template.


8. At this point, you should save the test blog template, after which you can view your blog in the normal manner. You will notice that no widget content is actually showing, only the widget titles. This is perfectly normal: as I mentioned earlier, the widget content is stored in the settings for your original blog.


9. Okay, now we have copied over the widgets, we can download the XML template ready to transfer over to the original blog. To do this, go to Template>Edit HTML and select "Download full template" near the top of the page. Save the template to your computer with a name you can easily identify.


10. Now back to the other browser window where you should have the Edit HTML page for your original blog still on the page. Here you should look for the "upload new template" section near the top of the page. Browse for the template you just downloaded from your test blog and upload it. You should NOT receive any error messages, like this:
    
    
    
    If you do see such error messages, take note of the widgets the template wants to delete, then choose to cancel the process. You should then copy the appropriate widgets from the old template into the new template in your test blog (as before), save the template and attempt to upload it again.


11. If you receive no error messages, your template will be saved, and you can now view your new blog template with all your old widgets still in place. You can then move the widgets around however you wish in the Layouts section of your dashboard.

I hope this tutorial helps you easily copy your widgets from your old template to your new one. Please leave your comments and opinions below, and feel free to contact me if you have any problems doing this in your own blogs.

Technorati Tags: widgets | templates | copy+over | test+blog>

Find free icons for your blog with the Iconlet search engine

Iconlet.com is a great new search service to help you find free icons you can use in your blog posts and templates. This service runs like a simple search service, allowing you to input search terms for the icons you need and returning results in image format for you to download to your computer. There are loads of "Web 2.0" style icons to use, and even full icon sets (such as Home/About/Contact icons of a matching theme).

Don't be put off ny the simple layout of the front page: this is truly a very useful design tool, and can also provide you with great inspiration for your blog template design. Let me know what you think of Iconlet by leaving your comments below.

Technorati Tags: icon | search+engine | blog+design

How to set up a test blog (and why you may want to use one)

A test blog can be very useful for testing template changes and other hacks before implementing the changes into your own. I always use test blogs when designing new templates, testing scripts and other such experiments. In this post I'll explain how you can set up your own test blog, and the reasons you will find it useful to use one.

What is a test blog?

For me, a test blog is a temporary blog I use for experimenting with template design, javascripts and to copy widgets from one blog to another. Since these blogs are usually temporary (or used only for experimental reasons) I set them up differently from my main blogs, so that they do not attract visitors or interfere with the preferences of other bloggers.

How do I set up a test blog?

Luckily, Blogger allows us to set up any number of blogs in our free account. You will probably want to set up your test blog differently to your regular blogs, so follow the steps below to learn how to do this:

1. Go to your Blogger Dashboard and look for the "Create new blog" link near the top of the page. Click this link and you will be taken to the blog set-up page.


2. Cjoose a name for your blog (eg: My Test Blog).


3. Next you will need to choose your blog address (something.blogspot.com). I try to use addresses which are unlikely to be used by other Bloggers, and which also do not attract attention from search engines. This is also to ensure I don't interfere with the preferences of new bloggers (we all know the awkwardness of finding a suitable address for our blogs!).


4. After you have chosen your preferences, enter the verification code and choose a simple template to begin with. You will be able to change this template shortly!


5. The nest screen invites you to make your first post. This is actually quite important as having a few posts in your test blog will be of great benefit in seeing how your experiments will work when you try them out. For posts in my test blogs, I tend to use "Lorem Ipsum" dummy text, which is nonsensical Latin designed to fill in blank spaces for designers. Lorem Ipsum text is evenly spaced, and does not attract much visual attention. You can easily generate a paragraph or two of dummy text using the Lorem Ipsum generator in the tools section of this site.


6. (Optional) You may also like to put a few "dummy" comments in your template if you plan on making changes to way comments appear in your blog.


7. Once you have a couple of posts (and perhaps comments) present in your test blog, you should change a few of the settings:
   
   Go to Settings>Basic and look for "Add your blog to our listings". Choose "No" (unless you want your experiments to be seen by anyone who cares to look!).
   
   • Next go to Settings>Publishing and look for "send pings" near the bottom of the page. Set this to "No" too.
   
   
   • Finally, go to Settings>Permissions and choose who you would like to view this test blog. If you choose "Anybody" then anyone who stumbles upon your test blog will be able to see your experimental work. You may prefer to set this to "Only people i choose" instead which will make this blog private.
   
   You may also like to hide your test blog from your profile page. If this is the case, then go to your dashboard again, click on Edit Profile and look for the link which says "Choose which blogs to display". You will then see a list of your blogs and can check only the ones you wish to display from your profile page.


8. Now you can use your test blog for whatever experiments you choose! You can upload your existing template to test new modifications, try out your scripts, or even try creating a new template all of your own!

Why you may want to use a test blog

If you are making major changes to your template, you probably won't want your readers to feel disrupted by seeing things alter as they are reading through your pages! Using a test blog enables you to make modifications without interference to your main blog, then when all is complete you can upload your modified template in one go, which will minimize any disruptions and also ensure you don't make mistakes on your main blog.

You can hack your template (for example, to use peekaboo posts, inline comments or other useful modifications) without worry that your template will break. If you make a mistake on your test blog, you can simply delete it and create another.

Another really good reason to set up a test blog is when you want to change your template and copy over the widgets from your existing blog. I will shortly be creating a full tutorial on this subject which will take you through the whole process step by step.

When you have finished using your test blog, you can easily delete it by going to Settings>Basic and choosing the "Delete this blog" option which is right at the bottom of the page. Once you do this, the blog will be deleted forever and cannot be recovered, so be sure to have backed up anything you need from this blog before you do so. Also the blog url will be released and available for others to use instead.

I hope you have found this post useful. In the near future I will also be creating tutorials about template design, for which you may well fins it useful to have a test blog at your disposal!

Please feel free to leave your comments and suggestions below.

Technorati Tags: test+blog | temporary | create+blog | blogger

5 best free file hosting for your images and scripts

Although Blogger allows us to upload image and video files for our posts and sidebar widgets, we are unable to upload other file types (eg: Javascripts) for use within our blogs. This can prove quite awkward for those who rely on such files, so I have compiled a list of the top five free file hosting services I have encountered. All of these services will allow you to upload Javascripts, text and image files, and to "hotlink" to these files for personal use.

Top 5 Free File Hosting Services

1. HotlinkFiles.com
   
   This service provides 8000mb of bandwidth so you can be pretty sure you won't exceed your monthly quota! No need to register to upload image files, though this is nescessary if you wish to upload any other file type. Maximum file size is 50mb, and with up to 1000mb of webspace available, this is surely a free hosting service that is difficult to beat!


2. Nakido
   
   Files are saved forever on this free host! You need to register to use, and can choose to install the "Nakido Flag" software to download files faster, though of course this is not essential. Most file types are supported, including .zip and .rar.


3. Quicksharing.com
   
   Unlimited downloads and no need to register. Maximum file size per file is 500mb, and files are only deleted if they are not accessed within the past 30 days.


4. EvilShare
   
   Simple easy to use file hosting system with no need to register. Files will be deleted only after 15 days of no activity, and you are provided with a password to delete before this time if you so prefer.


5. JustFreeSpace.com
   
   Another simple free hosting service. Maximum file size is 500mb and files are only deleted after 30 days of inactivity..

If you know of any other good file hosting services, please let me know by leaving a comment below.

Technorati Tags: file | hosting | free+hosts | javascript | top+5

Inline comments hack

Would you like to be able to feature comments and the comments box beneath your blog posts, Wordpress-style? In this tutorial I will explain how this can be achieved in your Blogger "layouts" template. After you implement this hack, your readers will never have to leave the page to post a comment on your blog!

This is an example of what the inline comments looks like in one of my test blogs (click on the image for a larger version):

You can also see an example of this hack in action on this demonstration blog.

You will be able to change some elements of the inline comments' appearance as I will explain later in this post. For now, let's see how this hack can be done.

How to implement the inline comments hack

Before you do anything to your template, be sure to make a back-up of your existing template. This can be done by going to the Edit HTML page and selecting the "Download Full Template" link near the top of the page. It is always good practise to back-up your template before making ANY changes to it. Then if you make a mistake, you can always revert back to this later.

The following steps will take you through the installation process for the inline comments hack. Be sure to read the instructions carefully and copy the code exactly as it is written.

1. For this hack to work, we will need to change a few settings for your blog. Firstly, go to Settings>Archiving in your Blogger dashboard and ensure that "Enable Post Pages" is set to "yes". This ensures that all of your blog posts are visible on their own page, and ensures that the inline comments will appear, since the iframe containing the comments can only call this once per blog page.
   
   Next go to Settings>Comments and ensure that you have set comments to appear in a pop-up window. This may seem odd considering that we will be displaying comments within the page, but this setting ensures we have a better format for the iframe, as you will see later on.


2. Now that you have the correct settings, let's hack your template to make the inline comments appear. Go to Edit HTML and ensure that "exoand widget templates" is ticked. This means that we can get to the code within the blog posts widget, which is where the settings for your comments are contained.


3. Find this entire section in your blog template:
   
   
   And replace it with this section of code instead:
   
   
   Very little has been done to this section of code, except to add comment code (<!-- like this -->) around the section of comment code we want to hide. This ensures that the correct comment code is generated, but not displayed. Without this present in the template, we can not show the comments at all!
   
   Also, I have added the small iframe section which includes the code to call the comments page and display it beneath the blog post.


4. Now the iframe to display comments is in place, but we just need to make one more adjustment to ensure that the comment link from non-item pages (ie: your front page or search results) directs your readers to the comments on individual item pages.


5. Find this section in your blog template:
   
   
   And replace with this section of code instead:
   
   
   Note that this section of your template may not nescessarily be contained in <span> tags. If this is the case, simply copy the <a class=... section instead.


6. Now save your template and take a look at your new inline comments! When you click the comment link from your home/label/archives/search page, you will be taken straight to the comments section on the individual post page. When you view the post pages themselves, you will easily see the inline comments beneath your blog posts.

You can change some elements of this hack to better suit your blog's style if you prefer. For example, in this default installation, the background color for the iframe is set to #dddddd. You can change this to a different color if you prefer to better complement your template. You can also change the height of the iframe (to display more comments), or could centralize the iframe by wrapping it in div tags with align set to center.

Why this version of inline comments works

Blogger's commenting system is now more secure, and comments can only be made from the actual comments page, rather than inside the post page itself. This decision to make the commenting system more secure was probably to thwart spammers and other malicious attention, though unfortunately this means we cannot implement inline comments very easily, nor can we change the comments page in any way.

The way around this is to feature the comments page in an iframe beneath the post. This means we can display the comments box within the post page, and that readers can leave comments without leaving the page.

Why you may want to install this hack

Your blog's readers are much more likely to make a comment if they do not have to leave the page to do so. It can be quite off-putting to be sent to a new page when you want to leave a comment, so by installing the inline comments you will probably discover that the number of comments increases.

Please let me know if you like this hack, or if you are experiencing any problems installing this in your template. In the near future I will also be posting a peek-a-boo version of this hack which can be used to show or hide comments instead of just displaying by default.

Technorati Tags: inline+comments | comments | blogger | wordpress | template | style

I think Blogger Buster needs a makeover...

Despite my recent changes to the Blogger Buster site, I'm still unhappy with the overall look and feel of this blog. It takes ages to load, it isn't quite as easy as I'd like to find relevent information, and let's be honest: the overall look isn't anywhere near as eye-catching as most of the templates I design!

So I'm planning a bit of an overhaul...

Personally I think these are the main problems with this existing template:

• It takes too long to load.


• Navigation is a little awkward.


• There is too much excess content in the sidebars.


• And let's be honest: this template isn't nearly so eye-catching as most of the templates I design!

So, in answer to these problems, I plan to design a whole new look for Blogger Buster, including a more definitive logo, a "Web 2.0" style theme, easier navigation, no unnecessary distractions, and much faster loading times.

Sound good?

As always your opinions matter to me, so I would appreciate any suggestions or comments to help me design a better blog which will benefit you; after all, this blog exists for the benefit of it's readers!

One last thing: for the next fortnight or so while I redesign the site, I won't be available quite as much to help you all with your blogs. So please understand if I don't respond to your comments and emails as fast as I usually do! Once the new designs are set up, everything will be back to normal, and you'll probably see an influx of new templates and tutorials available based on what I've learned in the redesign process. Please bear with me during this time, and I promise the end result will be worth the wait!

Technorati Tags: blogger+buster | redesign | templates | logo | branding

Tic Tac Green Three Column Template

Sorry for the delay in getting this template ready for download! Here is a screenshot of the modified Tic Tac green template for your perusal:

You can download the XML file for this template using the link below (this is contained within a zip file which you can save to your computer):

Download three column Tic Tac (green) template

All images are hosted by Blogger Buster so you do not need to upload them to your own servers. Feel free to modify this template as you wish; however I do ask that the author credits remain intact within the template. Please do not redistribute this template without a link back to Blogger Buster!

For loads more free Blogger template downloads, be sure to visit the Blogger Templates section.

Technorati Tags: blogger+templates | tic+tac | three+column | template | green

How to show links to related posts

Over at Hoctro's Place, I found a great hack which can help you show links to related posts (by label) beside each of your blog posts (in the sidebar section). This can be a very useful hack because many visitors to your blog will land on a "post page" rather than on your home page, and these links can direct them to other posts of interest on your blog.

This hack uses the JSON Callback technique to retrieve post titles from your blog's labels feed. Also, the inclusion of more than one label set is possible, so if you have more than one label for a post, related titles will displayed for each of these labels.

You can choose the maximum number of labels to display as well as the maximum number of posts for each label, which is handy if you feature a great many posts under one particular label.

Hoctro's instructions for this hack are very good, and take you through the modifications to your template step-by-step. It is advisable to pay close attention to the instructions though as the modifications are quite extensive!

For the full tutorial, please visit the "Showing Related Articles" tutorial over at Hoctro's blog.

Although I don't currently feature this hack here on Blogger Buster, I will certainly make use of this when my template is upgraded in the next few weeks! I will also look into the possibility of featuring the related posts links right beneath each post instead of in the sidebar, which I will post as tutorial once I am more sure of how this can be achieved.

Technorati Tags: related+posts | javascript | widget | labels | feeds

Mobilize your blog with Widsets

I recently came across a new service from Widsets which enables you to syndicate your content for people to read as a widget on their mobile phone!

Using WidSets, you can create a widget using your blog's Atom/RSS feed which can be read on a mobile phone. Readers can subscribe to your WidSets widget and receive updates on their mobile device where a regular feed reader may be unavailable. You can see an example of the subscription button for WidSets in my right sidebar.

WidSets is a free service for both subscribers and publishers, and may be very useful in generating traffic from the new wave of readers using their mobile phone to surf the web. To create your own account and begin creating widgets to syndicate your blog content, head on over to WidSets and register your account details. You will be sent a confirmation message to your mobile phone and email account, and can begin creating your WidSets widgets straight away.

Do note that the text message sent by WidSets will contain a link for you to go online with your handset to download the WidSets software, which enables you to view your widgets from your phone. You do not need to use this software in order to be able to create widgets; you only really need to verify your email address.

Please let me know your opinions of this widget using the comment form below.

Technorati Tags: widsets | widgets | feeds | atom | rss | mobile

Free PageRank display button for your blog

Many blogs and websites show off their PageRank with a button like this:

You can use this free tool to generate your own PageRank button display which updates dynamically each time your PageRank is updated, so you can always be sure that your correct ranking is displayed.

To use this free tool, simply enter the full URL of your blog and click "Check PR. Your blog's current PageRank will be displayed, along with a selection of buttons you can choose from to display in your site. When you click on a button style, the code will be generated for you to copy and paste in your blog where you would like the PageRank display button to appear.

Create your free PageRank Button Display

What is PageRank?

Google PageRank results from a "ballot" among all the other pages on the World Wide Web about how important a page is on a scale of 0-10. A website or blog with a high PageRank is considered more important than one with a lower PageRank. Read more about PageRank on this post.

(At present, Blogger Buster does not yet have a PageRank. This is because I created the Blogger Buster domain just after the last PageRank update. Hopefully this will soon change!)

Please leave your comments and suggestions below.

Technorati Tags: pagerank | google | button | widget | traffic

Tic Tac Three Column Template (Blue) available to download

As requested by a few people now, I have modified the Tic Tac Blue template to add a second sidebar. Here is a screenshot for you:

You can see a demonstration of this template in the Tic-Tac Three column demonstration blog.

You can download this template using the link below. This is a zip file which contains the XML file for this template.

Download Three Column Tic Tac template (blue)

To use this in your blog, you should extract the XML file from the zip folder and save it to your computer. Then go to your Blogger dashboard, and click on Template>Edit HTML. Near the top of this page you will see a link where you can upload a new template from a location on your computer. Browse for the saved template file and click "upload". This will then install your new template in place of the old one.

All the images used in this template are hosted by Blogger Buster. You do not need to upload them to your own hosting providers.

You are free to modify this template as you wish, however I do ask that the author credits within the template itself remain in place. Please do not redistribute this template without a link back to Blogger Buster!

Very soon I will also be uploading the "green" version of the Tic Tac template available for download, along with widened versions of both the blue and green templates (which feature more space for blog posts).

Please leave your comments and suggestions below.

Technorati Tags: templates | xml | tic+tac | three+column

All about blog feeds (part 4)

This is the fourth and final installment of a short series of posts written to help you achieve a better understanding of your blog feeds, and how you can use them. In this post, I will explain how you can use services like FeedBurner and AddThis to syndicate your blog feeds and attract more subscribers to your blog.

Services such as Feedburner and AddThis aim to help you publicize your blog feeds, and make them more readily available for readers to subscribe to. If you use Feedburner to syndicate your feeds, for example, you can offer your readers the option to subscribe to your blog feed as a daily email digest, which for those unacquainted with feed readers may well be a pleasant and accessible option!

How FeedBurner works

FeedBurner is probably the most popular feed management system to date, and is completely free to use. Many services are offered to members to help publicize and optimize your blog feeds, and attract more readers to subscribe to them.

To create your own free Feedburner account, simply go to the Feedburner registration page and provide your details. Once you have set up your account, you can begin burning your blog feeds right away!

To "burn" (or "syndicate") a blog feed, all you need to do is enter the feed URL and click "Next". On the following screen, you will be provided with a Feedburner address which you can offer to readers for subscription to this feed. This URL can be changed to suit your needs if you prefer, so long as it hasn't already been used by another member. Click "Save" and your feed will now be managed by Feedburner! However, you may want to consider using a few of the publicizing and optimization options available to you in order to let your readers know that the feed is there for subscription.

Some of the most popular tools provided by Feedburner are:

• Feedburner Stats: get an accurate overview of your subscribers, click-throughs and site traffic.


• Chicklet Chooser: use a friendly graphic as a widget in your sidebar to let readers know about your feed subscription links.


• Email subscriptions: offer updates by email in a daily digest.


• Pingshot: automatically pings pinging sites for you each time you post.


• Headline animator: create a headlines widget featuring the most recent posts from your blog in rotation.

Redirect your blog feeds through Feedburner

You can now choose to redirect your default blog feeds through FeedBurner! This is a great solution for ensuring your subscription statistics are kept up to date, and can offer you a better understanding of your readers. To activate this, you should already have a Feedburner account. Then, go to your Blogger dashboard and click on Settings>Feeds. On this page you will be able to redirect your default blog feeds to your Feedburner feed URL (this is the URL you created when you first burned your blog's feed). Enter this URL and click "Save". From now on your default blog feeds will be redirected through Feedburner instead.

Note: only the default Atom feeds will be redirected through Feedburner; the alternative RSS formats cannot be redirected in this way. So if you also want to have statistics for feed subscribers to your RSS feeds, you would have to burn these manually through your Feedburner account as described earlier in this post.

How to use AddThis to syndicate your feeds

AddThis offer a free, non subscription feed syndication service which generates a button link readers can use to subscribe to your feeds using their favorite feed reading system (eg: MyYahoo, Bloglines, Technorati). To create your own free widget, simply visit the feed widget creation page and enter the feed URL you would like to syndicate. AddThis will then create the widget code which you can easily add to your blog's sidebar and offer to your readers as a subscription link.

You can also choose to become a member of the AddThis site, and get statistics for those who subscribe using this widget, as well as statistics for your site.

Overall, this is a very simple and easy way to help publicize your blog feeds.

Syndicating customized feeds

By "customized" I refer to the non-default feeds, such as label feeds, summarized feeds and alternative RSS feeds. If you would like to publicize any of these feeds using the methods I described above, just enter the appropriate URL including any variables as I described in the previous two installments. Foe example, if you want to syndicate your summarized posts feed using the AddThis widget, enter this as your URL:

http://yourblog.blogspot.com/feeds/posts/summary

Similarly, if you want to syndicate your full comments feeds using Feedburner, enter this instead:

http://yourblog.blogspot.com/feeds/comments/full

The one thing I would advise against is trying to syndicate per-post comments feeds using a third party service, because it is much more efficient to provide a link to per-post comments feeds on the post referred to by the link, as outlined in this post. Trying to add Feedburner or Addthis links for such a feed could really get messy and complicated!

Summary

I hope this short series has helped your understanding of your blog's feeds and how you can publicize them for readers to subscribe to them. If there is anything I haven't covered here, or if you have any comments about this series, please feel free to leave your message below.

<-- Part 3

Technorati Tags: feeds | feedburner | feedburner101 | addthis | syndication

All about blog feeds (part 3)

This is the third installment of a short series of posts written to help you achieve a better understanding of your blog feeds, and how you can use them. In this post, I will explain about the "Label" and "Per-post" feeds, and how you can create links to these feeds in your blog.

The URL required to find the feeds for Labels and Per-post comments are very different to those we used to find the blog-wide posts and comments feeds, and require a full post to discuss them! Rather than using the blog's url, we need to use the blog's unique identification number, and in the case of per-post comment feeds, the unique post identification number.

About Label feeds

Let's begin by looking at the format of the Label feed url:

http://www2.blogger.com/feeds/[yourblogID]/posts/[feedType]/-/[labelName]

First we notice that the feed URL is located at "www2.blogger.com", and that the feed is located by your blog's unique identification number. Notice also the "/-/" section: this is what defines the feed as being attributed to a label.

As in the previous examples, the feed type can be default, summary or full. The label name is that of a label you have defined in your blog. This is case sensitive, so ensure you have correctly defined the label name in the url (ie: Blogger is different from blogger).

Only posts can be shown in the label feeds: comments are disabled and cannot be displayed.

You may well want to experiment with this to see your label feeds for yourself. But how do you find your unique blog ID?

How to locate your blog ID

Whenever you create a post, or preview your template, you will notice your unique blog ID in the address bar. It should look something like this:

http://www.blogger.com/rearrange?blogID=7724685150636068124

The numbers highlighted in red would be your blog ID. Of course, this will be different for your own blog than the number shown here, since each blog has a unique identification number.

How to add links to the label feeds in your blog

Once you've experimented with the feeds for different labels, you may well want a way to display links to these feeds too.

You will have to do this manually each time you want to display a link to a particular label feed. You should do this in the format of the example link below, replacing the text and brackets with your own unique values:

< a href="http://www2.blogger.com/feeds/[yourBlogID]/posts/default/-/[labelName]>Subscribe to Label feed</a>

<a href="http://www2.blogger.com/feeds/[yourBlogId]/posts/summary/-/[labelName]>Label Feed</a>

If your labels have spaces between them, you should replace each space with %20 in the feed URL. Here is an example of how I could link to the "Blogger Templates" label feed:

<a href="http://www2.blogger.com/feeds/724793682641096478/posts/default/-/Blogger%20Templates>S|ubscribe for Blogger Templates updates</a>

About Per-Post comments feeds

The Per-Post comments feeds use the regular blog url for the first part, but require the unique post id to define the post from which comments will be extracted. The format of per-post comment feed URLs look like these examples:

http://yourblog.blogspot.com/feeds/[postId]/comments/default

http://www.yourblog.com/feeds/[postId]/comments/summary

To find the unique post ID for an individual post, you will need to edit the post in question and look in the address bar for the post ID. The red text in the url below highlights the post ID for the post you are reading now:

http://www.blogger.com/post-edit.g?blogID=724793682641096478&postID=2922427856369980802

If you want to provide a subscription link for comments to a single post, you can do so in this format, replacing the brackets and PostID with your own unique post ID number:

<a href="http://yourblog.blogspot.com/feeds/[yourPostId]/comments/default>Subscribe to comments for this post</a>

If you would prefer to provide such a link for all of your blog posts, you should follow the instructions on this page which explain how best this can be achieved.

If you use post-pages in your blog, you will usually find a link to the per-post comments feed right at the bottom of the page. (Note: I'm currently working on an "inline comments" hack for Blogger blogs which better highlights the per-post comment feed link, which I shall post about very soon!)

Changing the format, feed type and results for these feeds

As mentioned in part 2 of this series about blog feeds, you can change the format (Atom/RSS), the feed type (default/summary/full) and the maximum number of results shown for these feeds too. The only exceptions are as follows:

• Label feeds can only show posts, not comments.


• Per-post comments feeds can only show comments, not post updates

In the next post in this series, I will explain in general how you can syndicate your feed using Feedburner and AddThis.

<-- Part 2

Part 4 -->

Technorati Tags: blog+feeds | labels | comments | links

All about blog feeds (part 2)

This is the second installment of a short series of posts written to help you achieve a better understanding of your blog feeds, and how you can use them. In this post, I will explain how to find the main posts and comments feeds and how to make them available for your readers to subscribe to them.

Your main posts and comments feeds are the easiest feeds to find, and are also the feeds which Bloggers are most familiar with. By default, Blogger publishes these feeds in Atom format.

These feeds are found at the following URLs (where YOURBLOG is replaced by the name of your blog):

• For the main posts feed: http://yourblog.blogspot.com/feeds/posts/default
  Or if you are publishing to a custom domain: http://www.yourdomain.com/feeds/posts/default


• It can also be found at: http://yourblog.blogspot.com/atom.xml


• For the main comments feed: http://yourblog.blogspot.com/feeds/comments/default
  Or if you are publishing to a custom domain: http://www.yourdomain.com/feeds/posts/default

You can change the settings of your blog feed, be it for the posts or comments feed, by changing elements of the URL and adding variables to it. The variables you can change are:

• The feed type (Atom/RSS)


• The maximum number of results (posts or comments) that are displayed.


• The amount of text displayed (summary or full)

So let's look at the feed URL in another way:

http://yourblog.blogspot.com/feeds/[posts/comments]/TYPE/[variables defined here]

The feed type (Atom/RSS) and the maximum number of results are defined using variables which are added to the end of the URL. The amount of text displayed is controlled by the TYPE section within the default url.

Changing the amount of text to be displayed

Let's start with an explanation of the type. This can be either "full" (which displays the whole post or comment) or "summary" (which displays the first 250 characters or so). The "default" setting defers to whatever settings you have defined in your Blogger dashboard (which I will talk about in a later post). Using either "full" or "summary" in the url for your blog feed will override any settings you have defined in your Blogger dashboard. Here are examples of how this setting can be used:

http://yourblog.blogspot.com/feeds/posts/summary

http://www.yourblog.com/feeds/comments/full

Changing the feed format

To change the feed from Atom to RSS format, you need to add this variable to the end of the feed url:

?alt=rss

The question mark tells the browser that variables will be added to the feed url, while the "alt" function defines the alternative feed format (in this case, the alternative is RSS). Here are examples of how this can be used:

http://yourblog.blogspot.com/feeds/comments/default?alt=rss
http://www.yourblog.com/feeds/posts/summary?alt=rss

Changing the maximum number of results to be displayed

Once again, variables at the end of the feed URL are used to change the maximim number of results to be displayed. This can be any number from 1-999, and is defined by adding ?max-results=[insert number here] to the end of the feed URL. Here are a few examples:

http://yourblog.blogspot.com/feeds/posts/full?max-results=100

http://www.yourblog.com/feeds/comments/summary?max-results=10

By default, the feeds will return with a start index of 1; that is, they begin with the first newest post or comment. If you want to skip a few results, and start with the third post/comment for example, you can change this by adding ?start-index=3 to the end of the feed url, like this:

http://yourblog.blogspot.com/feeds/posts/default?start-index=3

Chaining variables in your feed urls

If you would like to ad more than one variable to your blog feed urls, you can do so by inserting an ampersand (&) between the variables, as in these examples:

http://yourblog.blogspot.com/feeds/posts/default?alt=rss&max-results=100

http://www.yourblog.com/feeds/comments/summary?max-results=10&start-index=5

http://yourblog.blogspot.com/feeds/posts/full?alt=rss&max-results=15&start-index=2

In this case, you do not need to add the question mark (?) to all of the variables, only the first one to be defined. The browser understands that variables will be added when you include the first question mark after the regular feed url, so you don't need to add any more!

How to offer these feeds for readers to subscribe

Now that you understand the URLs to find the various site-wide feeds for your blog, and how to add variables to change them, you would probably like to offer these feeds to your readers so that they can subscribe to them. You can add these feed URLs to your template like any other link, either as a text link, or an image link. Here are some examples using feeds from Blogger Buster, with an explanation of how they are achieved:

A text link to the main Blogger Buster posts feed, changed to RSS format, summarized with 50 maximum results:


Subscribe to Blogger Buster Posts feed (summary only)

This is achieved by adding this section of code, which you could use in your sidebar:

<a href="http://www.bloggerbuster.com/feeds/posts/summary?alt=rss&max-results=100">Subscribe to Blogger Buster Posts feed (summary only)</a>

An image link to the Blogger Buster comments feed, with full comments displayed and a start-index of 3:



This is achieved using this section of code:


<a href="http://www.bloggerbuster.com/feeds/comments/full?start-index=3"><img src="http://templates.bloggerbuster.com/feed.gif" border="0"/></a>

You can experiment with different text links and images to suit your blog's style and requirements.

Many of your feed subscribers will add the feed url to their feed reader, or will subscribe using the automatic selection in the Firefox internet browser. You can make it even easier for users to subscribe by using your feed URLs to create Feedburner or AddThis feed widgets, as I will describe in a later installment of this series about blog feeds.

Summary

I hope this post has helped you understand the basics of your feed urls, how the settings can be changed by altering the URL and adding variables, and how these links can be provided in your template for users to subscribe to them.

In the next post of this series, I will explain about Label and Per-Post Comments feeds, which are a little more complicated to find (and even more difficult to feature as subscription links in your template!).

<-- Part 1

Part 3 -->

Technorati Tags: blog+feeds | feeds | rss | atom | posts | comments