Webmaster tips » Adsense


Max Bulber

How to insert AdSense, Chitika or any other Javascript code into new Blogger template

Average rating
  • 3.5 out of 5 Stars
Rate this article

Not long ago Google Blogger platform added new widget-driven templates, which use different approach from the "Classic" template. Classic template was based on HTML, new Blogspot templates now are based on XHTML which is a branch of XML.

So, classic templates are incompatible with new Blogger templates. New Blogger templates use "Page Elements" (widgets) but the places where you can insert widgets are rather limited. So what about if you need more flexibility than they allow?

  1. Google Widgets are always separated by dashed horizontal rules, which can be inappropriate if you want to blend your ads.
  2. You cannot insert widgets inside your blog post, so you need to edit template HTML code.
Top Website Themes

XML is more strict and standardized than HTML, and you cannot insert arbitrary HTML and javascript code into your new Blogspot template. Sure you can revert to classic template, but you'll lose your widgets and maybe some of your design.

Of course you can use standard Blogger feature for adding AdSense ads between your posts (Blogger - Template - Page Elements - Blog Posts - Edit - Show Ads Between Posts). After that you can move these ads position using this technique. But sometimes it is not enough: for example you cannot specify channel, you cannot insert AdSense for referrals code. Also you are not able to insert ads from other ad networks (YSM, AdBrite, Chitika) with this method.

Maybe you already have tried to insert some javascript code into your teplate HTML, and on Preview/Save template got an error similar to this:

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.

So why your template could be not valid when something changed? Here is the some of XML requirements:

Basically, to make Adsense code, pasted into blogger template, valid, you need to replace several characters with their XML entities. They are:

HTMLXHTML
>>
<&lt;
&&amp;
"&quot;

Warning: Always back up your template html before changing into a new one!

This change could be quite annoying if doing manually, but we have an online tool for doing this: HTML Escape / Unescape. Frankly speaking, purpose of this tool is not only converting HTML for Blogger templates. It just replaces all special HTML characters into their entities. This is the case when we need exactly the same.

If you view HTML source of resulting blog pages in a browser, you will find the exact same AdSense code that Google provides, without any modification.

Since Google allows only certain number of ads per page, the remaining ads will not be shown if you have several post on same page. They have a logic in their javascript code to suppress the extra-ads display. But it can be reasonable to show not more than 3 posts on the blog's main page.

Disclaimer: Use at own risk. If you have concerns about inserting more than maximum number of ads allowed, you could contact the AdSense team and let them get back to you on their official stand.

Maximum number of AdSense ads, per page (from AdSense Policy):

Ad typeMax count
Context ad unit3
Link unit3
Referral unit3
Search box2
Hint: It may be more efficient to place your AdSense code enclosed into floating div, so you can style and align it with CSS any way you want:
<div>
AdSense Code
</div>

Nevertheless, this method of inserting arbitrary code into template could be used not only for AdSense, Chitika, AdBrite but for any html/javascript (social bookmarking buttons ("Digg it", Stumbleupon button, etc.), any javascript widgets and so on). So if it can accomplished with Blogspot page elements, stick with them, if cannot, you can use the technique described above.

Tags: Adsense HTML
Unique content creation services
About The Author
This article was written by Max Bulber specially for the Webmaster Tips & Tools
Rate This Article
How would you rate the quality of this content?
Currently rated: 3.5 out of 5 stars. 9 people have rated this article.
  • 3.5 out of 5 Stars
  • 1
  • 2
  • 3
  • 4
  • 5
Related Articles
  • Rating: 4.6 stars
    7 Best Google AdSense Alternatives by Radha Krishna Reddy (Mar 10, 2010)
    Google AdSense, a contextual Advertising Network, is the number 1 in Online Advertising Field. Everyone can make good money out of Google's AdSense Ads if they follow the Guidelines and TOS perfectly. This service is completely free and just require a good website/blog to start with...
  • Rating: 4.2 stars
    9 Tricks To Triple AdSense Earnings In 30 Days by Daniel Scocco (Feb 19, 2010)
    I have been using Google AdSense to monetize my blogs and websites for as long as I remember. In fact it was the first method I ever tried (I made a whooping $15 on my first month… back in 2005). Over the years I migrated to other methods (e...
  • Rating: 4 stars
    7 Tips To Earn More With Adsense by Bryan Joseph King (Sep 14, 2009)
    Here is a compilation of some of the best adsense tips that will surely increase your adsense earnings. I know a lot of people use adsense as their source of income so here is the list the i made to help you earn more...
  • Rating: 3.6 stars
    101 High Paying AdSense Keywords by William Lee Wei Liang (Sep 24, 2008)
    To help maximize profits, here is a list of 101 high paying Google AdSense words you can try and use to target the keywords in your content to. It is assuming that as the website owner, you will receive roughly 50% of the total cost per click (CPC) that Google charges its advertisers...
  • Rating: 2 stars
    This article will give you several different ways to increase your Adsense income. The first step is to log into your Adsense account and look at your last months states. There are three key areas that contribute to your earnings: Impressions, Clickthroughs and Effective CPM...