Cara Memasang Iklan AdSense di Tengah Artikel Melalui Layout



Memasang iklan adalah salah satu pendapatan para websider dan Blogger selain di Youtube. Penempatan atau posisi iklan yang baik tentu saja berpotensi meningkatkan jumlah klik oleh pengunjung blog dan juga berakibat terhadap meningkatnya penghasilan iklan yang dipajang.


Apa itu AdSense?

Salah satu iklan yang paling popular saat ini di Internet adalah AdSense, seperti yang saya kutip dari wikipedia, AdSense adalah salah satu program kerjasama periklanan melalui media Internet yang diselenggarakan oleh Google. Lewat program periklanan inilah pemilik Website dan Blog yang telah  disetujui keanggotaannya diizinkan memasang unit iklan yang telah ditentukan oleh Google.

Posisi Iklan Yang Baik

Seperti yang sudah saya jelaskan pada paragrap awal, bahwa penempatan atau posisi iklan yang baik tentu saja berpotensi meningkatkan jumlah klik. Posisi iklan yang sangat bagus dan strategis salah satunya di dalam atau ditengah artikel, selain di header dan sidebar.

Bagaimana Cara Pasang Posisi Iklan di Tengah Artikel?

Sebenarnya topik seperti ini sudah banyak yang membahasnya di Internet, dan tutorial tersebut hanya memanipulasi tag post-body menjadi 2 bagian dengan menggunakan JavaScript agar bisa ditempelkan slot iklan yang akan dipasang. Namun pada artikel saya kali ini sangat berbeda. Dimana sobat hanya memasangnya lewat layout/tata letak dan ini bukan hanya 3 slot iklan saja seperti yang sudah banyak beredar di Internet melainkan 4 buah slot.

Caranya?

Jika sobat tertarik untuk memasangnya pada blog, silahkan ikuti tutorial yang akan saya bagikan dibawah ini.

Pertama saya pastikan sobat sudah berada di Dashboard Blogger, kalau belum mari ngopi dulu yuk....hehehe, next kemudian pilih Theme - EDIT HTML

Jika sudah terbuka, soba tempatkan code berikut tepat di bawah code main section penutup, perhatikan code dibawah ini

<b:section class='main' id='main' maxwidgets='1' name='Main Posts' showaddelement='yes'>
....
....
....
....
....
....
</b:section> 

Widget yang akan dipasang
<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'/>
                  </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'></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'></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'></b:widget-setting>
                  </b:widget-settings>
                  <b:includable id='main'>
                    <div class='widget-content'>
                      <data:content/>
                    </div>
                  </b:includable>
                </b:widget>
              </b:section>
<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>

Sehingga penampakannya seperti ini
<b:section class='main' id='main' maxwidgets='1' name='Main Posts' showaddelement='yes'>
....
....
....
....
....
....
</b:section> 
<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'/>
                  </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'></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'></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'></b:widget-setting>
                  </b:widget-settings>
                  <b:includable id='main'>
                    <div class='widget-content'>
                      <data:content/>
                    </div>
                  </b:includable>
                </b:widget>
              </b:section>
<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>

Langkah selanjutnya, tempatkan code CSS nya tepat di dalam <style> ... </style> atau <b:skin<![CDATA[ ... ]]></b:skin>
.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}

Sehingga penampakan pada tata letak atau layout seperti ini

Memasang Iklan Adsense di Tengah Artikel

Sobat tinggal pergi ke tata letak atau layout dan masukan script iklan AdSense atau iklan lainnya di dalam widget tersebut. Mudah bukan?

Demikian Cara Memasang Iklan Adsense di Tengah Artikel Melalui Layout, semoga tutorial kali ini bermanfaat bagi sobat Blogger semuanya, baik itu di dunia maupun yang sudah ada diakhirat (#HanyaBercanda). Salam Blogger!!!

Hanya Blogger Pemula yang suka menulis dan membaca

Disqus Comments