Trouble Adding AdSense Code for Page-Level Ads? Learn how to fix it.

In order to add the Page-Level ads functionality from AdSense on your Blogger blog you are required to place a code that AdSense provides which is :

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"/>

Unfortunately if you have tried placing the code in your theme you may have run into this error that states:

Error parsing XML, line n, column n: Attribute name "async" associated with an element type "script" must be followed by the ' = ' character.

That's a bit annoying - What could be going wrong with the code that AdSense (a Google product) has provided is causing error on Blogger (another Google product).

The problem is highlighted in the error message itself "Attribute name "async" associated with an element type "script" must be followed by the ' = ' character."

Attribute name "async" in the code we got must be followed by a '=' character. But the code we got simply has <script async  ... />

So what can be done? Modify the code to be parsed by Blogger's theme parser correctly. Here's the code with a little change, we replaced async with async="async" to make the code a valid XHTML markup.

<script async="async" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

Place this code in your Blogger theme code and save. It should work properly now.

Why do we have to use this "hack"?

This shouldn't even be considered as a hack. This is plainly a case where a valud HTML5 markup is not parsed as a valid XML / XHTML markup. 

Yes, our blogs are HTML5 in the end when it gets loaded on a web browser, but the code that runs in the background is XHTML, and the thing with XHTML is that it is very strict about the markup language. In HTML5 you can simply leave out a value from a attribute or leave an HTML element unclosed and it will still work. 

But XHTML won't. What's valid in XHTML is also valid in HTML5, so this don't need to be considered a hack or even a workaround. AdSense provides the code that is totally HTML5 compliant only it didn't anticipate the case where users may want to add the code to XHTML templates.

Will it have any impact on the way this code is supposed to work?

Other than having a few extra characters in the code you had to add, no. This change wouldn't affect anything how AdSense is supposed to work. We just made the code compliant with XHTML to be taken in by Blogger.

Solving Blogger Template Error for AdSense Ad Implementation

If you are recently enrolled in AdSense and you are trying to implement ad code that you got from AdSense directly in your Blog's template you might have run into problems, we will walk you through fixing it.



If you are trying to add code from AdSense which looks something like this (there is a difference between the two codes, which we will explain)

Demonstration of the ad code in Blogger template and the error that occurs

<script async src="//pagead2.googlesyndication.com/
pagead/js/adsbygoogle.js"></script>
<!-- leaderboard -->
<ins class="adsbygoogle"
    style="display:inline-block;width:728px;height:90px"
    data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
    data-ad-slot="1234567890"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

OR

<script async src="//pagead2.googlesyndication.com/
pagead/js/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

The the only difference between the two snippet is that the first one displays an ad, whereas the second one is used only to load AdSense's JavaScript files.

In many cases to improve page load speed you just want to load the scripts once because AdSense ad codes always include the ad-block HTML code as well as the scripts. Or when you are enabling Page Level Ads the script tags needs to be added in the template once, the following code is give, which you are supposed to implement in your Blogger's template / theme

The error that you might be getting when trying to add these code snippet in your template is

Attribute name "async" associated with an element type "script" must be followed by the ' = ' character. 

Fixing the error

There's nothing wrong with the code, according to HTML5's standard it is an error free code, but Blogger's template / thee is coded in XML and it fails to parse it because of a small part in the codes

Right now we have (note that we are only displaying the part of code that requires modification, rest should be left untouched),

<script async src="//pagead2.googlesyndication.com/
pagead/js/adsbygoogle.js [...]

The problem here is that the "async" attribute has no values passed into it, for e.g "src" has a "=" sign with a value in it. All we need to do is pass a value to the attribute and Blogger will accept it.

<script async="async" src="//pagead2.googlesyndication.com/
pagead/js/adsbygoogle.js [...]

Notice the difference between the two snippets. We have set it async="async", that makes it comply with XML thus Blogger accepts it and saves the template without any error.

