Are your ads acting strangely?

Over the past couple of weeks, a few people have emailed me about problems displaying ads in their Blogger blogs, most particularly with regard to AdSense ads. For many Bloggers, there are blank spaces where ads are expected to be displayed, even if there are already fewer than the three ads displayed which we are supposed to be able to show on each page.

Unfortunately I don't have any answers: I don't know why the ads won't display (particularly on the front pages of blogs), and despite my best efforts at fixing this, I cannot offer you a solution to this problem.

Due to recent events concerning Google and other methods of advertising/blog monetization, I do now have several concerns which I would like to share with you, and would like to know about your own opinions and experiences regarding advertisements in your Blogger blogs.

Problems displaying Google AdSense ads

The terms of Google's AdSense states that:

• Up to three ad units may be displayed on each page.


• A maximum of two Google AdSense for search boxes may be placed on a page.


• Up to three link units may also be placed on each page.


• Up to three referral units may be displayed on a page, in addition to the ad units, search boxes and link units specified above.

(Source: AdSense Program Policies)

However, many Bloggers have noticed that two or fewer ads will actually display on their pages, most especially on the home page of their blogs. On my own home page, I only feature code to display one Google ad (in the sidebar). However, this single ad will not display on the home page, only on my post pages.

From what I've seen in the Blogger help forums and the emails sent by several readers now, it seems that many of us are experiencing this same problem.

Problems displaying codes for TLA

Other Bloggers have experienced difficulties displaying Text-Link-Ads in their blogs, especially when trying to use TLA affiliate banners. I was forwarded this email from a friend who had consulted tech-support at TLA in an attempt to discover the source of the problem:

There are currently some issues with our affiliate code and some sites, such as Blogger or Wordpress sites. We are definitely aware and we are trying to work on a fix for them. I'm sorry for the inconvenience, we will have the affiliate ad codes fixed as soon as possible.

Recently bloggers who use TLA have been penalized for their use of this service. Could this be linked to the problems in displaying such affiliate codes?

A coincidence, or something more..?

Strangely enough, there seem to be few (if any) similar problems displaying AdSense or Text-Link-Ads in Wordpress and other blogging platforms. In recent weeks, Google has "slapped" bloggers who use TLA, Pay-Per-Post and other methods of blog monetization by lowering the PageRank of such sites (for PPP blogs, many have found their PageRank reduced to nil!).

It seems that it was about this time that blank spaces began to appear in my own blog where AdSense ads should appear. From what I've been told by blogging friends, the problems in using TLA codes began around the same time too.

We all know that Blogger is owned by Google. So is Google trying to tell us something? Are we being warned against using too many methods of advertising in our blogs? Perhaps Blogger is trying to protect us from future loss of authority in the PageRank system by reducing the number of paid links which are displayed throughout our pages. As yet, I can only speculate, though I would like to know if many other Blogger bloggers are experiencing similar problems with their blog's ads.

Please feel free to leave your comments, opinions and experiences below. If you have any further information or could provide some clarity about this issue, I would love to hear from you!

PPP blogs suffer the greatest Google slap yet!

Today it seems almost all blogs which use Pay Per Post have been reduced to a PageRank of ZERO!

I could hardly believe Google would stoop so very low as to punish bloggers in this way when I first heard the news this morning. After the recent lowering of PR for blogs which use Text-Link-Ads and the like, it seems to me that Google are punishing anyone and everyone who uses an alternative (and dare I say, better paid) alternative to AdSense monetization in their blogs!

For those of you who do use Pay-Per-Post, please don't worry too much. From what I read in the forums over there, PPP are looking into alternative methods of ranking blogs for paid posts. You can check out this thread for information on this subject.

Thankfully I don't feature any paid posts on this site, so my PR has remained stable. I am so sorry for all of you whose PageRank has been reduced to zero. I don't yet know for certain if the strange Pagerank behavior is a temporary glitch or an all round slap for paid bloggers, but you can be sure that once I know more about this, I will be sure to post the info here for you all.

