bergabung di grup telegram kami

cara memasang iklan adsanse sebelum atau sesudah elemen tertentu

cara memasang iklan adsanse sebelum atau sesudah elemen tertentu di blogger

Hallo semua pada postingan sebelumnnya saya telah membagikan cara memasang iklan adsanse di tengah postingan blogger dan pada kesempatan kali ini saya akan membagikan topik yang sama yaitu cara memasang iklan adsanse sebelum atau sesudah elemen tertentu.

yang di maksud elemen tertentu adalah , semisalnya di dalam postingan kita memiliki related post kita bisa menampilkan iklan sebelum elemen related post tersebut , kurang lebih penampakannya akan tampak seperti di bawah ini.


Lorem Ipsum is simply dummy text

<!-- akan menampilkan iklan di sini -->

related post hare
  • related 1
  • related 2
  • related 3
  • Cara Memasang Iklan Sebelum Elemen Tertentu

    sebelumnnya pastikan kalian memahami mengenai class dan id pada template, di sini saya contohkan semisalnya saya memiliki related post dengan class related-post maka bisa menggunakan script di bawah ini.

    <b:if cond='data:view.isPost'>
    <div class='WendyAdsBefore'>
    <!-- Kode Iklan AdSense Kalian Di Sini -->
    </div>
    <script>
    //<![CDATA[
     function WendyAdsBefore(e,t){let o=document.getElementsByClassName("WendyAdsBefore")[0];if(o){let d=document.querySelectorAll(e)[t-1];d.parentNode.insertBefore(o,d)}}WendyAdsBefore(".post-body .related-post","1");
    //]]>
    </script>
    </b:if>
    kode ini bisa kalian letakkan di atas </body> atau &lt;!--</body>--&gt;&lt;/body&gt; dan jangan lupa untuk menganti <!-- Kode Iklan AdSense Kalian Di Sini --> dengan kode unit iklan kalian , dan class .related-post dengan class , id atau tag milik kalian

    perhatikan kode WendyAdsBefore(".post-body .related-post", "1") .post-body adalah elemen html tempat isi postingan, jadi tidak perlu di ganti karena biasanya semua template sama aja kecuali nama elemennya berbeda. Kemudian iklan akan di sisipkan sebelum elemen html dengan class .related-post yang pertama jika ada banyak related post di dalam postingan maka yang di pilih adalah yang ke 1

    tidak harus elemen related post bisa juga elemen lain misalnya sebelum heading 2 seperti di bawah ini.

    
    Lorem Ipsum is simply dummy text
    
    <!-- akan menampilkan iklan di sini -->
    
    <h2>SUBHEADING</h2>
    Lorem Ipsum is simply dummy text
    

    maka kode yang di gunakan akan tampak seperti di bawah ini

    <b:if cond='data:view.isPost'>
    <div class='WendyAdsBefore'>
    <!-- Kode Iklan AdSense Kalian Di Sini -->
    </div>
    <script>
    //<![CDATA[
     function WendyAdsBefore(e,t){let o=document.getElementsByClassName("WendyAdsBefore")[0];if(o){let d=document.querySelectorAll(e)[t-1];d.parentNode.insertBefore(o,d)}}WendyAdsBefore(".post-body h2","1");
    //]]>
    </script>
    </b:if>

    artinya iklan akan muncul pada tag h2 pertama, jika ada banyak h2 dalam postingan maka yang dipilih adalah yang ke 1 , kalian juga bisa mengubah jadi yang ke 2 atau ke 3 silakan di sesuaikan kebutuhan aja.

    bagaimana jika sebaliknya? pada tutorial di atas kan untuk menampilkan iklan sebelum elemen tertentu maka sekarang kita akan membuat menampilkan iklan sesudah elemen tertentu mari simak caranya di bawah ini.

    Cara Memasang Iklan Sesudah Elemen Tertentu

    cara penerapannya sama seperti cara di atas bedanya script ini kebalikannya aja , jadi tidak perlu saya jelaskan ulang lagi ya.

    cara ini juga sekarang telah saya pakai untuk menampilkan iklan parallax sesudah elemen related post pada blog ini, bisa kalian lihat semua postingan saya pada tampilan mobile iklan parallax saya muncul setelah / sesudah elemen related post.

    jadi untuk kalian yang ingin menampilkan iklan sesudah elemen tertentu bisa memakai script di bawah ini.

    
    Lorem Ipsum is simply dummy text
    
    related post hare
    
  • related 1
  • related 2
  • related 3
  • <!-- akan menampilkan iklan di sini -->
    <b:if cond='data:view.isPost'>
    <div class='WendyAdsAfter'>
    <!-- Kode Iklan AdSense Kalian Di Sini -->
    </div>
    <script>
    //<![CDATA[
    function WendyAdsAfter(e,t){let n=document.getElementsByClassName("WendyAdsAfter")[0];if(n){let d=document.querySelectorAll(e)[t-1];d.parentNode.insertBefore(n,d.nextSibling)}}WendyAdsAfter(".post-body .related-post","1");
    //]]>
    </script>
    </b:if>

    ok jadi sekian cara memasang iklan adsanse sebelum atau sesudah elemen tertentu semoga bermanfaat

    Baca juga :
    tutorial blogger

    9 komentar



    image quote pre code
    1. kalau memasang iklan paralax setelah related post, gimana mas?
      1. Pakai cara kedua mas, tinggal sesuaikan aja nama class atau id relatedpost nya
      2. untuk js nya pake yang .WendyAdsAfter ya
      3. okay mantap mas, makasih ya. solved.

        kalau misalkan di buat manual related postnya bisa mas?
    2. Bang kalau misalnya saya bikin ccs gitu nah kadang suka ke campuran smaa related post carany gimana o
      Bang
      1. buat class yg unik agar tidak bentrok dengan yg lainnya
    3. gan, kok iklannya jadi tumpeh2 gini? (keluar jalur sampe sidebar) cara ngatasi nya gimana ya?

      https://blogger.googleusercontent.com/img/a/AVvXsEhUCymAXT75G5tHtfVMf_joDCfgUg0TaXGw3EhjQjfh0aqJPDSQuiV8Rxrg9HrgqnXV3UDPAY7u_OXDVqgkT8V1PbIRr6OO_oacNSFkg0ZsypuuOJinI5NjZCzgXQsrwhx_6xdMGvMOguc69NDfwwEOhR26oZb8MAflwa0Cf4ZAMm07tkxL2cF_UafT=s1263
      1. penulisan unit iklannya coba lihat
    4. kalau boleh CSS yang agan pake buat atur tampilan iklannya di upload juga dong, terimakasih
    © 2020 - Wendy Code

    Pemblokir Iklan Terdeteksi

    Matikan adBlock anda untuk dapat mengakses situs ini.

    translate to english