That's pretty much everything to it. Follow the steps given above and save the template, it must parse the code without any problems. If you are facing problems implementing ad-code other than this then don't hesitate to let us know in the comments (add a screenshot for better help)

Adding AdSense Ad Inline With Post in Blogger

There are numerous tutorials and tips on increasing revenue on AdSense by using different ad placement techniques and practices, many of them work great, but Ads in the main body content is one of the most vital place.

Ads placed in post body can make a significant difference in the revenue but you have to do it wisely, it is where the main focus of a site's visitor is for most of the time during their visit so it is important to make sure the experience is not obstructed for the visitor due to the ads.

In this tutorial you will learn a simple way to add AdSense ad in your post and have it display in a good manner that is by floating the ad to a direction and have the paragraphs wrap around it.

Set Things Up

You can simply paste an Ad code in the post editor and the ads will appear but that isn't always what you need. How about floating it to the left or the right so the text wraps around it? We are going to learn just that by using simple markup and CSS so you can selectively add the Ads to any post at the best position you like.

Add The CSS Styles

We will get onto the main part where you have to work with the ad codes later before that let's set a few lines of CSS that is going to complement the box which is going to contain your Ad. This tutorial is meant for square ads only.

/* By default it floats to left */
.ad-container {
    float: left;
    padding: 10px 0;
    padding-right: 10px;
}

/* For ads floating to the right */
.ad-container.right {
   float: right;
   padding-left: 10px;
   padding-right: 0;
}

/* Centered Box */
.ad-container.center {
    float: none;
    padding: 10px 10px;
    text-align: center;
}

/* Clearing floats */
.ad-container br {display: none;}
.ad-container:after, .ad-container:before {
    content: "";
    display: block;
    clear: both;
}

If you are not sure where to add this CSS code please check the guide on adding CSS to a Blogger blog

The HTML Container

What does this do? Well, you can, as I already mentioned, paste the Ad Unit's code provided by AdSense in the HTML mode in the post and the ad will start appearing but you get a very little and not-an-easy option to position the ad as you like. With this you can.

Copy the following code and have it saved in your favorite text editor so you can use it in the next steps easily.

<div class="ad-container">
  <!-- Paste your code here -->
</div>

The HTML markup is simple, just put your AdSense code between the first and the last line i.e where <!-- Paste your code --> is and that is it.

You need to know a small thing if you want to have the ad centered to floated to the right as by default it floats to the left. Check the following line of codes trimmed from the HTML markup provided above.

<div class="ad-container center">

We added the keyword "center" in side the class="" attribute. If you want the ad to appear centered then you have to add it too to your markup.

<div class="ad-container right">

In case you need it on the right just add "right" in there and that's it. Simple!

Once you have this markup ready with your AdSense Ad code you may proceed to the new steps that guides you through adding it to the post through post editor.

Put The Final Code In Post

By now we assume that you have finalized the code i.e edited the markup and included your ad unit code where described.

To put it into your post click on the "HTML" button when you are in the post editor

After switching to the HTML mode paste your code around the text where you want it to appear. Mostly ads are put at the start of the blog post but if you wish you can put anywhere for example at a position where you know the readers are going to spend most time reading or focusing. 

Make sure that when you paste the code anywhere in the post in HTML mode you paste it outside a <span> or <div> tag that may be there to contain some other text or paragraph/image.

For any further help on this you may use the comment box below to let me know. 

Infolinks getting into the HTML5 mode

Since the start of 2012, HTML5 and CSS3 took over the internet and the two most popular website Google  and Facebook painted them with HTML5 and the CSS3 and that was not the end many small sites also began to redesign. Interface in any website with HTML5 support is more easier and that's what Blogger, Google, Facebook and many other sites. Now Infolinks the most famous intext advertisement program is also added in this list.
Infolinks says the new publisher interface is currently in beta. The design overall looks elegant and more like Google's interface but the only thing i am missing is the light blue trademark color of Infolinks.

