Cara Membuat Iklan Parallax Ditengah Postingan Blogger

Oleh Diposting pada

Cara membuat iklan parallax google adsanse di tengah postingan – Tutorial kali ini mengenai cara memasang iklan parallax google adsanse di tengah postingan di blog. Kami membuat postingan tentang cara memasang iklan parallax google adsanse di tengah postingan karena mungkin ada yang mencari informasi cara membuat iklan parallax google adsanse dengan mudah di blog.

Tutorial cara membuat iklan parallax google adsanse di tengah postingan bisa kalian pasang di blog mengunakan beberapa kode sederhana di bawah ini. Kode yang di butuhkan untuk memasang iklan parallax google adsanse di tengah postingan hanya perlu copy paste dari postingan ini. Tanpa basa basi berikut tutorial cara membuat iklan parallax google adsanse di tengah postingan.

Cara Membuat Iklan Parallax Google Adsanse Di Tengah Postingan

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.

Demikian tadi Panduan Cara setting Ads.txt di wordpress tanpa menggunakan plugin. Mungkin sekian yang bisa saya sampaikan, Smoga bermanfaat..

Posting terkait: