After the custom size, I had been trying to put back the ads in between posts.
Warning
Disclaimer This post requires knowledge of HTML and JavaScript, and I do not take any responsibility of anything you done to your website with contents on this blog post.
At first, I unchecked “Show Ads Between Posts” in Blogger, the function provided by Blogger, just to make sure I didn’t violate the policy after inserted two custom size ad units. Since the new ones are Display ads, so I decided to re-enable the ads in between posts with “Five Link Units,” but I always gets “Please correct the errors on this form” error message. After some searching answers on the forums, some said it’s known issue and still unresolved, posted around September 2013.
Originally, I was thinking to reuse Blogger’s ad code:
<b:if cond='data:post.includeAd'>
<b:if cond='data:post.isFirstPost'>
<data:defaultAdEnd/>
<b:else/>
<data:adEnd/>
</b:if>
<div class='inline-ad'>
<data:adCode/>
</div>
<data:adStart/>
</b:if>
Without the first if check, it renders out the content, but it’s kind of too risky since I don’t know how it actually does the job. Better off something I don’t understand, better safe than sorry.
Seeing this kind of unreliability of Blogger about broken ad type option, either I drop the idea to put back the ads or do the ad placing on my own. The only thing I must be carefully is not to over-inserting the amount of ads, that’s three link units.
I am not going to teach you how to it, you need to know about your HTML and JavaScript, but here is the code.
<div class='wrapper' style='margin-top: 1em'>
<!-- yjlv-posts-top-60 -->
<ins class='adsbygoogle'
style='display:inline-block;width:640px;height:60px'
data-ad-client='ca-pub-1234567890123456'
data-ad-slot='1234567890'></ins>
</div>
<!-- ..... -->
<div class='wrapper' style='margin-top: 1em'>
<!-- yjlv-posts-bottom-60 -->
<ins class="adsbygoogle"
style="display:inline-block;width:640px;height:60px"
data-ad-client="ca-pub-1234567890123456"
data-ad-slot="2345678901"></ins>
<script>
</script>
</div>
<!-- ..... -->
<script async='F-Blogger' src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'/>
<script>
$(function(){
// <!-- yjlv-posts-top-60 -->
(adsbygoogle = window.adsbygoogle || []).push({});
// <!-- yjlv-posts-middle-links -->
$('article:lt(3)').each(function(){
$(this).after($("<div class='wrapper' style='text-align:center'><ins class='adsbygoogle' style='display:inline-block;width:468px;height:15px' data-ad-client='ca-pub-1234567890123456' data-ad-slot='3456789012'></ins></div>"));
(adsbygoogle = window.adsbygoogle || []).push({});
});
// <!-- yjlv-posts-bottom-60 -->
(adsbygoogle = window.adsbygoogle || []).push({});
});
</script>
</body>
I edited the data-ad-client and data-ad-slot just in case someone recklessly copy-and-pastes.
The code is using the relatively new async script for AdSense tagging, asynchronous ad code to load the ads. With the help of jQuery’s selector to limit up to 3 <article/> elements and insert the <ins/> elements after the posts within wrappers, just to have a better layout.
If you use Blogger, then you need to get async attribute a value since template is an XML, why would I use async="true" or async="async" when there is more proper value async="F-Blogger"? The meaning of the “F” is left for your imagination.
I am certain my modification completely conforms to the guideline, since it’s the same feature that Blogger has been providing.
Again, I’m not teaching you how to do this, this is just a showcase that you could automatically insert certain amount of ads without violating the policy. There is nothing special about the code, just simple JavaScript and jQuery. The lack of official developer documentation is why I write this blog post.
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.