October 31, 2007

Check your backlinks with this free tool!

The number of backlinks (blogs and websites which feature a link back to your blog) can be a determining factor of your blog's popularity, and can also affect your Google PageRank. So here is a free tool you can use to discover how many backlinks your blog has, which also includes details of the PageRank from these links. You may be pleasantly surprised...

To use this tool, simply enter your full blog URL in the box below and click the "Check" button. The page will then update with listings of all the sites which link to your blog, including an accurate indication of their PageRank.

Your domain:
  (eg. www.bloggerbuster.com or yourblog.blogspot.com)
 

Powered by iWEBTOOL

If you find this tool useful, please consider subscribing to the Blogger Buster feed to receive updates of new tools, templates and tutorials.

October 30, 2007

My issues with the Blogger Nav-Bar

Although many Blogger's prefer to hide the nav-bar, I have kept mine in place for two main reasons:

  1. I blog about Blogger, and the nav-bar is a clear indication that my blogs are powered by Blogger.
  2. I find it very useful to have the "New post", "Customize" and "Dashboard" links available when editing my blogs.

Today I did a little experiment with the nav-bar, and now I'm seriously wondering whether this feature should be installed on any blog at all...

The Blogger nav-bar gives readers the option to view random blogs by clicking on the "next blog" link. In theory, this would be a great way to read the blogs of others, perhaps to discover a blogging treasure you may not otherwise have seen. So as a little experiment, I decided to flick through a few random blogs in this manner and greet some of the other bloggers I encountered.

However, I was rather disappointed (and somewhat shocked) to find that over half of the blogs I encountered were "adult" themed blogs. By this, I'm sure you'll understand the type of content I mean...

I consider myself to be open minded, and if people do want to publish adult content then that's up to them.

BUT:

  • Anyone above the age of thirteen can create a blog, and there are no age restrictions on who can read a blog. So what is there to protect children from seeing this type of content?
  • I don't want my blogs to be associated with spam/pornography! As I'm sure no other decent blogger does either!

Sure we can flag a blog to tell Blogger about the objectionable content we find, but what real difference will this make, unless Blogger can employ thousands to hunt down each and every splog to restrict the content?

Hide the nav-bar?

As I explained in this post, Blogger does not explicitly demand that its users retain the nav-bar. Indeed, when Ankit questioned the legality of hiding the Blogger nav-bar, he was told there there are no restrictions on doing this.

While I have the option of hiding the nav-bar, I wish there were no need to do this, as there are still benefits of using this. It would be far preferable if Blogger could offer the option not to include the "next blog" link, or provide optional restrictions of what can be accessed in the same manner as a Google "safe" search.

I would love to read your opinions on this issue, so please leave your comments below. For those of you who wish to restrict the content which can be accessed from your blogs, here is a working method to hide the Blogger nav-bar.

Technorati Tags: | | | | |

October 29, 2007

Another spooky template for Halloween

Here's another "spooky" Blogger template for you to download: "Lament", which is inspired by the infamous puzzle box of the Hellraiser series...

This one wasn't strictly designed as a "seasonal" template, as I prefer to create templates which could be used year round. Instead, Lament features an elegant, yet sinister theme, and also includes many of the new features I've been working on lately, such as the calendar widget and footer columns.

The "Lament" template features:

  • Web 2.0 style layout, with divided sidebar column and three footer columns for extra content
  • Customized header background
  • Favicon to match theme
  • "Post-options" and "Related posts" on post pages
  • Stylized calendar widget

You can take a look at the Lament Template demonstration blog to see this template in action.Please do take a look at the post pages to see how the post footer sections work too.

Download this template

You can download the XML file for this template below:

Download the "Lament" Template (Zip folder)

This download contains the XML file for you to upload to your blog, plus a help file and all images that are used in the template.

All images for this template are hosted by Blogger Buster, though if you prefer to have control over these images you can upload these to your own image host and edit the template accordingly.

Template code

Alternatively, you can copy the template code below and paste this into the Edit HTML area in your Blogger dashboard:

The calendar widget
This widget parses your date header to display the calendar icon. To ensure this works properly, you will need to change the settings for your date-header format in the Settings>Formatting section of your Blogger dashboard. The date header needs to be in yyyy-mm-dd format, like the example below: It is only necessary to change this one setting, then everything else in this template should work just fine!

Using this template

This template is free to use, and you may customize the template in any way you wish. However, I do ask that the author details remain in the template itself, and that you do not redistribute this template without a link back to Blogger Buster. A link back to Blogger Buster is always appreciated!

PageRank for Blogger Buster (Finally!)

Powered by  MyPagerank.NetIt seems that Google have finally updated PageRank, and I'm so happy to say that Blogger Buster now has a PageRank of 4! After my frustrations of having a zero rank for so many months this is such good news for me, and even more than I could have hoped for considering my site is still rather young.

Unfortunately though, it seems my happiness isn't shared by everyone. Last week, Blog Bloke reported strange goings-on with Google's PageRank system when his blog's ranking suddenly plummeted, then started to gradually increase. By the looks of things, a few of the major bloggers have noticed a drastic change in their PageRank, as can be read in Andy Beard's take on this.

As always, the secret to PageRank success is a closely guarded secret, so no-one really knows why certain sites have been "penalized" while others have gained from this recent change.

Rumors report that Google are updating the PageRank system, punishing those who use paid links, spam and generally bad content. But:

  • It has taken MONTHS for this latest PageRank update, which has punished new sites by only offering a PR of zero or "n/a" until this week!
  • Established and valued sites now have a reduced PageRank!
  • There is no consistency, or even an explanation from Google about what is now considered "bad" for PR status!
Where is the fairness in this, Google?

More and more people are becoming disillusioned by Google, and there is decreasing incentive for us to play by the rules. Yet when many services rely on a site's PR to determine their value, and when visitors use PR to decide if a blog is worth reading, is there a viable alternative?

Please do let me know how the recent PageRank changes have affected your own sites by leaving your comments and opinions below.

Technorati Tags: | | | |

October 28, 2007

