Skip to main content

follow us


www.azid.web.id - Cara Membuat Widget Iklan Adsense Tengah Postingan Seperti Template Viomagz. Selamat siang sobat, bagaimana kabarnya sobat?. Pada kesempatan kali ini saya akan share pengalaman saya membuat widget iklan adsense ditengah artikel otomatis tanpa edit HTML. Tutorial ini saya dapatkan dari hasil otak-atik template viomagz buatan mas sugeng. Bagi sobat yang penasaran untuk membuatnya bisa langsung menuju tutorialnya dibawah ini:

Pertama, sobat harus masuk blogger dan pilih thema atau tema kemudian klik edit HTML. Setalah itu carilah kode </article> dan dibawahnya sobat akan melihat beberapa kode <b:includeble> .....</b:includable> nanti bawahnya ada kode </b:section> dan dibawahnya lagi terdapat kode </div>

kurang lebih contoh kodenya seperti ini


  </article>
<b:include name='nav-post'/>
..................
</b:includable>
<b:includable id='postQuickEdit' var='post'>
....................
</b:includable>
<b:includable id='postauthorbox' var='post'>
.................
</b:includable>
<b:includable id='shareButtons' var='post'/>
.......................
</b:includable>
dan seterusnya... sampai
...............
</b:includable>
          </b:widget>
        </b:section>
</div>

Jika sudah ketemu maka sobat bisa meletakkan kode berikut ini tepat diatas kode </div> atau dibawah kode </b:section>


<b:section class='iklan-tengah1' id='iklan-tengah1' maxwidgets='1' showaddelement='yes'>
  <b:widget id='HTML997' locked='true' title='Iklan Tengah Artikel 1' type='HTML' version='1'>
    <b:widget-settings>
      <b:widget-setting name='content'/>
    </b:widget-settings>
    <b:includable id='main'>
<b:if cond='data:blog.pageType in {&quot;item&quot;}'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='kode-iklan-tengah1'>
<data:content/>
</div>
</div>
</b:if>
</b:includable>
  </b:widget>
</b:section>
<b:section class='iklan-tengah2' id='iklan-tengah2' maxwidgets='1' showaddelement='yes'>
  <b:widget id='HTML998' locked='true' title='Iklan Tengah Artikel 2' type='HTML' version='1'>
    <b:widget-settings>
      <b:widget-setting name='content'/>
    </b:widget-settings>
    <b:includable id='main'>
<b:if cond='data:blog.pageType in {&quot;item&quot;}'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='kode-iklan-tengah2'>
<data:content/>
</div>
</div>
</b:if>
</b:includable>
  </b:widget>
</b:section>
<b:if cond='data:blog.pageType in {&quot;item&quot;}'>
<script type='text/javascript'>
function insertAfter(addition, konten) {
var parent = konten.parentNode;
if (parent.lastChild == konten) {
parent.appendChild(addition);
} else {
parent.insertBefore(addition, konten.nextSibling);
}
}
function insertAbove(addition, konten) {
var parent = konten.parentNode;
parent.insertBefore(addition, konten);
}
function insertBellow(addition) {
var parent = konten;
parent.appendChild(addition);
}
var iklan1 = document.getElementById(&quot;kode-iklan-tengah1&quot;);
var iklan2 = document.getElementById(&quot;kode-iklan-tengah2&quot;);
var iklanAtas = document.getElementById(&quot;kode-iklan-atas&quot;);
var iklanBawah = document.getElementById(&quot;kode-iklan-bawah&quot;);
var bacaJuga = document.getElementById(&quot;baca-juga&quot;);
var konten = document.getElementById(&quot;body-post-it&quot;);
var lokasi = konten.querySelectorAll(&quot;br,p,div &gt; br,div &gt; div &gt; br,div &gt; div &gt; div &gt; br,div &gt; p,div &gt; div &gt; p,div &gt; div &gt; div &gt; p,span &gt; br, span &gt; p&quot;);
if (lokasi.length &gt; 0) {
insertAbove(iklanAtas,konten);
insertBellow(iklanBawah);
}
if (lokasi.length &gt; lokasiIklanTengah1) {
insertAfter(iklan1,lokasi[lokasiIklanTengah1]);
}
else {
iklan1.innerHTML = &quot;&quot;;
}
if (lokasi.length &gt; lokasiIklanTengah2) {
insertAfter(iklan2,lokasi[lokasiIklanTengah2]);
}
else {
iklan2.innerHTML = &quot;&quot;;
}
if (lokasi.length &gt; lokasiBacaJuga) {
insertAfter(bacaJuga,lokasi[lokasiBacaJuga]);
}
else {
bacaJuga.innerHTML = &quot;&quot;;
}
</script>
</b:if>

Dan hasilnya kurang lebih akan seperti ini


  </article>
