bergabung di grup telegram kami

cara membuat iklan parallax di tengah postingan blogger

cara membuat iklan parallax di tengah postingan blogger
cara membuat iklan parallax di tengah postingan blogger

Hallo semua pada kesempatan kali ini saya akan membagikan cara membuat iklan parallax di tengah postingan blogger.

beberapa waktu lalu saya mencoba memasang iklan parallax pada blog ini dan sekalian saja saya buatkan tutorialnya barang kali saja ada yang membutuhkanya, untuk demonya kalian bisa lihat melalui tombol di bawah ini.

jadi iklan parallax ini hanya muncul pada tampilan mobile saja tidak untuk desktop, karena emang jenis iklan ini lebih cocok untuk tampilan di mobile.

tutorial ini juga sudah pernah di buat oleh blog kompiajaib.com dan sudah di share ulang banyak oleh blogger lain, namun iklan parallax tidak benar - benar muncul di tengah postingan melainkan di atas postingan.

jadi pada tutorial ini saya memberikan cara membuat iklan parallax benar - benar di tengah postingan seperti blog igniel.com dan kalian juga bisa mengaturnya pada pragraf ke berapa iklan akan di tampilkan, di sini saya menggunakan javascript murni untuk memunculkan iklan di tengah postingan tanpa ada sentuhan jQuary jadi tidak akan berdampak buruk pada loading blog tentunya.

jadi jika kalian ingin mencoba membuatnya mari simak caranya di bawah ini.

Cara Membuat Iklan Parallax Di Tengah Postingan Blogger

silakan kalian buat unit iklan dulu dengan memilih iklan display pilih bentuk yang vertikal ukurannya biarkan responsive dan catat kode data-ad-client dan data-ad-slot kalian.

lanjut masuk ke blogger pilih tema dan edit html , salin css di bawah ini dan letakkan di atas kode ]]></b:skin>


