How to make ad widgets above, middle, and below blog posts - NETRAL'ID

How to make ad widgets above, middle, and below blog posts


News Update
Loading...

Wednesday, 2 September 2020

How to make ad widgets above, middle, and below blog posts

Chances are many have already shared how to advertise, above in the middle and below the post in an old-fashioned way, by editing html. this time I will share a tutorial on how to make a widget above in the middle and below blogger posts, which you can edit at any time in blogger layout.

1. Login to your Blogger account

2. Theme > Edit Html look for this code ]]></b:skin>, and place the code below right above the code ]]></b:skin>

/* Ad Slots */
.top-Ad-Slots .widget,.top-Ad-Slots .widget-content,.Ad-Slots-below .widget,.Ad-Slots-below .widget-content,.Middle-Ad-Slot1 .widget,.Middle-Ad-Slot1 .widget-content,.Middle-Ad-Slot2 .widget,.Middle-Ad-Slot2 .widget-content{margin:0!important;width:100%}

3. Look for the code <b:section class='main' id='main'>...</b:section>  |  or something similar, because each regular template is different, the code below is located right below the code.

<b:if cond='data:view.isLayoutMode or data:view.isPost'>
              <b:section class='top-Ad-Slots' id='top-Ad-Slots' maxwidgets='1' name='Ads Appear Above the Article' showaddelement='no'>
                <b:widget id='HTML76' locked='true' title='Ad Code' type='HTML' version='2' visible='true'>
                  <b:widget-settings>
                    <b:widget-setting name='content'>&lt;div style=&quot;width:100%;height:90px;background:#f5f5f5;margin:0 auto;position:relative;&quot;&gt;
&lt;div id=&#39;content1&#39;&gt;

&lt;/div&gt;
&lt;/div&gt;</b:widget-setting>
                  </b:widget-settings>
                  <b:includable id='main'>
                    <div class='widget-content'>
                      <data:content/>
                    </div>
                  </b:includable>
                </b:widget>
              </b:section>  
              <b:section class='Middle-Ad-Slot1' id='Middle-Ad-Slot1' maxwidgets='1' name='Ads Appear in the Middle of the Article' showaddelement='no'>
                  <b:widget id='HTML77' locked='true' title='Ad Code' type='HTML' version='2' visible='true'>
                    <b:widget-settings>
                      <b:widget-setting name='content'>&lt;div style=&quot;width:100%;height:90px;background:#f5f5f5;margin:0 auto;position:relative;&quot;&gt;
&lt;div id=&#39;content1&#39;&gt;

&lt;/div&gt;
&lt;/div&gt;</b:widget-setting>
                    </b:widget-settings>
                    <b:includable id='main'>
                      <div class='widget-content'>
                        <data:content/>
                      </div>
                    </b:includable>
                  </b:widget>
                </b:section>
              <b:section class='Middle-Ad-Slot2' id='Middle-Ad-Slot2' maxwidgets='1' name='Ads Appear in the Middle of the Article' showaddelement='no'>
                <b:widget id='HTML78' locked='true' title='Ad Code' type='HTML' version='2' visible='true'>
                  <b:widget-settings>
                    <b:widget-setting name='content'>&lt;div style=&quot;width:100%;height:90px;background:#f5f5f5;margin:0 auto;position:relative;&quot;&gt;
&lt;div id=&#39;content1&#39;&gt;

&lt;/div&gt;
&lt;/div&gt;</b:widget-setting>
                  </b:widget-settings>
                  <b:includable id='main'>
                    <div class='widget-content'>
                      <data:content/>
                    </div>   
                  </b:includable>
                </b:widget>
              </b:section>
              <b:section class='Ad-Slots-below' id='Ad-Slots-below' maxwidgets='1' name='Ads Appear Under the Article' showaddelement='no'>
                <b:widget id='HTML79' locked='true' title='Ad Code' type='HTML' version='2' visible='true'>
                  <b:widget-settings>
                    <b:widget-setting name='content'>&lt;div style=&quot;width:100%;height:90px;background:#f5f5f5;margin:0 auto;position:relative;&quot;&gt;
&lt;div id=&#39;content1&#39;&gt;

&lt;/div&gt;
&lt;/div&gt;</b:widget-setting>
                  </b:widget-settings>
                  <b:includable id='main'>
                    <div class='widget-content'>
                      <data:content/>
                    </div>
                  </b:includable>
                </b:widget>
              </b:section>
            </b:if>

4. Also put the code below just above the </body> code

<b:if cond='data:view.isPost'>
<script>
//<![CDATA[
!function(){var e=document.querySelector(".post-body"),n=e.querySelectorAll("div > br, span > br, div > p, span > p"),t=Math.ceil(.2*n.length),l=Math.ceil(.5*n.length),o=document.querySelector("#Middle-Ad-Slot1 .widget-content"),i=document.querySelector("#Middle-Ad-Slot2 .widget-content"),r=document.querySelector("#top-Ad-Slots .widget-content"),d=document.querySelector("#Ad-Slots-below .widget-content"),c=document.getElementById("iklan1"),a=document.getElementById("iklan2");function u(e,n){n.parentNode.insertBefore(e,n.nextSibling)}null!=r&&"\n"!=r.innerHTML&&e.insertBefore(r,e.childNodes[0]),null!=d&&"\n"!=d.innerHTML&&e.appendChild(d),0<n.length?(null!=o&&"\n"!=o.innerHTML&&u(o,null!==c?c:n[t]),null!=i&&"\n"!=i.innerHTML&&u(i,null!==a?a:n[l])):(o.parentNode.removeChild(o),i.parentNode.removeChild(i))}();
//]]>
</script>
</b:if>


5. Save Theme and Done

If you are confused you can see the video below how to install it



So After you install a widget like this you don't need to edit the html if you want to change your ad, just enter the blogger layout and select the widget in which position you want to change.

Ok, that's the first tutorial from me "How to Make an Ad Widget in the middle and at the bottom of the post" hopefully Useful

Share with your friends

Give us your opinion

🎯 Safelink Note : After the process is complete, please scroll up a little, then click go to link
Donate
Treat me to a glass of coffee
Ok, I get it