<b:include name='nav-post'/>
..................
</b:includable>
<b:includable id='postQuickEdit' var='post'>
....................
</b:includable>
<b:includable id='postauthorbox' var='post'>
.................
</b:includable>
<b:includable id='shareButtons' var='post'/>
.......................
</b:includable>
dan seterusnya... sampai
...............
</b:includable>
          </b:widget>
        </b:section>

<b:section class='iklan-tengah1' id='iklan-tengah1' maxwidgets='1' showaddelement='yes'>
  <b:widget id='HTML997' locked='true' title='Iklan Tengah Artikel 1' type='HTML' version='1'>
    <b:widget-settings>
      <b:widget-setting name='content'/>
    </b:widget-settings>
    <b:includable id='main'>
<b:if cond='data:blog.pageType in {&quot;item&quot;}'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='kode-iklan-tengah1'>
<data:content/>
</div>
</div>
</b:if>
</b:includable>
  </b:widget>
</b:section>
<b:section class='iklan-tengah2' id='iklan-tengah2' maxwidgets='1' showaddelement='yes'>
  <b:widget id='HTML998' locked='true' title='Iklan Tengah Artikel 2' type='HTML' version='1'>
    <b:widget-settings>
      <b:widget-setting name='content'/>
    </b:widget-settings>
    <b:includable id='main'>
<b:if cond='data:blog.pageType in {&quot;item&quot;}'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='kode-iklan-tengah2'>
<data:content/>
</div>
</div>
</b:if>
</b:includable>
  </b:widget>
</b:section>
<b:if cond='data:blog.pageType in {&quot;item&quot;}'>
<script type='text/javascript'>
function insertAfter(addition, konten) {
var parent = konten.parentNode;
if (parent.lastChild == konten) {
parent.appendChild(addition);
} else {
parent.insertBefore(addition, konten.nextSibling);
}
}
function insertAbove(addition, konten) {
var parent = konten.parentNode;
parent.insertBefore(addition, konten);
}
function insertBellow(addition) {
var parent = konten;
parent.appendChild(addition);
}
var iklan1 = document.getElementById(&quot;kode-iklan-tengah1&quot;);
var iklan2 = document.getElementById(&quot;kode-iklan-tengah2&quot;);
var iklanAtas = document.getElementById(&quot;kode-iklan-atas&quot;);
var iklanBawah = document.getElementById(&quot;kode-iklan-bawah&quot;);
var bacaJuga = document.getElementById(&quot;baca-juga&quot;);
var konten = document.getElementById(&quot;body-post-it&quot;);
var lokasi = konten.querySelectorAll(&quot;br,p,div &gt; br,div &gt; div &gt; br,div &gt; div &gt; div &gt; br,div &gt; p,div &gt; div &gt; p,div &gt; div &gt; div &gt; p,span &gt; br, span &gt; p&quot;);
if (lokasi.length &gt; 0) {
insertAbove(iklanAtas,konten);
insertBellow(iklanBawah);
}
if (lokasi.length &gt; lokasiIklanTengah1) {
insertAfter(iklan1,lokasi[lokasiIklanTengah1]);
}
else {
iklan1.innerHTML = &quot;&quot;;
}
if (lokasi.length &gt; lokasiIklanTengah2) {
insertAfter(iklan2,lokasi[lokasiIklanTengah2]);
}
else {
iklan2.innerHTML = &quot;&quot;;
}
if (lokasi.length &gt; lokasiBacaJuga) {
insertAfter(bacaJuga,lokasi[lokasiBacaJuga]);
}
else {
bacaJuga.innerHTML = &quot;&quot;;
}
</script>
</b:if>

</div>

Kedua, setalah meletakkan kode tersebut selanjutnya adalah letakkan kode css berikut ini dalam kode <style> .... </style>


/* SLOT IKLAN */
.iklan-tengah1 .widget, .iklan-tengah2 .widget, .iklan-bawah .widget, .iklan-atas .widget, .iklan-tengah1 .widget-content, .iklan-tengah2 .widget-content, .iklan-bawah .widget-content, .iklan-atas .widget-content {
margin:0 !important;
}
.iklan-tengah1 h2, .iklan-tengah2 h2, .iklan-bawah h2, .iklan-atas h2 {
display: none;
}
#kode-iklan-atas ins, #kode-iklan-bawah ins, #kode-iklan-tengah1 ins, #kode-iklan-tengah2 ins {
margin: 20px 0;
}
.post-body #kode-iklan-tengah1, .post-body #kode-iklan-tengah2, .post-body #kode-iklan-bawah, .post-body #kode-iklan-atas {
text-align: center;
display: block;
}

Ketiga, langkah terakhir adalah save template sobat dan cek pada menu layout untuk memastikan sudah muncul widget iklan tengah artikel atau widget tengah postingan.

Demikianlah tutorial Cara Membuat Widget Iklan Adsense Tengah Postingan Seperti Template Viomagz. Semoga bermanfaat. Amin.
PERHATIAN!: setiap link template pada blog ini di direct 5 -7 kali jadi harap bersabar.

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar