Instructions on how to insert the AdSense ad code displayed at different locations and pages in Blog, Blogger, Blogspot and Website HTML CSS JavaScript.
After your AdSense account is activated the next step is to set up automatic ads and create custom ad codes that are inserted in the appropriate places of different pages in your Blog. Depending on each page, choose the appropriate ad code (ad type, custom size...)
Inserting multiple ad codes into a page will make the page load slowly and the ads won't cost much, with a maximum of 3 to 4 ad codes per page should be inserted
Absolutely do not insert advertising code in the drop-down menu, popup dialog box
Currently besides auto ad type in ad units there are 3 types of ads (new account)
Text and display ads
In-feed ads
Advertise in articles
Based on 3 types of ads can be arranged on the following pages:
1. Text and display ads
Insert header in widget just below menu get size 970x90 after get code to fix 970px to 100%.
Sidebar insert in vertical, responsive and custom size banner display type widget
2. In-feed ads
Insert between articles on the homepage depending on the design to get the appropriate display type
3. Advertise in articles
Insert in the article under the title, under the quotation mark, at any position that can center the post, at the foot of the article, depending on the design, get the appropriate display type.
Instructions for Inserting the Ad Code in Blogger
The insert text ads and display ads on the top of the page, the sidebar simply inserts the code into the widget, so I don't guide.
Instructions for inserting promo code between articles on the homepage
In addition to the homepage, you can insert the ad code into other pages of the index page group, this method will set conditions in the loop of articles.
You go to edit the template template, choose to go to the Blog1 widget, choose to expand the tag pair <b:includable id='main'>, you add index='item' inside the <b:loop values='data : posts' var='post'> to <b:loop index='item' values='data:posts' var='post'>
Next, just below this b:loop loop, you add the following code
<b:if cond='data:view.isMultipleItems'> <b:if cond='data:item== 3 '> <div class='post'> <!-- AdSense ad code Here --> </ div> </b:if> <b:if cond='data:item== 6 '> <div class='post'> <!-- AdSense ad code --> </div> </b: if> </b:if>
In which the numbers 3 and 6 are the ad display positions after the 3rd and 6th posts, if the homepage has many articles such as 20, you can change the position accordingly, such as after posts 5. , 10, 15
<b:if cond='data:view.isMultipleItems'> <b:if cond='data:item== 5 '> <div class='post'> <!-- AdSense ad code --> </ div> </b:if> <b:if cond='data:item== 10 '> <div class='post'> <!-- AdSense ad code by TrickPk --> </div> </b: if> <b:if cond='data:item== 15 '> <div class='post'> <!-- AdSense ad code --> </div> </b:if> </b: if>
Instructions for inserting the ad code into the article
You can insert the ad code under the title (not recommended), under the quotation mark, in any position that can center the post, at the foot of the article.
1. Insert Ads under the title:
This is simple, you just need to find the <h1> title tag, it is usually in the <b:includable id='post' var='post'> tag pair and insert the ad code right below it.
2. Insert Ads under page break (jump break)
In this section, few people pay attention to insert a quotation mark or there is an inserted post with a post that you forgot to insert, but that's okay, you can still insert the ad code below, if the post you add a break, the ad will be displayed right below and the post is not inserted. ads are not displayed. You insert the following code just below the <data:post.body/> . tag
<div class='adsense1'> <div id='ads_Code'> <!-- AdSense ad code --> </div> </div>
Continue to insert the following script before </body> tag.
<script>//<![CDATA[ $(function() { var more = $('a[name="more"]') if (more) { $('#ads_Code').appendTo(more) } else { $('.adsense1').empty() } }) //]]></script>
3. Insert Ads at the Bottom of the Article
It's also simple, you just need to insert the ad code just before <div class='post-footer'></div> or just below the <data:post.body/> tag is the same because this tag is always on post- footer
4. Insert Ads in Any Position Blogger
This way you insert the id in the position where you want to display the ad, maybe mid-post as follows:
Insert the following code just below the <data:post.body/> . tag
<div class='adsense2'> <div id='ads_Body'> <!-- AdSense ad code --> </div> </div>
Continue to insert the following script before </body>
<script>//<![CDATA[ $(function() { var ads = document.getElementById('AdSense') if (ads) { $('#ads_Body').appendTo(ads) } else { $(' .adsense2').empty() } }) //]]></script>
When writing a new post or editing an old one, you need to add the code <div id="AdSense"></div> to the position you want to display in the HTML editing frame of the article.
The requirement in the template needs to have the jquery library, this most of the blogs have you check, if you don't see it, insert it before </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
In addition, you should also use the following mobile conditions:
Condition to only download code on mobile (?m=1)
Conditions of not loading on mobile (?m=1)
<b:if cond='data:blog.isMobileRequest'> <!-- AdSense ad code --> </b:if>
<b:if cond='!data:blog.isMobileRequest'> <!-- AdSense ad code --> </b:if>
That's all about Insert Google AdSense code displayed at different positions, pages in Blog, i hope you would like it.