Remove "nofollow" tags from your template to spread some link love

If you take a look at the source code for your blog, you'll probably see several references of the rel='nofollow' tag. This tag was originally created to prevent search engines from indexing links in order to reduce spam. However, this simply doesn't seem to work, even as a deterrent to would be spammers. Spam still exists, and if anything the problem of spam is worse than ever.

But the most annoying thing about the "nofollow" tag is this: it prevents legitimate, and helpful links from being indexed by three of the top search engines: Google, Yahoo and MSN. Rather than deter spammers, it's more of a deterrent to commenter's and those who would otherwise link back to your blog.

There is something we can do about this: remove the "nofollow" tags!

Why I have removed "nofollow" from my blog

After much consideration, I have now removed all instances of rel="nofollow" from my blog template. This means that your backlinks, and links in your comments will now be indexed by the three major search engines when they spider this blog.

I believe that it's only fair to reward those who provide useful and informative comments with a proper link back to their blog, and the same goes for those who link to my posts too! As Loren Baker rightly says:

Linking to someone with a NoFollow attribute is a sign of not trusting them. It’s like reaching to shake someone’s hand, but stopping to put on a pair of latex gloves.

At present, I'm not concerned that my DO-follow approach will make Blogger Buster a target for comment-spam: “Everyone who passes a human inspection should get the link love.” And if a comment appears to be spam? I always can always use the "delete" button to remove it! You can read my comments policy here.

How you can remove "nofollow" tags from your own Blogger template

This method works only for Blogger "layouts" blogs. At present, there is no way of removing "nofollow" from classic templates which are hosted by Blog*Spot (though if you are publishing by FTP, you may want to take a look at this very technical post).

As always, you should make a full backup of your template before making any modifications. To do this, go to Template>Edit HTML in your Blogger dashboard, and click on the "Download full template" link near the top of the page.

Next, open up your template in Edit HTML mode, and ensure you have checked the "expand widget templates" box. The code you need to find in your template is contained within the blog posts widget, and unless you tick this box you will be unable to find any instances of "nofollow" in your template!

Finally search for all instances of rel='nofollow' in your template. The easiest way to search for these is to use the search function in your browser (CTRL or CMD + F). In total there should be three instances of this tag, the first is in the backlinks section, which will look like this:
<a expr:href='data:backlink.url' rel='nofollow'><data:backlink.title/></a>
If you would like to remove the "nofollow" attribute for backlinks (links to your blog) you should remove the phrase highlighted in red.

The second and third instances of "nofollow" are located in the comments section, and should both look like the example below:

<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
Again, you should remove only the phrase highlighted in red to remove this "nofollow" attribute from comment links in your blog.

Once you have removed the "nofollow" tags to your preferences (backlinks, comments or both), you can save your template and let your blog readers know about the changes you have made.

Let readers know about your Do-follow policy

Most "do-follow" bloggers feature a logo or comment policy in their sidebar to let readers know that their links will be followed. Randa Clay (one of the "poster children" for the Do-follow movement) created a set of badges you can add to your sidebar. Alternatively, she has provided CSS code which you can use to create a badge without the need for externally hosted images, as you can see here:

U COMMENT
I FOLLOW

Here is the code used for this CSS styled badge:

<div style="background-color: #FFFFFF; width: 123px; height: 52px;">
<div style="background-color: #FF9900; float: right; width: 118px; height: 20px; color: #000000; font: bold 15px arial; padding-top: 3px; margin: 2px 2px 0px 2px; text-align: center;">U COMMENT</div>
<div style="background-color: #000000; float: right; width: 118px; height: 20px; color: #FFFFFF; font: bold 15px arial; padding-top: 3px; margin: 2px; text-align: center;">I FOLLOW</div></div>

Things you should know about using "Do-Follow" in your Blogger blog

If you are considering joining the "Do-Follow" movement to allow comment links and backlinks to be indexed by search engines, there are a few things you should be aware of:

  • If your blog is "private", the rel=nofollow tags will still be generated, in order to ensure your blog is kept private!
  • We have no control over Blogger's comments pages, which will still include the rel="nofollow" tags, even if you remove these from your template entirely. However, comments which feature on your post pages will not have this tag in place, which is the most important thing!
  • When you post a comment while logged in to your Blogger/Google account, you will generate a link to your author profile, rather than your actual blog URL. Instead, you may prefer to choose "Other" for your comment identity, which will allow you to post your name and blog URL instead of a mere link back to your profile page.

    Only blogs which allow "anyone" to comment will have this feature enabled in the "post a comment" section. So you may wish to consider changing the comment settings for your blog if you do decide to adopt a Do-Follow policy.
  • Blogs which use Haloscan to display comments cannot remove the "nofollow" tags from their comments.
  • As far as I am aware, the "nofollow" tags cannot be removed from Classic Blogger templates, as the tag is generated by Blogger within the <$CommentAuthorName$> link, and is not available for removal by the blog's author.

    However, if you publish via FTP and have some technical knowledge, you may want to check out Ronnie Dodger's informative post.

Of course, the removal of the "nofollow" tag is not suitable for every blog, so you should think carefully before using the Do-Follow approach!

Please feel free to leave your comments and opinions below, especially as you now know that your comments will be followed!

Technorati Tags: | | |

October 27, 2007

"Halloween themed template" available

As it's Halloween just around the corner, I quickly whipped up a seasonal template for you to enjoy. The "Halloween Skulls" template (featured on the right) is the first of two spooky themed templates, which is available for download now. Read on for more information and to download this new template.

The "Halloween Skulls" template features:

  • Three column design
  • Sinister header and background image
  • Icons beside sidebar titles
  • Skull post dividers
  • Three columns in the post footer for extra content space (widget ready)
  • AddThis bookmarks at the end of each post, styled to match the theme of the template

This was quite a rushed template (as someone kindly reminded me that I ought to create a seasonal template), but I do have another in the pipeline which is based on Lemarchand's box (from the Hellraiser series of films) which will be a more colorful template if this is what you prefer.

You can preview this template in action on the "Halloween Skulls" demonstration blog.