Show labels without the post count

Labels are very useful to help categorize your posts, and also so readers can easily find posts they would like to read. The default "labels" widget will also show the post count beside the label name, to inform your readers how many posts are categorized under this label. However, this isn't to everyone's taste, and can also be disheartening when one of your labels only has a small post count beside it! So if you would prefer to remove the post count from your label widgets, here is a quick and easy way to remove it.

How to remove the post count from your label widget

The widget tag for the label post count is contained inside the widget template for the label widget itself. To remove the post count, we simply need to remove this widget tag.

To do this, go to Template>Edit HTML in your Blogger dashboard and ensure you have checked the "expand widget templates" box. Then you will need to locate your labels widget in the template. The easiest way to find it is to use your browser's search function and search for this partial line:

b:widget id='Label

This will easily help you locate your labels widget, even if this was not the first label widget you had installed in your template.

The whole code for the label widget will look something like this:

• 
  
  
  
  
  
  
  
  
  
  
  
  ()
  
  

I've highlighted the tag for the label post count in bold red. All you need to do is delete this line of code from your template (only the red part!) and there will no longer be a post count after each label in your list. You can preview your blog before saving to ensure the widget looks the way you had intended; if all is well, then go ahead and save your template. It really is this simple!

I hope this simple tutorial has been useful to you. I always appreciate your comments and suggestions, so please feel free to leave your comment below.

Using a "Tab View" widget to streamline content

Highlighting your recent posts, comments and label feeds is a great way of ensuring readers will stay on your blog for a longer period of time. However, featuring too much content in your sidebar or above the main posts column can often make your blog appear cluttered.

A more streamlined method for presenting such content is to use a tabbed navigation widget, like this:

This widget was designed by Hoctro, and uses JSON calls to gather recent posts, recent comments and labels feeds from your blog. Once installed, readers can click on a tab and the relevant content will appear in the section beneath.

Hoctro's Tab View widget ensures that your readers can easily access other areas of interest in your blog: when the tab labels are clicked, the section beneath is updated with relevant lists of posts or comments so your readers can easily navigate to other areas of your blog. This widget is based on the Yahoo! TabView application, and uses Javascript to call the clickable titles of recent posts, comments and label feeds which are quickly loaded into the space beneath the tabs.

To install this widget in your own blog, head on over to Hoctro's Place where you will find full instructions and all the code required for the Tab View widget to work. There are no externally hosted files for this widget, as all of the code is provided for you to paste into your template.

At first glance, the array of code may seem confusing, so to make this easier to understand, I will outline the five steps for installation here:

How to install Hoctro's Tab View Widget

1. Back up your blog template by going to Template>Edit HTML and clicking on the "Download full template" link.


2. Install the latest version of Hoctro's Javascript core library: This is a large portion of code which you need to copy and paste just before the closing tag in your blog's template.


3. Install the Yahoo! Tab View requirements: This portion of code can be found on the Tab View widget page, and should be pasted immediately after the Javascript core library, but before the closing tag.


4. Install the Tab View widget code: Again, this portion of code can be found on the Tab View Widget page in Hoctro's blog. Paste this whole section of code between any two and tags in your template (for example, in the sidebar section). It is easiest to do this while the widget templates are not expanded, to make it easier for you to locate the correct area in which to paste the code.


5. Finally, you will need to change the title of the widget, the labels and the URL of your blog:
   
   • For the labels, ensure the labels match the exact label names of your own blog's labels. These are case sensitive, so ensure you use the same uppercase or lowercase labels as appear in your own blog.
   
   
   • For your blog's url, simply enter your blog URL without the "http://" part. For example: yourblog.blogspot.com or www.yourblog.com
   Then save your template and take a look at your new Tabs View widget!

You can easily move the position of the widget simply by moving it in the Layout section of your Blogger dashboard. I feel the optimum place for this widget is above the main posts section, or as an extra element in the header. I did experiment with this in a widened sidebar, but the space was simply not wide enough for the five tabs to be presented well (although this did still work as it was intended!).

While I have found Hoctro's Tab View to be a very useful widget, I would prefer to be able to customize such a widget with different content, such as "Popular Posts", Archives and "Featured Posts". Currently I am working on a modification of the original Yahoo! TabView application, which can be installed directly into an HTML/Javascript widget. Although this widget will require more customization to suit your individual blog and preferences, it will be much easier to modify after the initial installation. I hope to be able to post a full tutorial and installation guide for this by the weekend once I've perfected the style of the tabs.

I hope this post has been useful in explaining the use and benefits of the Tab View widget. Please feel free to leave your comments and suggestions below.

To all my readers...

I'm back online and blogging again after taking a few days off for my son. He's feeling much better now and is recovering very well.

Thank you to everyone who left such supportive comments on my previous post, and also to those who sent me emails! My son was thrilled to read these messages from bloggers all over the world, and asked me to send you this message:

For me, the sense of community is the most rewarding aspect of blogging, and it makes me very happy to know that I have such a supportive readership!

Best wishes to you all,
Amanda

I'm offline for a couple of days...

For the next couple of days, I'll be off-line as my son is going into hospital (nothing serious, just a minor operation). This means I won't be able to reply to your comments and emails as quickly as I usually do, though I will of course catch up with everyone as soon as everything is back to normal, plus plenty of new posts to make up for the time I missed.

Thanks, Amanda

Easily redirect readers to your Blogger custom domain!

It used to be awkward to set up your Blogger custom domain to ensure that both the WWW and non-WWW versions of your URL pointed to your Blogger hosted blog. Now Blogger have introduced a great new feature: automatically redirect visitors from http://yourblog.com to http://www.yourblog.com! No more fiddling with the CNAME and A records in your domain's DNS settings as Blogger will now do the hard work for you!

Thanks to Mike I have just learned about this great new feature, which cuts out the need for manual redirection once you have initially set up your custom domain with Blogger.

Now, after setting up the DNS settings in your domain control panel, and registering your new URL with Blogger (see this post for full information), all you have to do is go to Settings>Publishing in your Blogger dashboard, and tick the box which is highlighted on the image below:

This setting ensures a flawless redirection from your non-WWW to your WWW blog URL, and most importantly, you will lose no visitors who accidentally key in your blog's URL without the WWW prefix.

If you currently make use of any free hosting provided by your domain agent, be sure that this redirection will not affect any existing files which are hosted in the root folder of your hosting account, as this redirection may make them inaccessible to you. For this reason, I won't be using this new feature myself, though I am very happy that Blogger have finally resolved this issue for bloggers who have little experience in setting up domains.

Now all we need is for Blogger to actually set up the custom domain for us, without the need to do this ourselves in the DNS settings...

Technorati Tags: blogger | custom | domain | set+up | redirect

How to add MyBlogLog comment avatars (author images) to your comments section

A great way to add a sense of community to your blog is by using comment avatars: an image (or icon) which is unique to the person who is making the comment. When using comment avatars in your blog, you will easily be able to recognize comment authors, especially those who regularly visit your blog. Also I feel this adds a greater sense of interaction between blog authors and their readers.

By default, Blogger only shows comment avatars on comment pages (either pop-up or full screen, depending on your comment settings). However, no comment avatars appear in the most visually important place: in your item pages where comments are displayed beneath your posts. Additionally, only the comment avatars of registered Blogger users may appear on these pages, so if your readers blog on a different blogging platform, their avatar cannot appear at all.

But there is a solution: add MyBlogLog comment avatars to your blog!

When you register your membership with MyBlogLog (a community website for bloggers) you will be able to upload a photo or avatar which will then be used to identify yourself in MyBlogLog's many services.