/* iklan paralax by wendy code  */
.wendyparalax{position:relative;display:block;overflow:visible;width:100%;height:0;margin:auto;text-align:center;z-index:1}
.wendyparalax > div{overflow:hidden;width:100%;height:100%;margin:0;position:absolute;top:0;left:0;clip:rect(auto auto auto auto)}
.wendyparalax > div > div{width:calc(100% - 40px);height:100%;position:fixed;top:0;left:0;right:0;margin:0 auto;-moz-transform:translateZ(0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0)}
.wendyparalax > div > div > div{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-align-content:center;align-content:center;-webkit-align-items:center;-ms-flex-align:center;width:100%;height:100%;position:absolute;left:0;right:0;top:37px;align-items:center;background:#fff}
.wendyparalax > div > div > div > *{margin:auto}
.wendyparalax > div > div > div > a{width:100%;height:100%}
.wendyparalax img,.wendyparalax iframe,.wendyparalax ins{height:100%;border:0}
.clear{clear:both;display:block}
.wendyparalax{width:100%;min-width:300px;min-height:600px;text-align:center}
.adParallax{width:100%;min-width:300px;min-height:600px;text-align:center;display:block; margin:10px 0px; padding:0px;}

dan salin kode di bawah dan letakkan di bawah kode <data:post.body/> biasanya ada lebih dari 1 kode ini tergantung template yang kalian gunakan, jadi silakan coba satu - satu.


<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
 <b:if cond='data:view.isPost'>
  <div class='wendyparalax'>
   <div>
    <div>
      <div>
       <ins class='adsbygoogle adParallax' data-ad-client='ca-pub-8802465226xxxxxx' data-ad-slot='290125xxxx' style='display:block'/>
        <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
        </script>
      </div>
    </div>
  </div>
 <span class='clear'/>
</div>
<script> //<![CDATA[
// munculkan iklan pada pragraf sekian by https://www.wendycode.com 
function wendyparalax(Ad1) {let paralax = document.getElementsByClassName ('wendyparalax')[0]; if (paralax) {let Adsp = document.querySelectorAll ('.post-body p')[Ad1 - 1]; Adsp.parentNode .insertBefore (paralax, Adsp.nextSibling)}} wendyparalax(4);/*]]>*/</script></b:if></b:if>

silakan ganti ca-pub-8802465226xxxxxx dan data-ad-slot='290125xxxx' milik kalian , kalian juga bisa mengatur pada pragraf ke berapa iklan akan di tampilkan , perhatikan kode wendyparalax(4); angka 4 artinya iklan akan muncul setelah pragraf ke 4 jadi silakan di ubah sesuai kebutuhan.

Catatan
penting saat menulis artikel harus menggunakan tag <p> saat membuat pragraf agar iklan bisa muncul.

jika sudah jangan lupa untuk klik simpan dan lihat hasilnya, ok sekian cara membuat iklan parallax di tengah postingan blogger semoga bermanfaat.

Baca juga :

37 komentar



image quote pre code
  1. cara buat syntax highlighter di blog ini gimana gan? tulis manual kah
    1. Bisa cek di sini
      https://blog.choipanwendy.com/2021/03/syantax-highlighter-berwarna-dengan-css.html
  2. mas, kalo mau nempatin kode iklan di tataletak misalkan, musti bikin kode iklan baru di adsense?
    1. Bebas aja mas, 1 unit kode iklan bisa pasang di banyak tempat, cuma kalau saya 1 unit kode iklan untuk 1 tempat biar saya tau bagian mana yang sering di klik
    2. owalahh, gitu toh heheh

      blogku tanpa adsense score PSI 90 an pas di pasang adsense buset drop parah nyampe 40 an mas, ada tips buat bikin script adsense agak ringan gitu
    3. Ada 2 cara mas , 1 pakai lazyload, 2 pakai tag conditional halaman post , jadi iklan hanya muncul di halaman postingan aja, contoh nya blog saya ini bisa cek speednya 90 ke atas pada versi mobile dan pc
    4. jika mau pakai cara ke dua
      <b:if cond='data:view.isPost'>
      <!-- js adsansenya di sini -->
      </b:if>


      lazyload adsanse bisa cek di sini
      https://blog.choipanwendy.com/2020/12/cara%20memasang-lazyload-adsanse-dengan-auto-ads.html

      kalau saya sendiri menggunakan cara kedua dan pakai script anti adblock yang di dalamnya sudah ada js adsanse yang sudah menggunakan async
      https://blog.choipanwendy.com/2021/02/cara-memasang-anti-adblock-di-blogger.html
  3. kalau menggunakan lazyload, earningnya bakal ngurang ya mas
    1. Iya karna iklan tidak akan di muat jika tidak ada aktifitas scrol, sehingga element lain akan lebih cepat termuat,

      dan di pageSpeed / Gtmetrik jg tidak terdeteksi karna tdk ada aktifitas scrol
  4. kalau untuk median ui versi 1.5 ini apa masih sama mas, untuk penerapan iklan paralax ini?
    1. Untuk median ui v1.5 ubah post-body menjadi postBody pada javascriptnya
    2. siap mas, makasih mas :)
  5. terima kasih mas, terpasang sudah
    1. Sama2 mas
  6. Mas, di template imagz data:post.body/ hanya satu gimana? Soalnya pas saya pasang, iklannya malah muncul di bawah judul bukan ditengah.. Kalo kayak gini gimana?
    1. ubah post-body di js menjadi postBody
  7. Mas klo biar bisa tampilan desktop juga gimana mas?
    1. hapus
      <b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
      Dan penutupnya
    2. Makasih mas
  8. Mas numpang nanya:
    Saya paste kode pertama yang di atas B:Skin tapi muncul notifikasi invalid:
    "The widget settings in widget with id PageList1 is not valid. Page title is invalid."

    Itu gimana solusinya ya Mas?
    1. Untuk css letakkan di atas kode atau di dalam
      ]]></b:skin>

      Atau jika masih ada kendala bisa letkkan di atas
      </head>

      Namun css harus di bungkus dengan tag style terlebih dulu seperti ini
      <style>
      /* css pastekan di sini */
      </style>
    2. Sudah berhasil. Terima kasih banyak Mas. Sukses selalu
  9. Mas tolong buatkan versi
    nya dong, sebab tamplet saya supoort
    bukan Tag p ��
    1. Gunakan tag p saat membuat pragraf pada artikel, sebenarnya tag br uda tidak di sarankan utk membuat pragraf , jika memang masih ingin menggunakannya ubah .post-body p menjadi .post-body br pada javascript
  10. kalau yang artikelnya pakai div gimana, bukan p
    1. tidak di sarankan buat paragraf pakai div mas, karna tag div itu banyak di pakai untuk membungkus element jadi nanti bakal tidak beraturan munculnya,

      kalau tetap mau coba ya silakan, cari kode ini
      ('.post-body p')
      ubah jadi
      ('.post-body div')
  11. Mas klo biar bisa tampilan desktop juga gimana mas?
    1. hapus kode
      <b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>

      sampai penutupnya ini 1 aja jangan 2 yang di hapus
      </b:if>
  12. Terima kasih tutorialnya, sudah saya coba di blog saya masodee(.)com dan worked :D
    1. sama sama ya
  13. Mas saya coba di template viomagz versi 2.0 kok gak work ya. Adakah solusi? atau mungin ada yang terlewat oleh saya.
    1. saya tidak memiliki template yang di maksud, biasanya tiap template pemanggil class post body nya gini post-body coba cek punya mu gimana, jika berbedah ya tingal di samain aja di js parallaxnya
    2. Sudah bisa mas, makasih banyak. Blog mas bener-bener jadi referensi yang tepat. Senangnya bisa nemu wendycode.com
  14. Mas kalo muncul 2 iklan paralax dalam satu artikel gmna mas?
    1. tinggal pasang 2 x kodenya
  15. mas punya saya muncul di akhir artikel,bagaimana supaya muncul di tengah artikel
    1. pertama pastikan menulis artikel menggunakan tag P, kedua class post body post-body jika tidak sama di sesuaikan aja
© 2020 - Wendy Code