Make 3 Ads Appear according to Paragraphs and Editable on Layout, for Blogger Layout v3
The trick this time is related to an ad slot that is specifically located in the middle of a post / article (post page), but can be edited via the Layout menu or Blogger Layout. The advantage of this ad slot widget can be set to appear in certain paragraphs. The way of implementing it is still similar to the tutorial that I shared before, namely Tricks to be able to edit ad code in the posting section on the Layout menu . It's just the difference, this time I applied it to the Blogger layout version 3 ( ). So, this method won't just work in normal HTML.b:defaultwidgetversion='2' b:layoutsVersion='3'However, if you already understand a little bit of HTML code, it will be very easy for you to tinker with this and apply it to the old html types. Because in fact it only needs a few changes to the html part of the widget caller, which can be configured in the layout.
Why did I choose to apply it in Blogger layout version 3? Because in the latest Blogger layout, there are buttons to activate and deactivate the widget.
Which if applied to a special ad slot that appears after a certain paragraph in the post, we are free to choose whether we only want to display 2 ad slots in the middle of the post, only one ad, or even 3 ads at once, through the active and inactive buttons (tick).
The button I mean is like in the following image:
So, what do the 3 ad slots look like after a certain paragraph, whose number of paragraphs we can also edit? More or less the appearance in the layout is as in the following image:
Information:
- Each of the same color is for one ad slot.
- The first widget (of the same color) is where the ad code is placed.
- The second widget (in the same color) is where the paragraph numbers are set.
The way to apply is as follows:
Warning!
- Make sure you are using the Blogger layout version 3 html structure. Otherwise, this tutorial will not work, just useless!
- The Blogger layout model version 3 is like the image above.
Step 1
Go to Themes> Edit HTML
Step 2
If the boundary between MAIN and SIDEBAR in your HTML structure looks like in the following image;
Then put the following code above the code
</main>. If it doesn't look like the picture, just put the following code above the code <aside>or above <aside id='sidebar-wrapper'>(it's up to you to put it anywhere, as long as it's not in Blog1 and it's still above the code </body>)<b: if cond = 'data: view.isSingleItem'>
<script type = 'text / javascript'>
function insertAfter (tbh, tgt) {
var prt = tgt.parentNode;
if (prt.lastChild == tgt) {prt.appendChild (tbh);}
else {prt.insertBefore (tbh, tgt.nextSibling);}}
var tgt = document.getElementById (& quot; tgtPost & quot;);
var midAd1 = document.getElementById (& quot; middleAds1 & quot;);
var midAd2 = document.getElementById (& quot; middleAds2 & quot;);
var midAd3 = document.getElementById (& quot; middleAds3 & quot;);
var showAd1 = tgt.getElementsByTagName (& quot; br & quot;);
var showAd2 = tgt.getElementsByTagName (& quot; p & gt; & quot;);
var showAd3 = tgt. getElementsByTagName (& quot; p & gt; & quot;);
// <! [CDATA [
$ (document) .ready (function () {$ ('a [name = "ad-center-post-slot1"]'). before ($ ("# paragraph-ad1 .widget-move"). html () ), $ ("# paragraph-ad1 .widget-move"). html (""), $ ('a [name = "ad-center-post-slot2"]'). before ($ ("# paragraph- ad2 .widget-move "). html ()), $ (" # paragraph-ad2 .widget-move "). html (" "), $ ('a [name =" ad-center-post-slot3 "] ') .before ($ ("# paragraph-ad3 .widget-move"). html ()), $ ("# paragraph-ad3 .widget-move"). html ("")})
//]]>
</script>
</ b: if>
<div id = 'ads-by-paragraph' style = 'display: none'>
<b: section class = 'ad-per-paragraph' id = 'paragraph-ad1' maxwidgets = '2' name = '[slot 1] After the paragraph X 'preferred =' yes'>
<b: widget id = 'HTML453' locked = 'true' title = 'Ad Code' type = 'HTML' version = '2' visible = 'true'>
<b: widget-settings>
<b: widget-setting name = 'content'> <! [CDATA [<img src = 'https: //1.bp.blogspot.com/-PTXaXsp-rZQ/WzIjfENwAFI/AAAAAAAASoA/XqdSJFqbGI0R2sks9dfMhvsztV6uA-DlQCLc300 /template-themeindie.png '/>]]> </ b: widget-setting>
</ b: widget-settings>
<b: includable id =' main '>
<div class =' widget-content widget-move ' >
<data: content />
</div>
</ b: includable>
</ b: widget>
<b: widget id = 'HTML454' locked = 'true' title = '[set] Show after paragraph X' type = 'HTML' version = '2' visible = 'true'>
<b: widget-settings>
<b:widget-setting name = 'content'> 3 </ b: widget-setting>
</ b: widget-settings>
<b: includable id = 'main'>
<div class = 'widget-content'>
<script type = 'text / javascript'>
if (showAd1.length & gt; 0) {insertAfter (midAd1, showAd1 [<data: content />]);}
if (showAd2.length & gt; 0) {insertAfter (midAd1, showAd2 [<data: content />]);}
if (showAd3.length & gt; 0) {insertAfter (midAd1, showAd3 [<data : content />]);}
</script>
</div>
</ b: includable>
</ b: widget>
</ b: section>
<b: section class = 'ad-by-paragraph' id = ' paragraph-ad2 'maxwidgets =' 2 'name =' [slot 2] After paragraph X 'preferred =' yes '>
<b: widget id ='HTML455 'locked =' true 'title =' Ad Code 'type =' HTML 'version =' 2 'visible =' true '>
<b: widget-settings>
<b: widget-setting name = 'content'> <! [CDATA [<img src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6XHshX_0rh9e8qnRDrLrcdxi6yHCPszg4J7TNZN6ERTNjxCW0J3SU2pl7c1URcvXI48q1zu_sz2XFhqSSkHu1-7mLoTq33_kpQemLew-iW-NNkaDPOsL_hWiDOIgfKGFEVCg6yAv961M/s1600/ .png "/>]]> </ b: widget-setting>
</ b: widget-settings>
<b: includable id = 'main'>
<div class = 'widget-content widget-move'>
<data: content />
</div>
</ b: includable>
</ b: widget>
<b: widget id = 'HTML456' locked = 'true' title = '[set] Show after paragraph X' type = 'HTML' version = '2' visible = 'true'>
<b: widget-settings>
<b:widget-setting name = 'content'> 8 </ b: widget-setting>
</ b: widget-settings>
<b: includable id = 'main'>
<div class = 'widget-content'>
<script type = 'text / javascript'>
if (showAd1.length & gt; 0) {insertAfter (midAd2, showAd1 [<data: content />]);}
if (showAd2.length & gt; 0) {insertAfter (midAd2, showAd2 [<data: content />]);}
if (showAd3.length & gt; 0) {insertAfter (midAd2, showAd3 [<data : content />]);}
</script>
</div>
</ b: includable>
</ b: widget>
</ b: section>
<b: section class = 'ad-by-paragraph' id = ' paragraph-ad3 'maxwidgets =' 2 'name =' [slot 3] After paragraph X 'preferred =' yes '>
<b: widget id ='HTML457 'locked =' true 'title =' Ad Code 'type =' HTML 'version =' 2 'visible =' true '>
<b: widget-settings>
<b: widget-setting name = 'content'> <! [CDATA [<a href = "https://goo.gl/z9ewXo" title = "trading bitcoin" target = "_ blank" rel = "nofollow noopener"> <img src = 'https: //1.bp.blogspot.com/-O6OJ3XmZ5OQ/Wz3tRZ3wuhI/AAAAAAAASq4/HZsWo1CyCpMgmn33vdnoG0CTWPWPjZvgCLcBGAs/s1600/banner_btc.gif]'] /> <trading.gif '] : widget-setting>
</ b: widget-settings>
<b: includable id = 'main'>
<div class = 'widget-content widget-move'>
<data: content />
</div>
</ b: includable>
</ b: widget>
<b: widget id = 'HTML458' locked = 'true' title = '[set] Show after paragraph X 'type =' HTML 'version =' 2 'visible =' true '>
<b: widget-settings>
<b: widget-setting name = 'content'> 13 </ b: widget-setting>
</ b: widget-settings>
<b: includable id = 'main'>
<div class = 'widget-content'>
< script type = 'text / javascript'>
if (showAd1.length & gt; 0) {insertAfter (midAd3, showAd1 [<data: content />]);}
if (showAd2.length & gt; 0) {insertAfter (midAd3, showAd2 [<data: content />]);}
if (showAd3.length & gt; 0) {insertAfter (midAd3, showAd3 [<data: content />]);}
</script>
</div>
</ b: includable >
</ b: widget>
</ b: section>
</div>
Step 3
Find the following code or something similar;
<div class = 'post-body entry-content float-container' expr: id = '& quot; post-body- & quot; + data: post.id '>
Or look for a code
<data:post.body/>that specifically displays a post page description, replace the code with the following code:<div class = 'post-body entry-content float-container' expr: id = '& quot; post-body- & quot; + data: post.id '>
<b: if cond =' data: view.isPost '>
<div id =' tgtPost '> <data: post.body /> </div>
<div class =' middleAds ads_middle1 ' id = 'middleAds1'>
<div style = 'clear: both;'>
<a name='ad-center-post-slot1'/>
</div>
</div>
<div class = 'middleAds ads_middle2' id = 'middleAds2'>
<div style = 'clear: both;'>
<a name='ad-center-post-slot2'/>
</div>
</div>
<div class = '
</b:if> </div>
Step 4
Set the appearance of the widget in the Layout with the following code:
<b: template-skin>
<! [CDATA [
#layout {background: # acc6a5! important;}
body # layout # ads-per-paragraph {visibility: visible! important; display: block! important; position: relative; z -index: 9999; border: 2px solid # 025645; padding-top: 8px}
#layout # paragraph-ad1 .widget-content {background: # fdeab7! important;}
#layout # paragraph-ad2 .widget-content {background: # fdd6b0! important;}
#layout # paragraph-ad3 .widget-content {background: # e3ab8e! important;}
.middleAds {margin: 5px auto 15px; padding: 0; text-align: center; display: block; position: relative; overflow: hidden; max-width: 100%; - moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box}
]]>
</ b: template-skin>
Attention:
- Put the code under the code
<head>or<head>or above the code</head>or</head><!--<head/>--> - If you are an existing template code
<b:template-skin>simply add the CSS code above, ranging from#layout…up on….border-box;box-sizing:border-box}
Step 5
Add the following jQuery library code above the code
</head>or </head><!--<head/>-->if your template doesn't have anything like the following or some kind of code:<script src = 'https: //ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>
Step 6
Save Theme
Step 7
Please go to Layout or Layout then edit according to the information written on each widget After Paragraph X.
The drawbacks of this 3 ad slot widget are:
Not suitable to be applied to blogs or websites that discuss coding tutorials (such as Blogger tutorials, Wordpress etc.), because the ad slots will mix and crash the codes that are being tutorialed.
Not suitable to be applied to blogs or websites that discuss coding tutorials (such as Blogger tutorials, Wordpress etc.), because the ad slots will mix and crash the codes that are being tutorialed.
By placing an ad in the middle of the article according to the paragraph, it is believed to be able to increase the CTR of the ad, whether it's Adsense ads, sponsored ads and so on.
That's all the tutorial this time about how to install 3 ad slots according to paragraphs that can be edited directly on the Blogger layout, on layout version 3. Hopefully this is useful and good luck!
If there are problems, or you have a better way, please write them in the comments column.