The placement of ads on a website is a very important aspect to maximize the revenue from ads on your blog. Ads placed inside of articles in a standard way i.e in a way that the user can distinguish between the content and the ad is very effective.
In this tutorial we will go through the steps to set-up the blog in a way that an AdSense ad block is automatically added after the page break in a post.
For a demo you can take a look at our blog post, an ad is just right below the last paragraph (it is where we added the page break for this post). It is important for a page-break to exist in the post for this tutorial to be effective.
We assume you add page breaks or more commonly called jump breaks in Blogger, in your blog posts.
Getting started with the tutorial
We are going to make changes to the template code in order to add this functionality so we suggest you to make a backup of your blogger template before proceeding. Check this
tutorial on backing up a blogger templateAdding the Google AdSense Script.
You may have noticed that you the AdSense script is given with all of your AdSense Ad snippet though AdSense implementation guide tells us that only loading it once is sufficient enough for all ads to work.
The script that we are talking about is wrapped in this line of code, you may have noticed it several times if you have worked with AdSense codes which we assume you have.
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
We will be adding this script in the head of the blog's template so that our automatically added ad works properly.
- Open your Blogger Dashboard > go to the Theme section
- Click on Edit HTML button for the template's code show up
- When you are in the template code editor, hit CTRL+F / CMD+F to open search box and search for
</head> - Copy the following line of code and paste it immediately above
</head>
<script async="async" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
- It should be something like this :
Finally click on Save theme
Preparing the Ad Slot
Next task is to prepare the code that we will be inserting into the blog post after jump break. It is suggested that you use a responsive ad unit because that works the best on even mobile devices, still you are free to choose any that you like, the choice makes no difference.
Create your Ad unit in AdSense and click on "Get code", you will get the ad code which should look something like :
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- My Responsive Ad Unit -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="xxxxxxxxxx"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
Now, we do not need all of that, only the part that is highlighted i.e line 3, 4, 5, 6 and 7. Open up a notepad / textEdit window and paste your ad code and remove the excess code. You will be now left with:
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="xxxxxxxxxx"
data-ad-format="auto"></ins>
Finally, we now have to edit this code a little bit that is to remove the line breaks in the code, we will be putting this code inside of a JavaScript code as a string so we need it to be without line breaks. Simply use a text editor and remove the line breaks, so the final code would look like this -
<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-xxxxxxxxxxxxxxxx" data-ad-slot="xxxxxxxxxx" data-ad-format="auto"></ins>
All on only one line, that is what we need. Keep this code with you, in the next step (which is the final, that's a promise) we are going to need it because it is what we will be inserting using JavaScript code.
Adding the main JavaScript Script for making this work
The last steps may have been a lot tedious, we can understand, but we are almost done, just a few more steps.
This following script is what we need to actually insert our ad unit's code inside of the blog post after jump breaks automatically.
<script type="text/javascript">
// <![CDATA[
document.addEventListener('DOMContentLoaded', function(){
// we look for the jump break
var _moreElm = document.querySelector('a[name=more]');
// here is your adsense code
var _adsenseCode = ' [replace this with code from the last step] ';
// This inserts the ad inside of the blog post
_moreElm.insertAdjacentHTML(
'afterend',
'<div class="adsense-after-break">' + _adsenseCode + '</div>'
);
// Initialize the ads here
(adsbygoogle = window.adsbygoogle || []).push({});
});
// ]]>
</script>
For now copy and paste this into your text editor. There's only one single line that you have to change so that this code works. That is the line 9 (highlighted in the code)
var _adsenseCode = ' [replace this with code from the last step] ';
Delete
[replace this with code from the last step] and paste the ad unit code from the last section so it looks like this
var _adsenseCode = ' <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-xxxxxxxxxxxxxxxx" data-ad-slot="xxxxxxxxxx" data-ad-format="auto"></ins> ';
After you've made the necessary changes as explained above we are all set to include it in the theme code. Follow the steps below
- Go to Blogger Dashboard > Theme section
- click on Edit HTML
- In the template code editor hit CTRL+F / CMD+F and search for
</body> - Paste the code we have immediately above
</body> and save the theme. The code would look something like this when in place
That's it! You've done it. Now reload your blog and go to a blog post to see the ad appear automatically in your blog post.
In case it doesn't seem to work then make sure
- that you have JavaScript enabled and there is no ad blocker enabled.
- that you have a jump break in your post
- that your ad unit is active. New ad units may take some time to start showing ad.
Bonus: A little styling
The following CSS will add margins around the ad unit and also a border for users to visually distinguish between the content and the ad.
.adsense-after-break {
/* margin and the padding */
margin: 0.5em 0;
padding: 0.5em;
/* Center align */
text-align: center;
/* Following styles the border */
border: 1px dashed #ccc;
border-width: 1px 0;
}
Copy the CSS code above and then
add it to your blogger theme.
We hope you find this tutorial helpful. If you have questions / suggestions or feedback feel free to comment down below.
section