Infolinks doesn't look really Infolinks without it's light blue color on the user interface. But the Infolinks new user interface doesn't seem to be fully HTML5, i mean to say that the dynamic feature a user interface must have isn't in the new user interface.

At the start of this post i said with HTML5 and CSS3, but there could have been more improvements made with the latest standards of these languages.

Apart from the looks, quick loading of pages in a user interface is important to keep the user engaged, using AJAX will give them loading without refreshing the page again. They have used background images with pictures instead of using simple gradient property.

The conclusion is that whoever was appointed to design the interface knows coding well but don't have creativity and they don't know how can a website look good.

If you want me to design your site then visit my contact page.

Earnings Tab Not Enabled for my Blogger Blog

There are numerous posts in the Blogger Help Forum about the disappearance of Earnings tab in the Blogger Dashboard. But it's not an error from the Blogger system, there's a reason behind it.
It's obvious to get worried when things are different from what it looks in general. The 'Earning' tab is basically in Blogger to help AdSense publisher connect or apply AdSense for their Blogspot blog. It just saves time and you can view your earnings up to date with the help of the Earnings tabs, it's for ease.

People new to blogs are unfamiliar with how Blogger and AdSense works, they can't usually differentiate between them and that is what creates the confusion. Blogger and AdSense are two different products of Google, AdSense has been integrated into Blogger for blogger users to apply for an AdSense account directly from their Blogger Dashboard and not only create an account but also check the earnings and stats.

Why it's showing

Now you know that AdSense(which is the main component of the Earnings tab) and Blogger is different and their policies and terms are different too. The main reason as told by the Blogger support is that, if your language is not supported by AdSense then the Earnings tab won't be enabled in your Blogger Blogs Dashboard.

You can check the Blogger Help guide 'Earnings tab' section to know more about it's terms and conditions
http://support.google.com/blogger/bin/answer.py?hl=en&answer=1269077
Or
Check the languages supported by AdSense currently
http://support.google.com/adsense/bin/answer.py?hl=en&answer=9727    

10 Reasons to use Infolinks for you site

Infolinks, an In-Text ad serving network started in May 2007 by a small but talented team of Engineers has become a big name today.
Infolinks is a very big name today and Millions of Publisher are happily earning with Infolinks. Infolinks is popular for it's in-text ad format, which is very compact and useful, as it don't take much space, the ads are in your texts and thus your visitors can easily view an ad.

There are many more ad serving programs, the problem with other ad serving programs is that they have a big Policy guidelines which is not easy for a person to read and understand the whole Policy, whereas Infolinks have a small but a policy that defines everything, the Policy page uses simple English that anyone can understand and keep in mind.

I was very excited to write this article about Infolinks to tell my readers about Infolinks and why should they use it, because Infolinks is 40% source of my monthly income and the only ad serving program i use, the Infolinks earning is enough for me to run my blog.

10 Reasons why you should use Infolinks

1. Great for small blogs and websites, no other ad program supports small websites but Infolink does.
2. Not too big Privacy Policy like the other's programs.
3. Infolinks engineers are always ready to help in real time through email, you don't get automated emails from computers, talk to the real peoples.
4. They offer payments through Paypal which is a great option for people who wants their payment to reach them fast.
5. Integration procedure is very easy, put the JavaScript code once in your template and then customize how your In-text ads should look.
6. More other ad options along with the in-text ads like Tag Cloud, Related Tags and search widget. 
7. Industry's highest paying ad network upto 70% revenue
8. Your visitors won't be annoyed with the in-text ads as it's on visitor to see the ad or not.
9. Technology is great, your visitors get to see relevant ads of their interest
10. Last but not the least, they don't have a policy such as 'We may deactivate your account at any time for any reason', at least Infolinks won't delete your account if your hair color is blue ! 

This is Infolinks in my views and it's the best if you take opinion of small publishers like me.
This was a quick review of Infolinks by one of it's small but happy publisher.