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> atau di atas kode </style>

/* 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 and 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>

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.