Please use the link below to download this template in Zip file format. This file includes the XML file for you to upload to your blog, plus all of the images used in the blog in case you would like to host them on your own servers.

Download Halloween Skulls template here

All images used in this template are hosted by Blogger Buster in case you are unable (or prefer not) to upload these to your own hosting account.

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

Technorati Tags: | | | |

October 26, 2007

Now we can subscribe to comments by email!

Blogger CommentsWhen you post a comment on a Blogger blog, you can now receive notification of follow-up comments by email! I was really happy to notice this today, as this means you don't have to revisit a blog (or subscribe to per-post comments in a feed reader) in order to know when a reply to your comment is posted.

When you leave a comment on a Blogger powered blog, you will be given the option to have replies sent to the email address associated with your Google/Blogger account, like this:

You'll be sent an email for each response on the post you have subscribed to, and can easily unsubscribe by using the "unsubscribe" link which is sent with each email. Alternatively, when you view the comments page while logged in to your Google account, you will see an "unsubscribe" tick box on the page which you could use instead.

Currently only those who have an active Google account are able to use this service, as replies to your comments are sent to the email address you registered when you created your Google account.

You can read more information about this new service in the Blogger Help pages.

Technorati Tags: | | |

Create navigation buttons to enhance your blog

Many blogs and websites feature "navigation button" links like a menu at the top of the page or beneath the header. This can be really helpful for readers to navigate to areas of interest in your blog, such as the home page, about page and contact links.

In this tutorial, I'll explain a very simple (but effective) method of creating such a "navigation buttons" for your own blog, which you can use to add easily accessible links to your post pages.

Here is an example of the buttons you can create using this tutorial (though the links in these buttons all point back to this page!):

HomeAboutContact

To create these buttons for your blog, we don't need to use any external images! With a little CSS styling, you can easily create navigation buttons which change color when your mouse hovers over them, making it easier to see that these are indeed clickable links. This style of button is helpful to your visitors and invites them to view the important pages you link to using these links.

There are two main steps to creating these buttons for your blog:

  1. Add some styling code to your blog's template
  2. Create a new HTML/Javascript widget, and create your links

You can use these links anywhere in your blog that you are able to place an HTML/Javascript widget, such as your sidebar, the header section, or above your blog posts.

Here are the steps in detail:

Add some code to the style section of your blog template

The "style" section of "layouts" blogs is contained between the <b:skin> and </b:skin> tags in your template. The simplest way to add extra styling code is to place this just after the closing </b:skin> tag (key CTRL+F to easily find this in your template).

The styling code used for the buttons featured above is as follows:

a.navigation {
background: #000000;
color: #ffffff;
margin: 1px;
padding: 5px 35px 5px 5px;
border-width: 0;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
}
a.navigation:hover {
background: #5d5d54;
text-decoration: none;
}

If you copy and paste this code just before the closing </b:skin> tag in your blog template, you will easily be able to create your navigation buttons. If you prefer, you can change the color of the backgrounds (highlighted in red) to colors which better suit your blog. You can easily find the hex values for the colors you need by using the Color Calculator in the tools section of this site.

You will notice that there are two statements in this styling: the first defines what the buttons will look like as they appear in your blog, while the second (hover) statement defines the background color of the button when you place your cursor over the button (the "mouseover" effect).

Create your links in an HTML/Javascript widget

Once you have added this style code to your template, you should save your template and go to the layouts section of your blog (Template>Layout). Here you should create a new HTML/Javascript widget where you would like your buttons to appear.

In this new widget, you should add your links in the following format:

<a class="navigation" href="http://your-link-url.blogspot.com">Your link</a>
<a class="navigation" href="http://your-link-url.blogspot.com">Your second link</a>
<a class="navigation" href="http://your-link-url.blogspot.com">Your third link</a>

Be sure to replace "http://your-link-url.blogspot.com" with the URL of the post page (or link) you would like the button to link to, and replace the link text (eg: Your Link) with the text you would like to display.

Once you have created your links (you can add as few or as many as you like), save your HTML/Javascript widget, and take a look at the effect in your blog.

How this works

The styling code we add to the template creates styling rules for "anchor links" which are given the class of "navigation". We can use different "classes" to create different effects for elements which appear in your blog layout; the class we give for the navigation links does not affect other links in your template, only those which have the class of "navigation".

With a few tweaks, you can change the style of these buttons to completely blend with the overall appearance of your blog template, and create attractive clickable buttons to your important pages which your visitors will love.

Technorati Tags: | | | | | |

October 24, 2007

A better way to set up your custom domain?

When Jason pointed out an article by Blog Bloke which claims to be the best way to set up your Blogger custom domain, I popped over to take a look at the differences. Indeed Blog Bloke's solution is a very good method to use: this ensures both your www and non-www url both point to your blog quite easily, whereas my preferred method requires a little more customization to perform the same function. Both methods have their advantages and drawbacks, as I shall explain here.

