Adsense is no doubt one of the most trustworthy and powerful money making tool for Bloggers or Web Masters. Every Web master knows that getting approved by Adsense is not the ultimate key for earning a good amount of money! To make the most out of your site you need to place the Ad-Codes properly at the perfect spots on your Web Site!
Now for placing ad codes we have a complete freedom on WordPress blogs or in our own web-sites. But if we are using the default Gadget on Blogger, then we are pretty limited by the Layout of the blog! Now you may ask how to put the adsense code in the way we want to, on blogger? Since now you should have noticed that Although I have been using blogger I have put my ad-sense code on the places I want just like any other General Websites or WordPress blog!
So, lets learn how to do that in Blogger XML template. After this tutorial we shall know:
- How to put the Adsense code directly on the blogger template for maximum exposure;
- Making the ad-codes appear conditionally on specific pages of your blog;
- Put ad codes in between Post Body and Post Title and also below Post Body for maximum exposure;
So lets see how we can do that…
Preliminaries and Strategies:
Ok, Lets strategize the positioning first! We shall be keeping the following points on our mind:
- Ad sense allows us to put only 3 Ad-Contents and 3 link units. We shall take full advantage of it and make sure that we do not violate any rule!
- So we shall put a rectangular ad (336×280) above every post just below the Post Title. Also we shall add a 468×60 rectangle box below post with two link list- one 468×15 and another 120×90.
- Obviously we shall be properly aligning them using a Table layout.
Obviously you can make your own strategies. Think on it, do some research and when you have finalized go to your Adsense Account and do the followings…
- Go to Adsense Setups and make a new AdSense for Content
- Select Ad unit Type as “Text and image ads(default)” and Continue
- Now select the Ad Format as we have decided before and do the necessary modifications for blending your adsense ads into your template (HINT: If you are using a light template or theme then select 000080 as the Title Color Code).
- Click on continue and Adsense will prompt you about making a channel! I recommend that you should make a new channel in order to track your adsense performance! Once done click on save and you will get your code.
Do the same process for making other Ad content units and link units. Paste all the generated codes on Notepad++(recommended) or Simple Notepad and keep it handy for future use.
Placing the Ad-codes properly on your Blogger Template:
Now we shall place the Ad-codes in such a manner that
- The ad-codes shown above and below the post should appear only on inner post pages. This is a must in order to follow the Ad sense TOS.
- We shall align the ad content units and ad link units properly using a Table
Now the proper alignment depends on what strategy you are going to use! But for now I am sharing the codes needed for the strategy I have mentioned above:
Converting the Ad-codes into escaped characters:
This is a must to put your code into blogger template…
- If you are using Notepad++ then just Select the whole code and go to TextFX > TextFX Convert > Encode HTML (Just as shown on the image below) and you are done!
- Or you may use our Online HTML Encoder/Decoder Tool. Just Enter the code with the following preference and click on generate! Now just save the generated code… (Note: Do remove the Gigya default Tracking img snippet from the code you have generated)
- Or manually also you can replace all “<” sign with “<” “>” sign with “>” and “”” sign with “"” (Of course with out the quote);
Do the same for all the codes you are going to put in your blogger template and save it somewhere to keep it handy for future use.
Inserting the code on your Blogger Template:
Now comes the most interesting part! Pretty much easy though!
- Go to Blogger Dashboard > Layout > Edit HTML and Click on “Expand Widget Template”.
- Now find the following piece of code on your Template:
- Replaceit with this:
- Make sure that you have replaced the lines <!—Replace this with *X* … ad-code -–> with the codes you have generated before!
Save, Preview and you are done! Now that was easy isn’t it?
Understanding the code to do a little bit of your own modification:
- The line <b:if cond=’data:blog.pageType == "item"’> instructs the blogger XML Parser to parse the code in between this tag and the closing </b:if> tag only if ,the page type is a separate post page! Means your ads will appear only on the inner pages of your blog! This makes it sure that we are not violating any adsense TOS
- The table layout below the <data:post.body/> makes the ads appear like this
- If you want to align the rectangular code above the post body then just before the <data:post.body/>paste the code like this:
- Obviously you can change the float: left to float: right to make the ad appear aligned right with your post body! Play with the margin as well until you get your satisfaction.
Once done click save and see your ads appearing on hot spots on your blogger blog!
Adding other Ads on your blog:
Now this totally depends on your strategy! After making the above modification we have 1 link ad unit and 1 ad-content unit left! I have made the following use of them:
- One Link List ad below the navigation menu of course maintaining the Google Adsense Accidental Click Policy
- One Vertical ad-content on the columned sidebar!
Well that was my strategy! Play with the placement a little bit and make your own strategy which suites you the best! If you already have a better ad placement strategy than this, then do share it with us!