Thanks to Blog Bloke's post about MyBlogLog comment avatars, I am now using Merlinox's MyBlogLog Blogger Plugin to feature MyBlogLog comment avatars in this blog. This is based on MyAvatars, a Wordpress plugin designed by Napolux. This technique displays the comment authors MyBlogLog avatar beside their name and comment, and where no avatar is found (usually when the commenter has not registered with MyBlogLog), you will instead see a default image.

You can find Merlinox's original instructions for installing MyBlogLog avatars here (which also includes a tutorial for those using Classic Blogger templates). Here I have also provided full instructions for installation, which I hope will help clarify any issues which may be unclear in Merlinox's post.

How to install MyBlogLog comment avatars in your Blogger Layouts blog

1. First, make a full backup of your blog template by going to Template>Edit HTML in your Blogger dashboard, then clicking on the "Download full template" link near the top of the page. It is always good practice to do this before making any adjustments to your blog's template in case you make a mistake and need to revert back to a working template afterwards!


2. Next, go back to the Edit HTML section of your dashboard, and check the "expand widget templates" box. Then, just before the closing tag in your template, insert the following lines of code:
   

   
   
   

Send Blogger links as SMS?

I noticed something rather interesting today in the code of the Blogger nav-bar: there is apparantly a link for "Send as SMS" hidden within this iframe, as highlighted in the image on the right.

It seems this link would enable the reader to send the URL of a blog post with a message by SMS from within the Iframe itself. What a great idea, when so many of us are now using our mobile phones to read (and even write) our blogs!

The URL produced by the Send as SMS link will look something like this, where the blog name and URL referenced belong to that of the blog you are viewing:

sms:?body=Hi%2C%20check%20out%20Blogger%20Buster%20at%20http%3A%2F%2Fwww.bloggerbuster.com%2F

This URL would open your SMS program and insert the following as the text of a message:

Hi, check out Blogger Buster at http://www.bloggerbuster.com

I don't have an SMS program installed on my computer, but was able to duplicate the results with my mobile phone!

I'd wondered if this link may display when viewing my blog from my mobile phone's wap browser, but this seems not to be the case (if anyone has seen this, please let me know about it though!).

I haven't yet found any further information about this link, either in the Blogger help section or by doing a Google search, so now I wonder if this will be a feature Blogger will implement in the future?

If anyone does know more about the "Send by SMS" link in the nav-bar, I would really like to know more about this. With the rise of readers surfing the net from their cell phones, this would certainly come in handy when telling friends about your favorite blogs!

Technorati Tags: blogger | send+by+sms | blog | post | nav+bar

Comment avatars...?

I'm in the process of adding MyBlogLog avatars in the comments section. If this works (which I really hope it does), then you'll begin to see avatars beside the author names...

Please bear with me if comments act strangely for a while! Providing this works as intended, I will post about this shortly.

How to customize "block quotes" in your posts

"Block quotes" are sections of text which are generally used to highlight quotes from other sources; they are usually indented from the main body of a blog posts and may also have a slightly different background color.

Most Blogger templates define how block quotes should appear in the style section of your template, between the tags. In this blog I have customized the appearance of block quotes by adding a background image and stronger color so these sections are defined more clearly. In this post, I'll give you some examples of how you can customize your own block quotes to achieve a more personalized look.

How do I use Block Quotes?

If you are unfamiliar with block quotes, you may be wondering how to use them in your posts. But don't worry, they are very easy to use!

If you write your posts with the "rich text editor", you simply need to highlight the section of text you'd like to block-quote, and click on the "blockquote" button which is highlighted in the image below:

This button also features in the HTML editor, and is easier to spot as there are fewer buttons to choose from!

Alternatively, you can choose to wrap your quotations in blockquote tags, like this:

Write your quotations here

How the style of block quotes is defined

In the style section of your template (between the and tags), it is most likely that you'll find a section which looks something like this:

blockquote {

margin:1em 20px;

}

These few lines of code define how block quotes will appear when published in your posts. By default, any text enclosed in

tags will be slightly indented on the left hand side. Most block quote definitions will also add a margin above the block quote to separate it from the main body of the text, as in the example above.