As Blog Bloke points out, many Bloggers who have set up their custom domain do not redirect visitors to their non-www address (eg: http://myblog.com) to their www address (eg: http://www.myblog.com), instead leaving their "parked" page in place, which can be quite frustrating for visitors who forget to add that www in the address bar, not to mention off-putting!

Both Blog Bloke and I agree that it is useful to have redirection in place for your non-www url, though our solutions are slightly different.

Amanda's Custom Domain Method

I use GoDaddy as my domain provider, and my method for setting up your domain with GoDaddy requires three steps:

  1. Set up your custom domain by changing the CNAME records and the settings in your Blogger dashboard.
  2. Activate your free hosting account
  3. Upload a redirect page, which redirects visitors to your www blog url.

While this may seem like a lot to do in order to ensure all visitors to your URL actually get to your blog, I do have good reason for doing things this way. When you set up a redirect page at your non-www url, you can explain that your blog is located at www.myblog.com to ensure bookmarks are correctly formed. Most importantly, when you activate your free GoDaddy hosting, you can utilize this space to host images, scripts and files on your own domain.

Blog Bloke's Custom Domain Method

Blog Bloke's method ensures you only need to set up your custom domain. He advises that you don't change the CNAME records, and instead utilize the "A" records and domain forwarding to ensure your custom domain name points to your Blog*Spot URL. This is a much simpler and cleaner method, and ensures that your non-www automatically redirects visitors to your www domain.

However, this method means you cannot create an informative redirection page, and makes the use of your hosting space a little more complicated as you would need to set up sub-domains in order to make your hosted files accessible. Nonetheless it is a good method, and from what I have read this does work effectively.

Which method should you use?

This depends entirely on your own preferences, but here is some advice to help you decide for yourself:

  • If you want a quick and easy method, go for Blog Bloke's method. For this, you don't need to set up your hosting account or create and upload a redirect page to ensure all visitors get to your blog.
  • If you want to provide info about your URL, and make good use of the free hosting space available to you, you may wish to consider my method instead. Fair enough, it does take a little longer to set up, and requires a little more effort, so it may not be the ideal solution for everyone.

Why not let me know which method you prefer to use by leaving your comments below?

Technorati Tags: | | |

Are you a SnapShots user?

I recently wrote about my experiences using Snap-Shots, which was reprinted in the Snap-Shots blog (with my permission, of course!). Snap-Shots are also inviting others to share their experiences of using this free service. If your article is chosen, you can have this reprinted in the Snap-Shots blog.

Snap-Shots are particularly looking for articles which focus on your actual experience of using Snap-Shots rather than "mindless cheerleading" about how useful their service can be! Those articles which are chosen to be included in the Snap-Shots Experience will blag the author a free T-shirt and, more importantly, a link back to their site. I have to say that when my article was reprinted, I had a surge of visitors from Snap-Shots, and a few have even emailed me to say they found my blog in this way.

So if you're interested, head on over to the Snap-Shots blog to take a look at what others have already written in this subject, and to send your own articles for consideration.

Technorati Tags: | | | |

October 23, 2007

How to install a new template using the HTML code

The Blogger templates offered here are now available in either XML or "template code" format in the Templates section of this site. To learn how to install the XML templates, take a look at this tutorial which explains the process in detail. For those who prefer to copy and paste the code for new templates, here are some tips to help make the process easier.

The template code for each template can be found on the download page in the "templates" section of this site inside a scrolling "iframe" section. To use this, you will need to paste the entire section of code into the Edit HTML section in your Blogger dashboard, instead of the code which is currently there.

Often readers contact me because they have experienced errors when installing new templates in this way. Usually such errors are caused because a part of the template code has been left out when copying, or because a part of the old template still remains.

The method I use to install the HTML code for new templates prevents the dreaded "your template could not be parsed" error code from appearing by ensuring all of the new template code is copied, and none of the old template remains in the Edit HTML window when the new template is installed. This method uses keyboard shortcuts, which simplifies the process, and is also much faster than other methods too!

How I install template code

  1. Fisrt, make a backup of your existing template in case you decide to revert back to this later on.
  2. When you have decided on the template you would like to install, put your cursor inside the scrolling iframe box which contains the template code (it doesn't matter where, as long as it's inside this box!). Then hold CTRL (or CMD for Mac users) and press A. This should highlight all of the text within the scrolling box. Then while this text is highlighted, key CTRL/CMD + C, which will copy all of the highlighted text to your cliploard
  3. Next, go to Template>Edit HTML in your blogger dashboard. Check the "expand widget templates box" and again, place your cursor inside the box containing your template code.
  4. Once again, key CTRL/CMD + A to highlight all of the text within this box. Then key CTRL/CMD + V. This function will paste the new template from your clipboard over the existing template, which ensures the old template is completely removed.
  5. You can now preview your new template to ensure you like the new appearance before saving it. Using this method, if you decide you don't like the new template, you can simply click the "clear edits" button, and your old template will still be in place.

I hope this method works well for you too. It certainly is worth giving this a try if you have experienced error messages when trying to paste the html code for a new template.

Please feel free to leave your comments and opinions below.

Technorati Tags: | |

October 22, 2007

"Cool Blue" Web 2.0 style template available for download

Here is a pale blue version of the recent Web 2.0 style templates I have created. This version is called "Cool Blue" and features muted blue tones for an eye-pleasing theme suitable for many types of blog. This template also includes many advanced features, such as the three footer columns and calendar widget. You can see the screenshot to the right (click for full-sized preview), or read on for further details and download information.

As the title suggests, this template has a pale blue theme. It features a clean and simple layout, and very few images. Combined with a small javascript, this ensures the blog loads very quickly, and is able to deliver powerful new features which are not available in other templates I have created.

These features include:

  • Fast page loading time
  • Themed favicon already in place (see top left of the address bar)
  • Integrated blog search form
  • Web 2.0 style logo
  • Navigation bar (which can be customized to suit your needs)
  • Calendar widget
  • Unique wide sidebar layout, featuring a combination of wide and dual narrow columns
  • Three widgets available in the footer section
  • Unique post footer sections, which include a "What next" section for email post links, social bookmarking and "add a comment"
  • Related posts section also in post footer, to link to posts of the same label
  • Author comment highlighting on post pages
  • Rounded corners achieved by CSS instead of images
Plus a few other features too!

You can see the template in action on the Cool Blue Web 2.0 Template demonstration blog. Please do take a look at the post pages to see how the post footer sections work too.

Download this template

You can either download the full zip file for this template, which includes the XML template, plus all images and a help file, or copy and paste the code further down this page into the "edit HTML" section of your Blogger dashboard.

Download Cool Blue Web 2.0 Template (Zip folder)

This download contains the XML file for you to upload to your blog, plus a help file and all images that are used in the template.

Template code to copy and paste into the Edit HTML section of your Blogger dashboard:

All images for this template are hosted by Blogger Buster, though if you prefer to have control over these images you can upload these to your own image host and edit the template accordingly.

How to set up this template

This template will work without much modification, though there are two things you may want to change:

  • The calendar widget
    This widget parses your date header to display the calendar icon. To ensure this works properly, you will need to change the settings for your date-header format in the Settings>Formatting section of your Blogger dashboard. The date header needs to be in yyyy-mm-dd format, like the example below: It is only necessary to change this one setting, then everything else in this template should work just fine!
  • The navigation bar
    This is set up to feature links to your blog's home page (Home), an "about" page (About) and a contact page or link (Contact). In the default installation, I have been able to set up the "Home" link which points to your blog's front page. However, you will need to set up links to your About and Contact pages manually. You can also choose to change these links or add more links as required.

    The navigation bar is highlighted with comments in the template, and looks like this:
    <!-- This is the navbar section which you can edit to include your own links -->

    <div style='height: 40px; padding: 10px 0 0 0; margin: 3px 0 0 0;'>

    <!-- Home Page Link -->
    <a class='nav-section' expr:href='data:blog.url' style='color: #fff; text-decoration: none;'>Home</a>

    <!-- About link add your link here -->
    <a class='nav-section' href='#' style='color: #fff; text-decoration: none;'>About</a>

    <!-- Contact link add your link here -->
    <a class='nav-section' href='#' style='color: #fff; text-decoration: none;'>Contact</a></div>

    <!-- End navbar section -->
    Simply change the "#" for the links to point to your own posts/web pages, or copy the link style to create new links instead.

Using this template

This template is free to use, and you may customize the template in any way you wish. However, I do ask that the author details remain in the template itself, and that you do not redistribute this template without a link back to Blogger Buster. A link back to Blogger Buster is always appreciated!

October 20, 2007

Red Web 2.0 style template available for download

Now there is a red-themed version of the "Girly Web 2.0" template available for download. This template also includes many advanced features, such as the three footer columns and calendar widget. You can see the screenshot to the right (click for full-sized preview), or read on for further details and download information.

As the title suggests, this template has a red and silver theme. It features a clean and simple layout, and very few images. Combined with a small javascript, this ensures the blog loads very quickly, and is able to deliver powerful new features which are not available in other templates I have created.

These features include:

  • Fast page loading time
  • Themed favicon already in place (see top left of the address bar)
  • Integrated blog search form
  • Web 2.0 style logo
  • Navigation bar (which can be customized to suit your needs)
  • Calendar widget
  • Unique wide sidebar layout, featuring a combination of wide and dual narrow columns
  • Three widgets available in the footer section
  • Unique post footer sections, which include a "What next" section for email post links, social bookmarking and "add a comment"
  • Related posts section also in post footer, to link to posts of the same label
  • Author comment highlighting on post pages
  • Rounded corners achieved by CSS instead of images
Plus a few other features too!

You can see the template in action on the Red/Silver Web 2.0 Template demonstration blog. Please do take a look at the post pages to see how the post footer sections work too.

Download this template

You can either download the full zip file for this template, which includes the XML template, plus all images and a help file, or copy and paste the code further down this page into the "edit HTML" section of your Blogger dashboard.

Download Red/Silver Web 2.0 Template (Zip folder)

This download contains the XML file for you to upload to your blog, plus a help file and all images that are used in the template.

Template code to copy and paste into the Edit HTML section of your Blogger dashboard:

All images for this template are hosted by Blogger Buster, though if you prefer to have control over these images you can upload these to your own image host and edit the template accordingly.

How to set up this template

This template will work without much modification, though there are two things you may want to change:

  • The calendar widget
    This widget parses your date header to display the calendar icon. To ensure this works properly, you will need to change the settings for your date-header format in the Settings>Formatting section of your Blogger dashboard. The date header needs to be in yyyy-mm-dd format, like the example below: It is only necessary to change this one setting, then everything else in this template should work just fine!
  • The navigation bar
    This is set up to feature links to your blog's home page (Home), an "about" page (About) and a contact page or link (Contact). In the default installation, I have been able to set up the "Home" link which points to your blog's front page. However, you will need to set up links to your About and Contact pages manually. You can also choose to change these links or add more links as required.

    The navigation bar is highlighted with comments in the template, and looks like this:
    <!-- This is the navbar section which you can edit to include your own links -->

    <div style='height: 40px; padding: 10px 0 0 0; margin: 3px 0 0 0;'>

    <!-- Home Page Link -->
    <a class='nav-section' expr:href='data:blog.url' style='color: #fff; text-decoration: none;'>Home</a>

    <!-- About link add your link here -->
    <a class='nav-section' href='#' style='color: #fff; text-decoration: none;'>About</a>

    <!-- Contact link add your link here -->
    <a class='nav-section' href='#' style='color: #fff; text-decoration: none;'>Contact</a></div>

    <!-- End navbar section -->
    Simply change the "#" for the links to point to your own posts/web pages, or copy the link style to create new links instead.

Using this template

This template is free to use, and you may customize the template in any way you wish. However, I do ask that the author details remain in the template itself, and that you do not redistribute this template without a link back to Blogger Buster. A link back to Blogger Buster is always appreciated!

October 19, 2007

Top 12 keyboard shortcuts for bloggers

I often use keyboard shortcuts while blogging, as these can save much time and enable you to perform certain tasks more easily. Here is a list of the top 12 keyboard shortcuts I use while blogging, which can be really useful when editing posts and templates.

These keyboard shortcuts work in all major browsers, including Internet Explorer, Firefox and Opera.

As Mac OSX uses the CMD key rather than the regular CTRL key, all references in the table below refer to CTRL/CMD, so that users of either type of computer are able to understand these shortcuts.

FunctionWhat it doesExample of usage
CTRL/CMD+BBold TextWhen editing your blog posts, highlight the section you want to appear in bold test and key CTRL+B (or CMD+B)
CTRL/CMD+IItalic TextFor when editing blog posts. Highlight the text you would like italicised and key CTRL+I (or CMD+I)
CTRL/CMD+ASelect allSelects all of the content on a page. If you put your cursor in a container (eg: when editing a blog post or your template), this will select all of the content in the container.
CTRL/CMD+CCopyCopied the highlighted selection to your clipboard. Useful for when copying code in your template, or using quotations in your blog posts.
CTRL/CMD+VPastePastes the content of your clipboard into the area you are working on. Often used with the "copy" function (above)
CTRL/CMD+XCutCuts the selection from your working area, and copies to the clipboard for later use rather than deleting it. Useful for when you need to move a selection of code or text from one area to another.
CTRL/CMD+FFindPresents a test input box which you can use to find specified text in your current page. This is very helpful when editing your blog template, for example when finding a specific line of code.
CTRL/CMD+NNew browser windowThis brings up a new browser window, ideal for when you need to view two web pages in the same session.
CTRL/CMD+TNew Tab (Not available in IE)Brings up a new browser tab.
HOMEGo straight to the top of the pageIdeal for when you need to go back to the top of a page quickly
ENDGo straight to the bottom of a page, or to the end of a line if you are editing your posts/templateA fast way to reach the bottom of a post when editing, for example. When editing your posts or template, this key will quickly move your cursor to the end of the line you are editing.
CTRL+HView browser historyBring up a sidebar section in your browser to display recently viewed pages.

I hope you find these keyboard shortcuts as useful as I do while blogging! Please feel free to leave your comments below.

If you liked this post, why not consider subscribing to the Blogger Buster feed?

Technorati Tags: | | |

Creating a "post-options" box beneath each of your posts

When a visitor to your blog has finished reading a post, it can be helpful to see options of what they could do next. In this blog, I have added a "post options" box after the body of my posts (like the image on the right), which offer links to post a comment, email the post and AddThis buttons for readers to add the post to their favorite social bookmarking sites. In this tutorial, I'll explain how you can feature s similar "post options" menu beneath your own blog posts.

First I will explain how to add a post options menu which you can add simply by copying and pasting the relevant code. After installation, this will need no further customization to work correctly in your blog. Afterwards, I will demonstrate some customization options which you may like to add to this, such as "email the author" and the drop-down AddThis button. These extra options will require some customization on your behalf, which is why I'll discuss them separately from the main hack.

There are three main steps to installing this hack in your blog template. It is slightly more complicated than other hacks I have posted, but once installed this can add great value to the interactivity of your posts, and can also help keep visitors on your site for longer.

Here is the step by step installation for the "post-options" box:

  1. Make a back up of your existing template

    Before making any changes to your template, you should always make a back up of your existing template, in case you make a mistake and need to revert back to this later.

    You can do this by going to Template>Edit HTML in your Blogger dashboard and clicking on the "Download full template" link near the top of the page.
  2. Add some code to the posts section of your template

    This part of the installation cab be quite awkward as the method differs depending on where you want the post-options box to be displayed.

    The easiest place to place the code directly beneath the post body section. In this case, you should find the following line of code in your template:
    <p><data:post.body/></p>
    Immediately after this line, you should add the following block of code:
    If you are confident in editing your template, you may prefer to insert the code above into your post-footer section, or after the backlinks section instead.

    You may wish to save your template at this point.
  3. Add some style to the "post-options" box"

    The section you have added to your template should now display the "post-options" box beneath your posts on post pages. However, you may prefer to style this box to have a border and some padding, as this makes it more distinctive from the main body of the post.

    In the post-options box used in this blog, I added the following lines to the b:skin section of my template:
    .what-next {
    width: 250px;
    border: 1px solid $bordercolor;
    padding: 0 10px 10px 10px;
    margin: 10px 10px 0 0;
    float: left;
    }

    The easiest place to add this code is immediately before the closing </b:skin> tag.

    If you prefer, you can modify this style to better suit your own blog template.

Once you have saved the modifications to your template, take a look at a post-page and see the new post-options box featured beneath your blog posts.

The "email this post" link

If you have chosen to display "email post links" beneath your blog posts, these should already be displayed in the post-options box. If you haven't yet enabled this option, simply go to Template>Page elements in your Blogger dashboard and click on the "Edit" link in the Blog Posts section. You can then tick the "Show email post links" box, and the email post links will be displayed in your post options box.

Customizing the post-options box

The default installation for the post options box will work for all templates, and need not be configured further to display everything correctly. However, you may want to add further links or options to this box, which may need to be configured for your particular blog.

To add more options, you will need to add your links/options in list-item tags, like this:

<ul>
<li><a class='snap_no_shots' href='#comments'>Post a comment<span class='post-comment-link'> </span></a></li>
<li> <!-- email post links -->
<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a class='snap_noshots' expr:href='data:post.emailPostUrl' title='Email Post'>
Email this post <span class='email-post-icon'> </span>
</a>
</span>
</b:if></li>

<li>Add your links or options here</li>
</ul>

Here are some examples of options you may like to add:

  • Contact the author

    For this you would need to add a link to your contact page, or perhaps your profile page, like this:
    <li><a href="http://your-contact-page-url.blogspot.com">Contact the author</a></li>
  • AddThis social bookmark buttons

    I was hoping to add these to the default installation, but AddThis now require that you register to use their free service.

    If you would like to use AddThis social bookmark buttons, please register for your free account, then create your button and use the code provided. You can then add your button code like this to the post-options box:
    <li><--AddThis code here --></li>
  • Any other options?

    Any options you would like to display can be inserted in a similar way, by adding the code or content between <li> and </li> tags, as described above.

I hope you have found this tutorial useful, and that it has helped you to insert a "post-options" box beneath your own blog posts. Please feel free to leave your comments and opinions below.

If you enjoyed this tutorial and wish to receive updates of future content, please consider subscribing to the Blogger Buster feed.

Technorati Tags: | | |

October 18, 2007

How to add three columns to your footer section

As you can see at the bottom of this blog, I have three columns in the footer section, followed by a wide section which I use to feature the main blog links. This style is fast becoming common in Web 2.0 style websites and blogs, and is quite easy to duplicate in Blogger templates. In this tutorial, I will explain how you can add these extra columns to your own Blogger blogs.

Adding extra columns to your footer section will provide more valuable space for blog widgets, and also contribute a modern "Web 2.0" appeal for your blog design.

There are only four main steps to this tutorial, and I'm sure you'll agree that the overall process is quite simple. I have taken into account that different blogs have different widths and styles, and so have designed a fluid solution which should work in any Blogger layouts template.

Creating the new columns

Here are the four steps needed to transform the footer section of your blog template:

  1. Back up your existing blog template!

    Before making any modifications to your blog template, it is essential that you make a back up of your existing template. Then if you make any mistakes, or decide you don't like the new look, you can easily revert back to this design.

    To back up your existing template, go to Template>Edit HTML in your Blogger dashboard, and click on the "Download Full Template" link near the top of the page. You can then save your existing XML template file to your computer.
  2. Move all existing widgets from the existing footer section

    In the Layouts section of your Blogger dashboard, move all widgets which are present in your footer section into your sidebar (or other section) instead. This is only temporary, as you can move them back later once we have finished adding your new footer section. Most importantly, this ensures that you don't lose these widgets during the modification, and makes it much easier to complete.
  3. Add extra code to your footer section.

    Go to Template>Edit HTML in your Blogger dashboard, and do not check the "expand widget templates" box (this simplifies the process).

    Now you need to find this section in your template:
    <div id='footer-wrapper'>
    <b:section class='footer' id='footer'/>
    </div>
    Please note that this particular section may be called something slightly different in your template, eg: "footer-wrap" or "footer". In the case of Rounders templates, you may notice that there are in fact two DIV sections around the footer section. In any case, all we need to change is the line highlighted in red.

    Replace the entire line highlighted in red with the code below: It is a good idea to save your template at this stage, before we add just one small section of code to style the new footer section and ensure that the widgets don't get pushed beneath each other when you add them later.
  4. Adding style for the new footer section

    Once again, open the Edit HTML section in your Blogger dashboard. This time, you need to find the closing "</b:skin>" tag, which is where the style section of your template ends.

    Immediately before this line, add the following lines of code:
    #footer-column-container {
    clear:both;
    }

    .footer-column {
    padding: 10px;
    }
    And save your template again. The style in these lines of code ensure that the footer column don't get too bunched up, or slide beneath each other in the layout of your template.

