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: