Memasang Iklan AdSense Sebelum atau Sesudah Elemen Tertentu

Memasang Iklan AdSense Sebelum Atau Sesudah Elemen Tertentu

Satu lagi teknik penempatan iklan AdSense yang harus kamu coba, yaitu menyisipkan iklan sebelum atau sesudah elemen HTML tertentu. Soal elemen itu akan dijelaskan lebih lanjut di bawah. Sekarang kita langsung masuk ke script utamanya dulu.


Memasukkan Iklan Sebelum Elemen Tertentu

Iklan akan diletakkan sebelum atau di atas elemen HTML yang dipilih, misalnya sebelum heading h2 seperti ini.

Lorem Ipsum is simply dummy text of the printing and typesetting industry.
<!-- Iklan akan muncul disini -->
<h2>SUBHEADING</h2>
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Bisa juga sebelum elemen dengan nama class atau id tertentu. Misalnya kamu pilih class related.

Lorem Ipsum is simply dummy text of the printing and typesetting industry.
<!-- Iklan akan muncul disini -->
<div class='related'>Related Post</div>
- Related satu
- Related dua
- Related tiga

Pakai kode berikut ini. Simpan script ini DI ATAS </body>.

<b:if cond='data:view.isPost'>
  <div class='ignielInsertBefore'>
    <!-- Kode Iklan AdSense -->
  </div>
  <script> //<![CDATA[
    // Insert Ads Before Element by igniel.com
    eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('s 7=["\\h\\o\\b\\h\\5\\9\\t\\b\\a\\5\\6\\8\\f\\5\\j\\c\\6\\5","\\o\\5\\8\\u\\9\\5\\n\\5\\b\\8\\a\\f\\k\\y\\9\\d\\a\\a\\l\\d\\n\\5","\\w\\x\\5\\6\\k\\r\\5\\9\\5\\v\\8\\c\\6\\D\\9\\9","\\h\\b\\a\\5\\6\\8\\f\\5\\j\\c\\6\\5","\\z\\d\\6\\5\\b\\8\\l\\c\\E\\5"];A B(i,q){m g=p[7[1]](7[0])[0];C(g){m e=p[7[2]](i)[q-1];e[7[4]][7[3]](g,e)}}',41,41,'|||||x65|x72|_0xecd3|x74|x6C|x73|x6E|x6F|x61|_0x71adx5|x42|_0x71adx4|x69|_0x71adx2|x66|x79|x4E|let|x6D|x67|document|_0x71adx3|x53|var|x49|x45|x63|x71|x75|x43|x70|function|ignielInsertBefore|if|x41|x64'.split('|'),0,{}));
    ignielInsertBefore('.post-body h2', '1');
  //]]> </script>
</b:if>

Tambahkan CSS ini agar jaraknya tidak berdekatan dengan konten di atas dan bawahnya. Simpan DI ATAS </style> atau ]]></b:skin>.

/* Insert Ads Before Element by igniel.com */
.ignielInsertBefore {display:block; margin:10px 0px; padding:0px;}

Perhatikan fungsi ignielInsertBefore('.post-body h2', '1').
.post-body adalah elemen HTML tempat isi postingan berada, jadi tidak usah diganti kecuali nama elemennya berbeda (biasanya sih sama untuk semua template). Kemudian iklan disisipkan sebelum elemen HTML dengan tag h2 yang pertama. Jika ada banyak h2 di dalam postingan, maka yang dipilih adalah yang ke-1.

Jika elemen tidak memiliki class atau id, tuliskan hanya nama tag-nya saja. Contohnya seperti h2, h3, h4, br, p, dll.

<!-- Sebelum tag `<br>` ke-10 -->
ignielInsertBefore('.post-body br', '10');

<!-- Sebelum tag `<h3>` ke-3 -->
ignielInsertBefore('.post-body h3', '3');

<!-- Sebelum tag `<div>` ke-2 -->
ignielInsertBefore('.post-body div', '2');

Jika elemen memiliki nama class, tuliskan dengan menambahkan titik (.). Contoh untuk tag HTML <div class='related'> maka harus ditulis .related.

<!-- Sebelum `<div class='related'>` ke-1 -->
ignielInsertBefore('.post-body .related', '1');

Jika elemen memiliki nama id, tuliskan dengan menambahkan tanda pagar / hashtag (#). Contoh untuk tag HTML <div id='info'> maka harus ditulis #info.

<!-- Sebelum id `<div id='info'>` ke-1 -->
ignielInsertBefore('.post-body #info', '1');

Paham kan ya? Kita lanjut ke script berikutnya.


Memasukkan Iklan Setelah Elemen Tertentu

Iklan akan diletakkan setelah atau di bawah elemen HTML yang dipilih, misalnya setelah heading h2 seperti ini.

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

<h2>SUBHEADING</h2> <!-- Iklan akan muncul disini --> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Bisa juga sebelum elemen dengan nama class atau id tertentu, misalnya class related.

Lorem Ipsum is simply dummy text of the printing and typesetting industry.
<div class='related'>Related Post</div>
<!-- Iklan akan muncul disini -->
- Related satu
- Related dua
- Related tiga

Simpan script ini DI ATAS </body>.

<b:if cond='data:view.isPost'>
  <div class='ignielInsertAfter'>
    <!-- Kode Iklan AdSense -->
  </div>
  <script> //<![CDATA[
    // Insert Ads After Element by igniel.com
    eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('v b=["\\d\\g\\a\\d\\6\\8\\y\\a\\c\\6\\9\\7\\k\\j\\7\\6\\9","\\g\\6\\7\\z\\8\\6\\r\\6\\a\\7\\c\\l\\t\\B\\8\\f\\c\\c\\s\\f\\r\\6","\\x\\A\\6\\9\\t\\q\\6\\8\\6\\u\\7\\i\\9\\k\\8\\8","\\a\\6\\w\\7\\q\\d\\F\\8\\d\\a\\g","\\d\\a\\c\\6\\9\\7\\l\\6\\j\\i\\9\\6","\\C\\f\\9\\6\\a\\7\\s\\i\\H\\6"];G D(m,n){p h=o[b[1]](b[0])[0];E(h){p e=o[b[2]](m)[n-1];e[b[5]][b[4]](h,e[b[3]])}}',44,44,'||||||x65|x74|x6C|x72|x6E|_0x7de9|x73|x69|_0x4b0bx5|x61|x67|_0x4b0bx4|x6F|x66|x41|x42|_0x4b0bx2|_0x4b0bx3|document|let|x53|x6D|x4E|x79|x63|var|x78|x71|x49|x45|x75|x43|x70|ignielInsertAfter|if|x62|function|x64'.split('|'),0,{}));
    ignielInsertAfter('.post-body h2', '1');
  //]]> </script>
</b:if>

Untuk pengaturan elemen sama dengan sebelumnya. Baca lagi ke atas.

Lalu simpan CSS ini DI ATAS </style> atau ]]></b:skin>.

/* Insert Ads After Element by igniel.com */
.ignielInsertAfter {display:block; margin:10px 0px; padding:0px;}

Kalau ada yang belum paham silakan komentar di bawah. Semoga bermanfaat.

Artikel Terkait

32 komentar

