Memasang iklan adsense di antara paragraf postingan

Memasang iklan Google Adsense di antara paragraf postingan bisa dilakukan dengan dua cara yaitu secara otomatis dengan mengaktifkan iklan otomatis dan secara manual dengan script khusus yang akan Blogizty bagikan.

Q : Bila kita bisa memasangnya secara otomatis, lalu untuk apa kita repot-repot menggunakan script manual?

A : Itu karena terdapat kekurangan dan kelebihan di antara keduanya. Selain itu, tergantung selera juga.

Okay, salah satu alasan yang paling penting di antara keduanya adalah kelebihan dan kekurangan. Maka dari itu, Blogizty akan jelaskan beberapa di antaranya.

Mengutip pernyataan dari salah satu developer plugin Wordpress, bahwa iklan otomatis Google memang cukup pintar untuk menempatkan iklan di antara paragraf postingan yang mereka anggap strategis dan berpotensi mendapatkan klik.

Namun, hal itu pun ada penghitungannya sendiri yaitu jumlah kata di dalam postingan. Semakin banyak jumlah kata dalam satu artikel maka semakin banyak iklan yang ditempatkan. Semakin banyak iklan yang ditempatkan maka semakin berat loading blog kita, kecuali kita menggunakan lazyload untuk Adsense.

Masalahnya, lazyload akan menunda pemuatan iklan sehingga iklan paling atas berpotensi terlewat oleh penglihatan pengunjung. Sedangkan iklan tersebut tetap menyumbangkan beban terhadap pemuatan blog.

Sedangkan script manual sifatnya statis, yang artinya jumlah iklan telah ditetapkan oleh script dan posisinya tetap berada di situ.

Q : Jika posisinya tetap, mungkin pengunjung akan sudah paham bahwa itu adalah iklan dan mereka akan menghindari klik?

A : Baik iklan otomatis maupun manual, "pengunjung tetap" tetap tidak memiliki potensi klik yang besar. Sebagai gantinya, pengunjung unik (baru) lah yang berpotensi. Bahkan untuk menilai kriteria sebuah blog/situs yang bagus pun dihitung dari jumlah pengunjung unik.

Jadi, apabila kita ingin menaikkan nilai CTR maka cobalah tingkatkan jumlah pengunjung unik yang salah satu praktik mudah dan terbaiknya adalah dengan melakukan promosi berbayar. Tapi bila ingin gratis, boleh cari caranya di internet.

Hal ini juga sudah dengan jelas ditunjukkan oleh Google yang mana Google lebih menyukai pengunjung organik yang datang dari hasil penelusuran, itu karena pengunjung dari hasil penelusuran biasanya unik (baru) kecuali dimanipulasi oleh kita sendiri.

Baik, jika sudah paham dan punya alasan untuk memasang iklan secara manual maka kita langsung menuju pembahasan utama yaitu mengenai script.

Mengenai script

• Script ini hanya memuat dua iklan, di paragraf bagian atas dan di paragraf bagian bawah, tak peduli berapa banyak jumlah kata di dalam artikel.

  Sehingga apabila kamu ingin menambahkan jumlah iklan maka disarankan untuk menambahkannya oleh sendiri di atas <data:post.body/> yang akan menempatkan iklan di awal postingan dan di bawah judul.

  Satu lagi adalah di bawah <data:post.body/> yang akan menempatkan iklan di akhir postingan.

• Script ini sengaja menghindari tag OL, UL, LI, dan BLOCKQUOTE, yang artinya iklan tidak akan ditempatkan di dalam tag tersebut tapi di luar atau setelah tag-tag tersebut.

  Itu karena biasanya tag semacam itu posisinya telah diubah menjadi tidak sama rata sehingga apabila iklan ditempatkan di dalam tag tersebut maka dia akan bergeser ke kanan menyebabkan overflow. Maka ketika dilihat di perangkat mobile handphone, tampilan blog akan melebar. Di mana kondisi ini tidak disukai oleh Google karena tampilan menjadi tidak responsive.

  Bisa saja hal ini diakali dengan menggunakan CSS overflow:hidden tapi tampilan iklan akan terpotong

Script untuk memasang iklan Adsense di antara paragraf

Untuk membuatnya bekerja, kita membutuhkan script HTML, CSS, JavaScript. Jadi pastikan semuanya dipasang dengan baik di tempat yang benar di dalam template.

Kode CSS

Pasang script ini di atas atau sebelum </style> atau ]]></b:skin>

.ad-center-top .widget,.ad-center-bottom .widget,.ad-center-top .widget-content,.ad-center-bottom .widget-content {margin:0 auto !important}
.post-body .widget-content {text-align:center;margin-top:10px;margin-bottom:10px}
.post-body .widget-content img,.post-body .widget-content iframe {width:100% !important;margin:0 auto !important}
.ad-center-top h2,.ad-center-bottom h2 {display:none}

Kode HTML