Now you have finished adding these new sections to your footer, go to the Layout section of your Blogger dashboard (Template>Layout), and you will see the three new column, plus a lower section which spans the width of all three column, to which you can now add new widgets!

I added a horizontal line to the footer section to ensure that there is a clear distinction between content in the footer columns and content in the wider section beneath. If you would like to change the color of this line, you can do so by replacing the hex color values in the line below (highlighted in red) with a different color:

<hr align='center' color='#5d5d54' width='90%'/>
If you are unsure of the hex value for the color you prefer, you can refer to the Color Calculator in the tools section of this site.

If you would prefer to remove the line altogether, simply delete the whole line.

I hope this tutorial enables you to customize your footer section with ease, so you can add more widgets and content to this area of your blog template.

If you enjoyed this tutorial, please consider subscribing for future updates.

Technorati Tags: | | | | |

October 17, 2007

Problems uploading your images to Blogger? Here's a temporary solution

It seems that many Bloggers are currently unable to upload images to their blog posts. This problem is currently being investigated by the Blogger team, and while we are told that a solution is "imminent", this is still causing many problems.

Usually when this problem occurs, you will receive an error message and error code which you can report to the Blogger Team on this thread in the Blogger Help Forums.

Until the image upload problem is fixed, you may want to consider uploading your images to a free hosting site, and link to these from your blog posts. While this is hardly ideal, I have found this does bypass the problem and displays images correctly. Here's how you can link to externally hosted images in your blog posts.

