Cara Pasang Adsense di Tengah Artikel Tanpa Merusak Gambar

Ilmu Informatika : Cara Pasang Adsense di Tengah Artikel Tanpa Merusak Gambar. Salah satu hal yang banyak dicari oleh publisher iklan PPC seperti adsense adalah mencari tempat yang strategis untuk mendapat perhatian dari pengunjung blog atau web sehingga menumbuhkan rasa bagi pengunjung untuk mengklik atau membuka link iklan tersebut. Beberapa diantara tempat yang strategis adalah pada sidebar, header dan pada postingan (di awal, di tengah dan di bawah).
Pada wordpress tentunya ada plugin tersendiri yang digunakan untuk menyisipkan iklan di dalam postingan bahkan di tengah postingan secara akurat. Pada blogspot tentunya memiliki cara yang berbeda karena memiliki struktur yang berbeda. Untuk meletakkan iklan adsense di sidebar peletakan hampir sama antara wordpress dan blogspot, kita cukup menaruh kode iklan melalui layout/tata letak --> Widget.
iklan ditengah tanpa merusak gambar

Sedangkan untuk meletakkan iklan didalam postingan pada blogspot akan saya bagi menjadi 4, yaitu : iklan di awal postingan, iklan di bawah postingan, iklan di tengah postingan, dan iklan di tengah postingan tanpa merusak gambar.

1. Iklan di awal postingan (dibawah judul)