In your own template, you may notice that ".post" is added before the "blockquote". This statement would then define how the block quote would look inside a blog post, which is where most people would need to add a quotation. However, if you plan on using styled block quotations in your sidebar/footer/header section, it may be a good idea to remove the ".post" phrase so that all block quotes which appear in your template will display in the same way.

Adding some style to your block quotes

Here I will illustrate three common methods you may like to use to style your block quotes: borders, backgrounds and font styles.

Borders

Adding borders to your block quotes can really make a visual impact that the content is separate from the main body of text. The simplest way to add a border is to add these lines in red to the styling definitions for "blockquote" in your style section:

blockquote {

margin:1em 20px;

border: 1px solid #000000;

padding: 5px;

}

Which would produce the following effect:

A solid black border around the whole block quote which is one pixel thick. The "padding" in this example ensures that there is five pixels of blank space between the border and the text it contains, which helps make it easier to read.

Here is an example of a different style of border:

blockquote {

margin:1em 20px;

border: 3px dotted #ff0000;

padding: 10px;

}

And here is the effect:

A dotted red border which is 3 pixels wide, with 10 pixels of padding between the border and the text it contains.

You can experiment with different settings for the border property, such as the thickness, the color and the style using these two examples as a guide. For a full description of the CSS Border property, take a look at Tizag's excellent tutorial which includes a section for you to try out different properties for yourself.

Using background colors and images

In this blog I used a combination of background image and color to highlight block quotes from the main body of text. The method for this is very similar to how we can define the main background of a blog. Here is a simple example to define the background color as a pale grey:

blockquote {

margin:1em 20px;
background: #cccccc;

}

This would produce the following effect:

Here is an example of the block quote background property to define only the background color

You could of course change the hex value of the background color to better suit the theme of your blog template. You may also prefer to add some padding, so that the text doesn't run to the borders of the background.

Let's suppose you want to add some pizazz to the block quotes by using a background image, as in this example...

This uses a background image which is aligned to the top of the block quote section, and also a background color which blends with the image so that it appears to be a complete background image. You could recreate this in your own blog template by using the following code within your b:skin section:

blockquote {

margin:1em 20px;

background: #dfdfdf url(http://bloggerbuster.com/images/blockquote-top.gif) top left no-repeat;

padding: 30px 10px 10px 10px;

}

Alternatively, if you would like to use the "quote marks" image and blended background which I use here, you could use this definition instead:

blockquote {

margin:1em 20px;

background: #e0e0e0 url(http://bloggerbuster.com/images/bg_blockquote.gif) top left no-repeat;

padding: 8px 8px 8px 65px;

}

You could also create your own background images to signify the blockquote and define them in a similar way.

Using different font styles

A subtler method of styling block quotes is to define a different font style to the main body of the text, such as making the font bold, italic or a different color.

Here is an example of a block quote which defines all three of these elements at once, though you could of course choose only one or two of these properties...

All three of these properties may be defined in the following statement:

blockquote {

margin:1em 20px;

font-weight; bold;

font-style: italic;
color: #ff0000;

}

Experimenting with these different font styles can easily help you create a style which is perfect for highlighting your quotations.

The overall effect

Using styles for your block quotes can greatly complement your theme, and ensures that the quotations are easily recognizable from the main body of your posts.

Please let me know if this tutorial was useful to you by leaving your comments and opinions below. If you found this post useful, please consider subscribing to the Blogger Buster feed.

Technorati Tags: blockquotes | style | posts | template | css

How to display code properly in your blog posts

HTML and Javascript codes perform different functions for our blog posts, such as changing the appearance of text like this. But when we need to display the actual code used to perform these functions, we can't simply paste this code into a post as it will perform the function, and not display as regular text.

As you may have seen in my other posts, I use two different methods to display code as text which can be read, copied and pasted for your own use. These are blockquotes and iframes. In this post I'll explain how you can use these methods to display readable code in your own blog posts.