Upload your images to a free image hosting service

There are dozens of free image hosts to which you can upload your images. Perhaps the most popular of these free services are Photobucket and Imageshack, though you may easily find other services by performing a Google search for Free Image Hosting.

You may need to set up an account with your choice of image host, and once you have done so, follow the instructions for your host to upload your images.

When you have uploaded the images you wish to use, make a note of the exact URL of your image. You will need to use this when linking to the image in your post, so it may be useful to copy this to your favorite text editor.

Create your post as normal

Write your Blogger post as normal, but without the usual image upload. In the place where you would like to feature your image, you can use this simple HTML tag to link to your image, which will make this display in your blog post:

<img src="yourimagehost.com/yourimage.jpg"/>

You will need to replace "http://yourimagehost.com/yourimage.jpg" with the exact URL of your image, where it is hosted on your image host.

This simple code will display the image you specify which by default is aligned to the left of any text which follows. You may prefer to customize the way the image displays in the post. In this case, here are alternatives to the three alignment methods used when uploading images through Blogger:

  • Align your image to the left of all text:
    <img src="http://yourimagehost.com/yourimage.jpg" style="float:left; margin: 0 10px 10px 0; border-width: 0;/>
  • Align your image centrally (with no text on either side):
    <img src="http://yourimagehost.com/yourimage.jpg" style="display:block; margin:0px auto 10px; text-align:center; border-width: 0;"/>
  • Align your image to the right of all text:
    <img src="http://yourimagehost.com/yourimage.jpg" style="float:right; margin: 0 0 10px 10px; border-width: 0;"/>

Don't forget to replace all instances of "http://yourimagehost.com/yourimage.jpg" with the actual URL of your image!

Adding "Alt" to your image tags

"Alt" means "Alternative text", which is displayed instead of your image for browsers which do not display images (eg: Lynx), for accessibility reasons, and in case your image cannot be displayed for some reason. While it is not strictly nescessary to add alternative text to your image tags, you may prefer to do so. Here is an example of how to add alternative text to an image:

<img src="http://yourimagehost.com/yourimage.jpg" style="float: left; margin: 0 10px 10px 0; border-width: 0;" alt="My Image"/>
You can replace "My Image" with a more appropriate description for your image instead.

Alternative text can help your blog rank better in search engines, and is usually inserted by Blogger when you upload your images in the regular way.

Making your image into a link

When you insert an image using the image tags above, the image displayed will not link to the image location as it does when you upload an image through the Blogger upload system. If you would like the image to become a link to its' location online, you can use the following method:

<a href="http://yourimagehost.com/yourimage.jpg"><img src="http://yourimagehost.com/yourimage.jpg" style="float: right; margin: 0 0 10px 10px; border-width: 0;" alt="My Image"/></a>

Again, don't forget to change the URLs to match that of your image's online location!

You can also use this method to create an image link to any other website you prefer. Simply change the <a href="..."> section to match the URL you wish to link to.

I hope this alternative method will enable you to post as normal until Blogger have solved the problems we've all experienced when trying to upload images to our posts! Which I hope will be very soon...

Technorati Tags: | | |

Creating a contact form for your blog with WebFormDesigner

Contact forms can add a professional look to your blog, while offering an easy way for your readers to get in touch with you. An added benefit is that your email address will be disguised, so you can be sure your inbox is kept spam free.

Most contact forms rely on PHP or Perl scripts to send the data to your email address. This can be awkward for Blogger users, since we cannot host such scripts in our blog. But with WebFormDesigner, you can create and use contact forms in your Blogger blog, as demonstrated on my contact page. Here is an explanation of this great free service.

Contact forms allow your readers to send you an email directly from your blog. The details of the contact form (eg: the reader's name, email address and message) are then sent to your email address. When using contact forms, your email address is kept hidden and is not included in the source code of the page, which prevents spam-bots from discovering your email address.

While you could write the code for your contact form by hand, it can be quite a complicated process, particularly when you need to feature required fields (such as the sender's email address), or when you need to validate the content. Furthermore, you will also need to use a script to process the form. This acts a bit like your regular email client: it takes the contents of the form, processes it and passes this on in the form of an email to your email address. Unfortunately most form-to-email scripts are written in PHP or Perl, and Blogger is unable to host files of this type for us.

WebFormDesigner offers a way for Bloggers to use contact forms in their blogs by offering two valuable services:

  • A free form design program, which can create the code for the contact forms you design
  • A free "form-to-email" service, which processes the completed forms for you and sends the results to your email address.

The free form design program enables you to create contact forms quickly and easily using a drag and drop system. It can then create the code for the contact form (including validation and required fields) which you can simply copy and paste into a blog post. In addition, you can use the free form-to-email service to have the results of your forms sent to your email address.

How to use WebFormDesigners free services

First of all, it is best to create your free account to enable your forms to be processed. To create your account, simply visit the WebFormDesigner "form-to-email" page, and choose to sign up for an account. You will need to provide your email address which will be used to send your password and unique "form ID", which is required to process your forms.

Shortly after signing up, you should receive an email which contains your password and form ID. Make a note of your form ID as you will need this shortly.

If you haven't already done so by this stage, download the free WebFormDesigner program and install this on your computer. This is the program you can use to create your contact forms. Once installed, launch the program, and you can begin designing your contact form.

I have to admit that I found this program a little awkward to use at first. Perhaps the easiest way to begin is to click "Open" and open the pre-configured contact form which is delivered as part of the program. This form features the three main text-input areas you will need: Name, Email address and Message. You can play about with this form if you like: change the fonts, add color and new fields, etc. Then when you are ready, click on the "create code" button at the top of the window.

On the pop-up screen which appears, you can name your form (eg: My_Contact_form). Choose to "Embed routines with this form" as you will most likely only be using a single contact form in your blog page.

In the lower half of this screen, choose the option to use WebFormDesigners form-to-email service and enter your Form ID in the text input area (this is the Form ID you received with your confirmation email). Then click the continue button.

On the next screen, choose "relative positioning" to ensure the form does not interfere with the layout of your blog (this is the default setting). You can also choose to ask for confirmation from the form user when they submit their contact form, but this is optional and won't greatly affect the functionality of the form.

Following this screen, you can choose to sort the order the items are presented to you in the email you receive. For example, you can choose to see the email address first, followed by the message, even if this is not the order in which the fields appear in your form.

Finally, you will be presented with the form code which you can copy and paste into a blog post (see this page for details about creating "pages" in your blog). You can also choose to test the form in your browser to ensure everything works correctly.

Your new contact form should be working as soon as you have posted your "contact form" post. You can test this by visiting your blog post in your browser, including your own email address in the address field to see what the resulting email will be like.

Changing the settings for the form-to-email service

As I mentioned, the form will work as soon as you post this in your blog. However, there are a few settings you may like to change in your WebFormDesigner dashboard, to make things run more smoothly.

After logging in to WebFormDesigner, you can choose to edit:

  • An autoresponder message, which will be sent to the user's email address as conformation of their email to you
  • A redirect page: this is where users will be redirected once they have submitted their contact form. This could be your blog homepage or a thank you page should you wish to create one.
  • Error Page: in case the user of your contact form makes an error, you can direct them to an error page of your choosing. If this is left blank, the default WebFormDesigner error page will be used instead.

Once you have changed any of these settings, click "Update Me" at the bottom of the page and the settings will be changed immedietly.

Things you should know about this free service

WebFormDesigner is currently free, and I hope this will be the case for some time! There are no limitations on the number of forms which can be processed, not on the number of forms you can use in your web/blog pages.

However, as with many free services, this may be subject to change in the future. If this service becomes hi=ugely popular, we may see limitations or fees imposed for it's users. The WebFormDesigner FAQ page does explain about this, and I'm sure that users will be warned well in advance of any future restrictions or charges.

If you are able to host your own PHP scripts, you can process your own contact forms using the sample PHP script provided, instead of relying on the form-to-email service. This may be something I will consider trying in the future, since this would bypass any restrictions or payment for service should they be imposed. For now I am happy to be able to use this free service though, and expect many of you Bloggers will be too.

Please let me know what you think of WebFormDesigner by leaving your comments and opinions below. I would also be interested to hear of any other "contact-form" services you may have found which work for Blogger blogs.

If you liked this post and would like to receive news of future updates to this site, please consider subscribing to Blogger Buster.

Technorati Tags: | | |

Advertise on Blogger Buster

Browse through the Archives

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

Blog Archive

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