Untuk menempatkan iklan diawal postingan, anda siapkan kode iklan dulu kemudian di parse, buka tools parse.
  • Buka blogger.com
  • Pilih Template
  • Edit HTML
  • Cari kode <data:post.body/>
  • Biasanya terdapat sekitar 2 atau 3 kode <data:post.body/>, gunakan kode yang terakhir (Biasanya yang ketiga.
  • Taruh kode iklan yang telah diparse tepat di atas kode <data:post.body/>
    Jadinya seperti ini :
    
    &lt;script type=&quot;text/javascript&quot;&gt;
        google_ad_client = &quot;ca-pub-xxxxxxxxxxxx&quot;;
        google_ad_slot = &quot;xxxxxxxxx&quot;;
        google_ad_width = xxx;
        google_ad_height = xx;
    &lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot;
    src=&quot;//pagead2.com/pagead/show_ads.js&quot;&gt;
    &lt;/script&gt;
    
            <data:post.body/>
    
  • Kemudian pilih Save template.
Lihatlah hasilnya, jika iklan tidak muncul cobalah untuk menunggu maksimal sekita 10 menit, jika belum muncul juga cobalah untuk menaruh kode iklan di atas kode <data:post.body/> yang lainnya.

2. Iklan di bawah postingan

Untuk menempatkan iklan diakhir atau dibawah postingan, anda siapkan kode iklan dulu kemudian di parse, buka tools parse.
  • Buka blogger.com
  • Pilih Template
  • Edit HTML
  • Cari kode <data:post.body/>
  • Biasanya terdapat sekitar 2 atau 3 kode <data:post.body/>, gunakan kode yang terakhir (Biasanya yang ketiga.
  • Saya sarankan untuk menggunakan jenis iklan yang responsif, jika anda memilih iklan yang responsif ganti tulisan auto menjadi rectangle. Ini berfungsi agar iklan berbentuk kotak atau persegi dan bukan berbentuk banner dan iklan akan berada di tengah-tengah, bukan dikiri atau dikanan.
  • Taruh kode iklan yang telah diparse tepat dibawah kode <data:post.body/>
    Jadinya seperti ini :
    
            <data:post.body/>
    
    &lt;script async src=&quot;//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js&quot;&gt;&lt;/script&gt;
    &lt;!-- res --&gt;
    &lt;ins class=&quot;adsbygoogle&quot;
         style=&quot;display:block&quot;
         data-ad-client=&quot;ca-pub-xxxxxxxxxxxxxxxx&quot;
         data-ad-slot=&quot;xxxxxxxxxx&quot;
         data-ad-format=&quot;rectangle&quot;&gt;&lt;/ins&gt;
    &lt;script&gt;
    (adsbygoogle = window.adsbygoogle || []).push({});
    &lt;/script&gt;
    
    
  • Kemudian pilih Save template.
Lihatlah hasilnya, jika iklan tidak muncul cobalah untuk menunggu maksimal sekita 10 menit, jika belum muncul juga cobalah untuk menaruh kode iklan di atas kode <data:post.body/> yang lainnya.

3. Iklan di tengah postingan (biasa)

Untuk menempatkan iklan didalam postingan atau tepatnya ditengah, anda siapkan kode iklan dulu kemudian di parse, buka tools parse.
  • Buka blogger.com
  • Pilih Template
  • Edit HTML
  • Cari kode <data:post.body/>
  • Biasanya terdapat sekitar 2 atau 3 kode <data:post.body/>, gunakan kode yang terakhir (Biasanya yang ketiga.
  • Hapus kode <data:post.body/> dan diganti dengan kode
    
    <div expr:id='&quot;iklan1&quot; + data:post.id'/> 
    <div style='clear:both; margin:10px 0'>
     <b:if cond='data:blog.pageType == &quot;item&quot;'>
     MASUKKAN IKLAN YANG TELAH DIPARSE 
     </b:if>
    </div>
    
    <div expr:id='&quot;iklan2&quot; + data:post.id'>
     <data:post.body/>
    </div>
    <script type='text/javascript'>
     var obj0=document.getElementById(&quot;iklan1<data:post.id/>&quot;);
     var obj1=document.getElementById(&quot;iklan2<data:post.id/>&quot;);
     var s=obj1.innerHTML;var t=s.substr(0,s.length/2);
     var r=t.lastIndexOf(&quot; &quot;);
     if(r&gt;0) {
      obj0.innerHTML=s.substr(0,r);
      obj1.innerHTML=s.substr(r+1);
     }
    </script>
    
  • Anda dapat menggunakan jenis iklan sesuai dengan yang anda inginkan, baik responsif, link, maupun persegi.
  • Kemudian pilih Save template.
Cara kerja dari script atau kode ini adalah dengan menjumlahkan total karakter, baik huruf postingan maupun huruf yang menyusun kode/script pada postingan, kemudian dibagi menjadi 2 karena kita menginginkan meletakkan iklan tepat di tengah-tengah (angka 2 menunjukkan dibagi 2, semakin besar nilainya maka iklan semakin keatas).
Pada kode atau script ini akan berfungsi dengan baik jika postingan yang anda buat jarang atau bahkan tidak menggunakan gambar yang berada di tengah postingan dan penomoran menggunakan manual bukan otomatis dari blogger. Namun akan amburadul atau acak-acakan jika blog anda adalah blog yang penuh gambar, sehingga gambar (yang berada ditengah postingan) akan bentrok dengan kode iklan sehingga yang tampil adalah iklan dan "Kode gambar yang cacat" tentunya hal ini sangat bermasalah terkait dengan kenyamanan pengunjung jika yang anda utamakan adalah kenyamanan pengunjung blog.

4. Iklan di tengah postingan (tanpa merusak gambar)

Untuk menempatkan iklan didalam postingan atau tepatnya ditengah tanpa merusak gambar ini saya akui cukup ribet, namun tentunya bisa dilakukan dan berhasil.
  • Siapkan iklan kemudian di parse terlebih dahulu. tool parse (untuk parse iklan)
  • Buka blogger.com
  • Pilih Template
  • Edit HTML
  • Cari kode <data:post.body/>
  • Oke, setelah ketemu kode <data:post.body/>, pastikan di atasnya ada kode <b:if cond='data:blog.pageType != &quot;item&quot;'>, entah 3 baris diatasnya atau berapa baris diatasnya.
  • Pastekan kode berikut di atas <b:if cond='data:blog.pageType != &quot;item&quot;'> seperti ini:
    
    <div id='jobmiddlenew'>
    
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
     
  • Lalu dimana kita menaruh kode </div> masa ada <div id= jobmiddlenew> tanpa ditutup </div>???
    -> Tentunya dibawah kode </b:if>.
    </b:if> ada banyak cuy,
    -> maka dari itu saya katakan cari ini cukup ribet :D
  • Copy template anda dan buka menggunakan Notepad++. Ingat ya Notepad++ (download Notepad++).
  • Save template di notepad dengan extensi .xml atau .html

    1) Arahkan cursor atau mouse ke <b:if cond='data:blog.pageType != &quot;item&quot;'>.
    2) Ikuti garis merah seperti pada gambar.
    3) </b:if> yang ditunjukkan pada gambar tersebut adalah penutup.
    4) dan No 4 adalah dimana nantinya anda meletakkan </div>.
    Anda bisa mengupload template dari notepad, atau menaruh </div> di template anda secara teliti.
  • Belum selesai sampai disitu saja, cari kode </body> kemudian pastekan kode berikut tepat diatas kode </body>.
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style>
     #addcodemiddle{display: none;}
    </style>
    <div id='addcodemiddle'>
     MASUKKAN IKLAN YANG TELAH DIPARSE
    </div>
    <script type='text/javascript'>
     var str1=document.getElementById(&quot;jobmiddlenew&quot;).innerHTML;
     var str2=str1.length;
     var str3=str2/2;
     var substr = str1.substring(str3, str2);
     var n = substr.search(&quot;&lt;br&gt;&quot;);
     if(n&lt;0){
      n = substr.indexOf(&#39;.&#39;);
      if(n&lt;0){
       n=0;
      }
      var firsthalf = str1.substring(0, str3+n+1);
      var secondhalf = str1.substring(str3+n+1, str2);
     }
     else{
      var firsthalf = str1.substring(0, str3+n+4);
      var secondhalf = str1.substring(str3+n+4, str2);
     }
     var addcode=&quot;<center>&quot;+document.getElementById(&quot;addcodemiddle&quot;).innerHTML+&quot;</center><br/>&quot;;
     var newbody=firsthalf+addcode+secondhalf;
     var strnew=document.getElementsByClassName(&quot;post-body entry-content&quot;);
     strnew[0].innerHTML=newbody;
     document.getElementById(&quot;addcodemiddle&quot;).innerHTML=&quot;&quot;;
    </script>
    </b:if>
    
  • Pastikan anda telah manuruh kode iklan yang telah di parse.
  • Kemudian pilih Save template.
Demikian artikel mengenai Cara Pasang Adsense di Tengah Artikel Tanpa Merusak Gambar. Semoga bermanfaat untuk sobat semua.
Nikmati Jasa & Layanan yang ada di www.isrul.com, diantaranya:
1. Jasa Pembuatan dan Verifikasi Akun Paypal dengan VCC (Valid 2 atau 3 Tahun)
2. Jual Akun Adsense Non Hosted Indonesia (0899-5832-699)
3. Penulis Tamu di Isrul.com

10 Responses to "Cara Pasang Adsense di Tengah Artikel Tanpa Merusak Gambar"

  1. Infonya sangat bermanfaat sekali mas Isrul, setelah berhasil melakukannya dan tidak error.. iklan kok masih belum tampil mas. mohon infonya..apa karena iklan yg sy parse iklan yg responsive ya mas

    ReplyDelete
  2. Selamat pagi mas Khoirul...untuk parse iklan sudha sy coba dengan beberapa device lain namun iklan masih belum muncul di tengah2 postingan. Mohon info apa mungkin ada yang salah mas. Trims

    ReplyDelete
    Replies
    1. Peletakan kode jobmiddlenew di perhatikan lagi mas, karena trdapat lebih dari 1. Dan pastikan peletakan kode /div sudah benar

      Delete
  3. Masalah sudah terpecahkan mas, sy mengganti iklan yang tidak responsive baru bisa tampil. Terima kasih atas ilmunya mas, Sukses selalu buat mas KHOIRUL MUTTAQIIN

    ReplyDelete
    Replies
    1. Aamiin... Terimakasih telah berkunjung :-)

      Delete
  4. Makasih mas Khoirul ,udah lama mau pasang adsense dibawah judul gak jadi2, baru kali ini ramuannya mas khoirul mantap...makasih,kunbal yaa..

    ReplyDelete
  5. Akhirnya bisa juga, setelah diawal-awal gagal tadi iklannya tidak muncul, akhirnya nemu solusi dari komentarnya mas Wahyudi Nugroho, terimakasih atas solusinya, dan buat mas Khoirul sukses terus dengan blognya.. :)

    ReplyDelete

Jika anda bertanya, jangan lupa mencentang "Notify Me" di bagian kanan bawah, agar mendapat pemberitahuan jika pertanyaan anda telah kami jawab.
Terimakasih telah menyempatkan waktu berkomentar...