The image looks like this.
This script will automatically display ads in your posts once you set them up the first time.
In addition, you can optionally specify the position and number of ads to be displayed so that you can control the display of ads to your liking.
The following is an introduction to how to use this feature.
1. Creat In-article ads
First, create an ad unit to be displayed in the article. Log in to the Adsense management screen and follow the steps below to create in-article ads.
1. Click [Overview] from the left menu.
2. Click [In-article ads] from By ad unit.
3. Enter the unit name, etc., and click [Save and Get Code].
4. Make a note of A and B. Click [I'm done].
2. Back up your Theme
From here, you can start working with Blogger.
Before we start, let's back up the current Theme just in case. Here's how to do it
1. From the Blogger admin page, click [Theme] -> [Backup].
2. Click [Download].
※If you mistake and break the HTML, you can restore the downloaded Theme to its original state.
3. Paste the script into the blog theme
1. From the Blogger administration screen, select [Theme].
2. Click [Edit HTML] On the theme screen,
3. Add the following Code just before </body>.
<b:if cond='data:blog.pageType == "item"'> <!--adsenceInPostScript--> <script> ;(function() { // Please replace the A and B places with your own information. // For a description of each option. Check "https://www.digitalnomad-book.com/2022/02/google-ads-between-paragraphs-in-blogger.html". var options = { adClient: "ca-pub-A", adSlot: "B", adFormat: "fluid", adLayout: "in-article", targetNumbers: [2, 5], selector: ".widget.Blog h2", beforeText: "スポンサーリンク", marginTop: "10px", marginBottom: "10px" }; function appendAd(c,b){var e=document.createElement("div");e.classList.add("adgoogle-wrapper");e.style.marginTop=options.marginTop;e.style.marginBottom=options.marginBottom;var a=document.createElement("small");a.textContent=options.beforeText;var d=document.createElement("ins");d.className="adsbygoogle";d.style.display="block";d.style.textAlign="center";d.dataset.adClient=options.adClient;d.dataset.adSlot=options.adSlot;d.dataset.adFormat=options.adFormat;d.dataset.adLayout=options.adLayout;var f=document.createElement("script");f.text="(adsbygoogle = window.adsbygoogle || []).push({});";e.appendChild(a);e.appendChild(d);e.appendChild(f);if(e!=null){before(c,e)}}function before(a,c){var b=a.parentNode;if(b!=null){b.insertBefore(c,a)}}var elements=document.querySelectorAll(options.selector);var cnt=1;for(var i=0;i<elements.length;i++){if(options.targetNumbers.indexOf(i+1)>=0){appendAd(elements[i],cnt)}}; })(window); </script> <!--adsenceInPostScript--> </b:if>
4. Rewrite the client ID and slot number with your information.
Rewrite the A, B with your information.
- adClient: "ca-pub-A"
- adSlot: "B"
In the Adsense management screen, put the content of the part surrounded by a red frame from the ad code displayed when you created the "In-article ads" into the place of A, B.
5. When you are done editing, Click [Save Theme].
4. Try it out
After incorporating the script above, go to your blog. You will probably see ads in between the paragraphs of the article.
Also, the ads are controlled to be displayed only on the article page. Therefore, please check the article page, not the top page.
The ads may not be displayed immediately after the ad unit is created.
If they are not displayed, wait a while and try again.
By the way, I am displaying ads under the Two and Five, Nine paragraphs.
5. Decorate with CSS
The HTML generated by this script is as follows, although you may not want to decorate it much since you are only displaying ads.
<div class="adgoogle-wrapper" style="margin-top:10px; margin-bottom:10px;"> <small>Sponsored Link</small> <ins class="adsbygoogle" data-ad-client="ca-pub-xxxxxxxxx" data-ad-slot="xxxxxxxxx" data-ad-format="fluid" data-ad-layout="in-article" style="display: block; text-align: center;"></ins> <script>(adsbygoogle = window.adsbygoogle || []).push({});</script> </div>
The class attribute "adgoogle-wrapper" is added to the "div" tag surrounding the ad unit to be easily decorated with CSS.
6. Explanation of options
There is a field in the script to describe the following options. You can change the number of ads to be displayed, margins, etc.
var options = {
adClient: "ca-pub-xxxx",
adSlot: "xxxx",
adFormat: "fluid",
adLayout: "in-article",
targetNumbers: [2, 5],
selector: ".widget.Blog h2",
beforeText: "Sponsored Link",
marginTop: "10px",
marginBottom: "10px"
};Here is a detailed description of each option.
adClient / adSlot / adFormat / adLayout
Specify the content of the Code displayed when creating the Adsense ad unit.
targetNumbers
Specify the paragraph number in which to insert the ad in the article.
The ad will be inserted just before the paragraph with the specified number.
Example: If [2, 5] is specified, the ad will be inserted just before the second and fourth paragraphs.
selector
Specify the CSS to extract the paragraphs in the article.
Usually, you do not need to change this setting.
beforeText
Specify the text to be displayed in the label on the ad.
According to the Adsense rules, only "Ad" and "Sponsored Link" are allowed in the label.
Therefore, you can either leave it blank or specify one of the above two.
marginTop
Specify the margin at the top of the ad.
Under the terms of Adsense, the confusing placement that does not distinguish between content and ads may violate the terms.
marginBottom
This specifies the margin at the bottom of the ad.
Together with marginTop, this should also be set at an appropriate margin.
7. Precautions
When using this script, please do so at your own risk. We will not be held responsible for any policy violations that may result from this script.
I hope this is useful for you.
To learn more about blogger, check out the post below.
