Tutorial How to Embed Ad Code Anywhere in Your Blogger Template

Have you ever tried to insert javascript ad code directly into your Blogger Template and it just wouldn’t work? Ok, everyone in the room can put their hands down now. This has always been a huge problem for blog authors using Google Blogger looking to monetize their site since almost all ad code contains javascript.

So why is this so darn difficult to do? The problem in the past was that Blogger users wanted more control over where and how frequently their block of ad code (usually AdSense) appeared. The Blogger Team listened to their customers and created an easy to use feature that allows you to setup AdSense in your individual posts with a simple checkbox selection.

Typical Blogger Error Messages

That’s great for most people but the places where you can insert widgets are rather limited and not as flexible as you’d like. So what if you want to put AdSense, AdBrite, Chitika or any other sort of javascript-related code elsewhere on your blog without having to use a widget? The answer in the past would be, “It’s just not easy”.

You would paste the Google AdSense, AdBrite, Chitika or any other javascript ad code into your xml Blogger template only do get an error like:

“Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly. XML error message: The processing instruction target matching “[xX][mM][lL]” is not allowed.”

or another really cryptic error message like:

“Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly. XML error message: The content of elements must consist of well-formed character data or markup.“.

In fact, more recently the Blogger xml parser seems to allow javascript code in your template without displaying an error message at all. You think all is well only to discover when you view your blog that nothing actually gets displayed. Grrr.

Using the Blogger Ad Code Converter

So how can I get around this and easily use ad code or any javascript inside my xml Blogger template? Introducing, the Blogger Ad Code Converter by eBlog Templates. This simple tool will take any block of javascript or html code and replace the characters that Google Blogger ignores with the correct ones. Here’s a real life example. Say I want to put a Google AdSense 468 x 60 banner ad into the header of my blog but there’s no widget to use. You’d have to manually go into AdSense and create a new ad unit to get the code. Here’s the result:

Now if you just pasted that ad unit code directly into your Blogger header you’d get an error or it just wouldn’t work. Most people would think Blogger was broken or wonder if it’s something they did when in fact it’s neither. The new Blogger uses xml which is much more strict and requires certain reserved characters like > <>

<script type="text/javascript"><!--
google_ad_client = "pub-6044026340890176";
/* 468x60, created 3/17/08 */
google_ad_slot = "3105157606";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

This only took me a few seconds to convert since I used the free and easy Blogger Ad Code Converter. There are actually posts out there that explain how to do this manually but who wants to take the time searching and replacing each character when you can convert unlimited sized ad code blocks with only one click?

After you’ve converted your ad code, paste it into your template and it should now work. Obviously before you make any changes to your Blogger template, it’s a good idea to back it up. You never know when you might make a mistake or revert to a previous version. Once you’ve done that, give the Blogger Ad Code Converter a try for free!

What Other Code Can it Convert?

Actually this tool is quite powerful and can be used for encoding any HTML or javascript into XHTML entities. Some popular javascript ad codes that are converted are AdSense, Text Link Ads, AdBrite, LinkWorth, Chitika, Amazon, and more. Another good use is if you need to post a large block of HTML or javascript code into your blog post you can just use this tool.

Technically, it does so by replacing the reserved HTML characters with their XHTML equivalents. It’s basically a simple HTML Encoder that automatically replaces all HTML special characters like <, >, & into entities <, >, &.

Please note: If you are using this tool to convert Google AdSense code you don’t need to worry about breaking the AdSense program policies. This tools is just encoding reserved HTML characters into usable XHTML entities for xml Blogger. When you paste the code into your blog, save it, and then view the source code for the page, you’ll notice your AdSense code is displaying as it was originally written. This modification will not alter the functionality of the code at all, and ensures that it will be displayed within Blogger correctly.