Terdapat dua Kode HTML yang harus kamu pasang. Pertama, tambahkan kode HTML berikut ini untuk membungkus <data:post.body/>. Bila terdapat banyak, maka pilih yang untuk halaman posting, biasanya yang terakhir.

<div id='jellypost'>
</div>

Maka hasilnya akan menjadi seperti ini :

<div id='jellypost'>
<data:post.body/>
</div>

Atau jika <data:post.body/> di template kamu sudah ada pembungkusnya selain <div class='post-body'> dan tak ingin menambahkan element baru maka kamu boleh ubah nilai selector di script JavaScript yang akan dijelaskan di bagian JavaScript.

Selanjutnya, masih mengenai HTML. Buat dua section baru di atas Footer.

<div style='clear:both'></div>
<b:if cond='data:view.isPost or data:view.isLayoutMode'>
<b:section class='ad-center-top' id='ad-center-top'/>
<b:section class='ad-center-bottom' id='ad-center-bottom'/>
</b:if>

Script JavaScript

Terakhir, pasang script ini di atas tag </body>. Seperti penjelasan di atas, apabila kamu tidak ingin menambahkan element baru sebagai pembungkus <data:post.body/> dikarenakan sudah ada pembungkusnya, maka silakan ganti semua selector bernama jellypost di dalam script JavaScript dengan id element kamu.

<b:if cond='data:view.isPost'>
<script>
//<![CDATA[
var adCenterTop=document.querySelectorAll('#ad-center-top .widget-content')[0],adCenterBottom=document.querySelectorAll('#ad-center-bottom .widget-content')[0],postGraph=document.querySelectorAll('#jellypost p,#jellypost br'),p1=Math.ceil(.3*postGraph.length),firstGraph=postGraph[p1],firstParent=firstGraph.parentNode,p2=Math.ceil(.7*postGraph.length),lastGraph=postGraph[p2],lastParent=lastGraph.parentNode,hy=document.querySelectorAll('#jellypost h2'),hey=document.querySelectorAll('#jellypost h3'),oLiyi=document.querySelectorAll('#jellypost ol'),uLiyi=document.querySelectorAll('#jellypost ul'),bly=document.querySelectorAll('#jellypost blockquote');firstParent.insertBefore(adCenterTop,firstGraph.nextSibling);lastParent.insertBefore(adCenterBottom,lastGraph);
if((firstParent.tagName=='LI'||firstParent.tagName=='BLOCKQUOTE')){if(hy[0]!=null){hy[0].parentNode.insertBefore(adCenterTop,hy[0].nextSibling)}else if(oLiyi[0]!=null){oLiyi[0].parentNode.insertBefore(adCenterTop,oLiyi[0])}else if(uLiyi[0]!=null){uLiyi[0].parentNode.insertBefore(adCenterTop,uLiyi[0])}else{bly[0].parentNode.insertBefore(adCenterTop,bly[0])}};
if((lastParent.tagName=='LI'||lastParent.tagName=='BLOCKQUOTE')){if(hy[1]!=null){hy[1].parentNode.insertBefore(adCenterBottom,hy[1].nextSibling)}else if(hey[0]!=null){hey[0].parentNode.insertBefore(adCenterBottom,hey[0].nextSibling)}else if(oLiyi[0]!=null){oLiyi[0].parentNode.insertBefore(adCenterBottom,oLiyi[0].nextSibling)}else if(uLiyi[0]!=null){uLiyi[0].parentNode.insertBefore(adCenterBottom,uLiyi[0].nextSibling)}else{bly[0].parentNode.insertBefore(adCenterBottom,bly[0].nextSibling)}};
//]]>
</script>
</b:if>

Simpan template dan selesai, sekarang tinggal memasang kode iklan Adsense. Caranya, buka Tata Letak. Lihat di bawah kolom Sidebar di atas Footer terdapat dua kolom gadget baru.

Isilah masing-masing dari gadget tersebut dengan satu kode iklan Adsense dengan mengklik Tambahkan Gadget, pilih HTML/JavaScript. Kosongkan judul, lalu masukkan kode iklan Adsense di kolom konten. Kode iklan tidak perlu diparse dan gunakan kode iklan responsive.

Selesai, lihat hasilnya. Script akan secara otomatis menempatkan iklan tersebut ditempat yang telah diatur oleh JavaScript.

Sebagai catatan

Apabila iklan yang tampil bergeser ke kanan dan menyisakan ruang kosong di sebelah kiri, itu artinya template yang kamu gunakan telah mengatur padding pada salah satu element yang berdampak pada post-body.

Solusinya mudah, ubah pengaturan CSS pada .post-body .widget-content menjadi seperti ini :

.post-body .widget-content {position:relative;margin:10px -10px;text-align:center;display:block}

Nilai -10px pada margin harus sesuai dengan nilai yang diberikan oleh template. Misalnya, ternyata yang menyebabkan pergeseran tersebut adalah .post {padding:8px} maka kamu harus mengubah nilai tadi menjadi -8px.

© Blogizty