The problem when trying to paste code into your posts is that it will perform the intended function, rather than display as regular text. For example, if I wanted to explain how to make text italic, I could try adding this into my post:

This is italic text

But if I simply paste this code into a post, the effect will be this:

This is italic text

This is because the code is performing the function of the code I pasted, rather than displaying as readable text.

To display this code as text, we need to use "character entities instead.

What are "character entities"?

You could say that HTML uses a special language, and that we need to say things in a different way for a web browser to understand it. Character entities make the browser understand that we want to display a certain character, rather than use the function of this character.

Character entities are made up of three parts:

1. An "ampersand" (the & symbol)


2. Either a descriptive phrase, or a # followed by a number


3. A semicolon (the ; symbol)

Here is an example of the character entity for the © (copyright) symbol:

©

This example uses the descriptive phrase "copy", though it could also be used with the # and it's number instead:

©

Either of these methods will have the effect of reproducing the © symbol in your blog post (or in any web page for that matter!).

The most common character entities you will need to use

Here are the most common characters and their equivilent character entities you would need to use to display code in your posts:

Result	Description	Entity Name	Entity Number
<	less than	<	<
>	greater than	>	>
&	ampersand	&	&
"	quotation mark	"	"

For a complete list of character entities, take a look at the reference page provided by W3 Schools.

Using the character entities

In the code you would like to display, you will need to substitute each of the HTML characters above with the equivalent character entity. For example:

This is how to display italic text

Should be written instead as

This is how to display italic text

This is more commonly known as "escaping" the HTML code.

You could write these character entities by hand each time you need to display code in your blog posts. However, I find it easier to use the "replace" function in Notepad to replace each instance of a certain character with the equivalent character entity. Alternatively, you could use the free HTML code parser tool provided by BlogCrowds which can substitute all necessary characters for you in one click!

Displaying the "escaped" code in your blog posts

As I mentioned right at the beginning of this post, I use two different methods to display code in my posts: blockquotes and Iframes (inline frames).

Blockquotes

Blockquotes are useful if you only need to display a small section of code. Usually, your blog template will indent any content which is enclosed in

tags; sometimes styling will also be used, such as a different colored background or border.

To display your code as a blockquote, you will need to use the following format:

Your content/"escaped" HTML code goes here

Iframes

Iframes (inline frames) are more useful to display long sections of code, such as the template codes displayed in the Templates section of this blog. They are used to display the content of an external file in the body of a page, and can be used to display a large amount of content in a small amount of space. If the dimensions of the iframe are smaller than those of the content it contains, the iframe will have scrollbars so your readers can access the whole content.

Unfortunately iframes are slightly more difficult to create than blockquotes as the content of the iframe must be externally hosted; it is not a part of the page itself.

To create the content of an iframe, you will need to create an HTML file containing your "escaped" code. Don't worry about adding all the elements of a regular web-page, such as the head and body tags: the easiest way to create the HTML file is to paste your escaped HTML code into your favorite text editor (such as Notepad) and save this with an ".html" extension.

You will then need to upload this to your hosting account, and note down the URL of this HTML file. If you don't already have an external hosting account, check out this post to read about some of the best free hosting providers.

Once you have uploaded your HTML file to an external host, you will need to call the iframe in the body of your blog post. To do this, you can use the following format, substituting the example URL for that of your HTML file:

 

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.

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: blogger | nav+bar | restricted | content | splog | spam

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!)

It 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: pagerank | google | alexa | value | content

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:

rel='nofollow'>

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:

rel='nofollow'>

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:

U COMMENT

I FOLLOW

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: do+follow | nofollow | tags | link+love

"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: halloween | template | blogger | layouts | spooky

Now we can subscribe to comments by email!

When 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: blogger | comments | subscribe | email

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 and tags in your template. The simplest way to add extra styling code is to place this just after the closing 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 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:

Your link
Your second link
Your third link

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: buttons | navigation | menu | links | css | template | layout

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: godaddy | set+up | blogger | custom+domain