Ikuti format penulisan berikut untuk menyisipkan elemen tambahan.
  • Menulis kode gunakan <i>kode</i>
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em>
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong>
  • Guru Geografi
    29/4/22
    Profil: https://www.blogger.com/profile/02574384075010098754
    mba kalau mau tepat di bawah judul postingan, cari kode mana ya?
    • Igniel
      16/5/22
      Profil: https://www.blogger.com/profile/09199170379661896200
      Simpan iklan DI ATAS kode berikut:
      <data:post.body/>
  • EduGoEdu
    20/3/21
    Profil: https://www.blogger.com/profile/09566589342782319785
    mbak jika kodenya yang bawah saya ubah jadi ignielInsertBefore('.post-body h2');
    apakah iklan akan muncul di setiap h2(setelah atau sebelum ?
    mohon jawabannya mbak
    • Igniel
      29/4/21
      Profil: https://www.blogger.com/profile/09199170379661896200
      Tidak akan muncul karena fungsinya bukan begitu.
      Harusnya begini sesuai artikel:
      ignielInsertBefore('.post-body h2', '3');
  • Eka Wahyu Budi Santoso
    20/12/19
    Profil: https://www.blogger.com/profile/07161289254018588125
    Kalau pada kalimat tertentu bisa gak ya?
  • Rico
    13/11/19
    Profil: https://www.blogger.com/profile/13626655693427922682
    Mantul
  • Hay Tayo
    11/11/19
    Profil: https://www.blogger.com/profile/09301230173252082737
    wah mantul , kebetulan pengen nyoba naruh iklan setelah gambar pertama blog , soalnya blog saya gk dipakein kode khusus first image.
  • ARA AUDIO
    10/11/19
    Profil: https://www.blogger.com/profile/06087277253042024243
    Bagaimana bikin iklan 300x600 kaya di blog ini gan, di mobil iklan di tengah artikel tapi sticky ketika di scroll
  • Muhammad Gunawan
    29/3/19
    Profil: https://www.blogger.com/profile/14303289527886812208
    mba saya udah coba nerapin cara di atas pasang iklan ads setelah subheading (h3) tengah artikel pakai iklan responsive. tapi iklannya keluar jalur ya mba, kaya melebar gitu iklannya. uda coba pake kode centr tetep wae kepotong iklannya.
    • A. Abdul Mustahab ツ
      30/3/19
      Profil: https://www.blogger.com/profile/05409057447679540831
      saya bantu jawab yah.
      tambahkan ini di kode iklannya data-full-width-responsive='false' biar tidak keluar jalur
    • theAsk
      30/9/19
      Profil: https://www.blogger.com/profile/03118163808672068512
      Diblog sya jga gitu mba,, coba pasang di bawah img,, tpi tpi iklan.y keluar jalur ampe ke widget... Ngatasin.y gmna ya mba..??
  • Sandy Senjaya
    13/2/19
    Profil: https://www.blogger.com/profile/11429922247310206942
    Kalau bikin elemen yang khusus untuk menampilkan iklan AdSense, apakah bisa? Caranya gimana ya?

    Misal di dalam postingan HTML sebagai berikut

    Lorem Ipsum is simply dummy text of the printing and typesetting industry.


    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.


    Atau cara lainnya yang intinya pakai elemen khusus untuk memanggil iklan tersebut.
    • Sandy Senjaya
      13/2/19
      Profil: https://www.blogger.com/profile/11429922247310206942
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.

      Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
    • Sandy Senjaya
      13/2/19
      Profil: https://www.blogger.com/profile/11429922247310206942
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      (iklan1)(/iklan1)
      Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
  • Unknown
    30/1/19
    Profil: https://www.blogger.com/profile/13783728444375260981
    Kalau mau menyimpan Related Post di element tertentu gimana kak?
  • Unknown
    30/1/19
    Profil: https://www.blogger.com/profile/13783728444375260981
    Kalau menyimpan iklan setelah Gambar apa kodenya kak?
    • Unknown
      30/1/19
      Profil: https://www.blogger.com/profile/13783728444375260981
      maaf gak jadi kak.. kuarang aqua aku wkwk
  • A. Abdul Mustahab ツ
    7/1/19
    Profil: https://www.blogger.com/profile/05409057447679540831
    mbak bagaimana kalau mau nerapin 2 ads di tengah artikel ? saya pake elemen #ads. nah kalau mau nambahin 1 ads lagi apa harus nambah script lagi ? jadi scriptnya dipasang 2 kali.
    • Igniel
      7/1/19
      Profil: https://www.blogger.com/profile/09199170379661896200
      Tutor di atas khusus buat 1 iklan. Kalau mau dua atau lebih harus pake script multiple ads:
      https://www.igniel.com/2018/11/multiple-iklan-dalam-post.html
  • ngonline06
    12/12/18
    Profil: https://www.blogger.com/profile/02969011994285107086
    kalau setelah elemen tertentu bisa gak mb?
    • Igniel
      12/12/18
      Profil: https://www.blogger.com/profile/09199170379661896200
      Tutor di atas kan emang buat masukin iklan abis elemen tertentu.
  • SceneTube
    18/11/18
    Profil: https://www.blogger.com/profile/07638604369629707829
    Template nya mantap
  • rezaharahap
    18/11/18
    Profil: https://www.blogger.com/profile/16216454999014453285
    nice info mbak 👍
  • Pus Blacky
    18/11/18
    Profil: https://www.blogger.com/profile/13260730401445759194
    Mbak mau tanya.. saya mencoba mengetes blog saya di page insight.. tanpa adsense bisa 90++ pasang adsense drop 50 kebawah..

    Nah aku coba igniel.com bisa 97 (ada adsense)

    Bagaimana caranya supaya
    pagead2.googlesyndication.com
    googleads.g.doubleclick.net
    www.google-analytics.com
    ga pengaruhi hasil tes insight? Terimakasih sebelumnya!
    • rezaharahap
      18/11/18
      Profil: https://www.blogger.com/profile/16216454999014453285
      sudah coba diparse?
    • Igniel
      18/11/18
      Profil: https://www.blogger.com/profile/09199170379661896200
      Pake lazy load adsense mas.
    • Admin ismynr Official
      8/7/20
      Profil: https://www.blogger.com/profile/05319292312193094609
      disini ada tutorialnya ga ya pake lazy load adsense? , apa ga bikin ?
    • Igniel
      8/7/20
      Profil: https://www.blogger.com/profile/09199170379661896200
      Belum bikin.
  • Robin
    17/11/18
    Profil: https://www.blogger.com/profile/04087260289119072340
    Mbak bahas tentang cara agar blog cepat di approve oleh adsense dong, atau bagaimana agar viewer kita tinggi statistiknya....
    • Fizi
      18/11/18
      Profil: https://www.blogger.com/profile/12664816184934381226
      sepengalaman saya jadi bloger, mau ada yang nulis artikel tentang yang mas pengenin pun belum tentu yang mas pengenin bisa terjadi. Serius nggak ada yang seinstan kita baca artikel terus terapin dan besoknya langung approve adsense atau pv langsung 1000k/day.

      *salam dari blogger thn 2013 :)
    • Igniel
      18/11/18
      Profil: https://www.blogger.com/profile/09199170379661896200
      Bener kata di atas saya. Semuanya butuh waktu. Gak ada yang instan. Dibagusin aja kualitas artikelnya. Nanti lama-lama naik sendiri.
    • Zaid Rabbah
      26/11/18
      Profil: https://www.blogger.com/profile/14886514937681637977
      Betul, nulis sesuai passion ajah.