Cara Membuat Iklan Paralax Di Tengah Konten Artikel Blogger

 Hay Semuanya,pada tanggal 17 Juni 2024 ini tepatnya di hari raya idul adha saya akan membuat artikel tentang Tutorial Cara Membuat / Pasang Iklan Paralax Di Tengah Postingan Artikel Blog Kususnya Blogger / Blogspot.

Pada saat saya masih belajar ngeblog, saya sempat kepikiran gimana sih cara membuat iklan Paralax atau menampilkan iklan google AdSense di tengah postingan artikel blog yang diam gak bergerak jika artikel di skroll maka iklan akan tertindih oleh paragraf artikel blog tersebut.

Setelah saya mencoba-coba membuat codenya Alhamdulillah berhasil dan sayapun sudah menerapkannya di blog okayim.com ini.

Karena saya udah menerapkan iklan Paralax di tengah Postingan Artikel Blog ini, jadi saya gak perlu bagi link demonya ya solv. Kamu bisa melihatnya langsungpada setiap artikel di blog okayimdotcom ini.

Apa Itu Iklan Paralax Dan Manfaatnya ?

Iklan parallax di tengah postingan artikel blog adalah jenis iklan yang muncul di tengah-tengah konten artikel saat pengguna mengulir halaman. Iklan ini dibuat dengan efek paralaks, di mana gambar atau teks iklan bergerak lebih lambat daripada konten artikel di sekitarnya. Hal ini membuat iklan lebih menarik perhatian dan mudah diingat oleh pembaca.

kelebihan iklan parallax di tengah postingan artikel blog:

Lebih menarik perhatian: Efek paralaks membuat iklan lebih menonjol dan mudah dilihat oleh pembaca.

Meningkatkan rasio klik-tayang (CTR): Iklan yang menarik perhatian lebih cenderung diklik oleh pembaca.

Meningkatkan konversi: Iklan yang diklik lebih cenderung menghasilkan konversi, seperti penjualan atau pendaftaran.

Meningkatkan brand awareness: Iklan yang mudah diingat membantu meningkatkan brand awareness dan pengenalan merek.

kekurangan iklan parallax di tengah postingan artikel blog:

Dapat mengganggu pembaca: Beberapa pembaca mungkin merasa iklan parallax mengganggu dan mengganggu pengalaman membaca mereka.

Dapat memperlambat waktu muat halaman: Iklan parallax dapat memperlambat waktu muat halaman, yang dapat menyebabkan frustrasi bagi pembaca.

Mungkin tidak cocok untuk semua jenis konten: Iklan parallax mungkin tidak cocok untuk semua jenis konten, seperti artikel yang panjang atau kompleks.

Secara keseluruhan, iklan parallax di tengah postingan artikel blog dapat menjadi cara yang efektif untuk meningkatkan perhatian, rasio klik-tayang, konversi, dan brand awareness. Namun, penting untuk menggunakannya dengan hati-hati dan memastikan bahwa iklan tersebut tidak mengganggu pembaca atau memperlambat waktu muat halaman.

Berikut beberapa tips untuk menggunakan iklan parallax di tengah postingan artikel blog:

Gunakan iklan parallax dengan hemat: Jangan gunakan terlalu banyak iklan parallax di satu halaman, karena hal ini dapat membuat halaman terlihat berantakan dan mengganggu.

Gunakan iklan parallax untuk konten yang menarik: Iklan parallax paling efektif untuk konten yang menarik dan mudah dibagikan.

Pastikan iklan parallax mudah dilihat: Gunakan warna dan kontras yang tinggi untuk memastikan iklan parallax mudah dilihat oleh pembaca.

Gunakan ajakan bertindak yang jelas: Beri tahu pembaca apa yang Anda ingin mereka lakukan dengan iklan parallax, seperti mengunjungi situs web Anda atau mendaftar ke milis Anda.

Pantau kinerja iklan parallax Anda: Lacak rasio klik-tayang dan konversi iklan parallax Anda untuk melihat apakah iklan tersebut efektif.

Cara Membuat Iklan Paralax Di Tengah Konten Artikel Blog 

Untuk membuat iklan aralax di tengah konten postingan artikel blog mari kita membuat unit iklanya terlebih dahulu.

1. Masuk ke menu iklan di google AdSense anda, kemudian pilih menu menurut unit iklan.

2. Kemudian pilih buat unit iklan baru pilih iklan display lali pilih yang berbentuk vertikal. Dan untuk ukuranya pilih yang responsif saja ya sob.

3.  Langkah berikutnya silahkan kamu pasang code CSS dibawah ini di pengaturan CSS blogger kamu.

/* 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;}

4. Kemudian Pasang Code Html dibawah ini tepat dibawah kode <data:post.body/> pada template blogger kamu.

<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.okayim.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>

Ganti code yang saya warnai dengan id AdSense anda dan id data ad slot sobat. 

Untuk mendapatkan id data ad slot iklan , sobat bisa melihat pada kode javascript unit iklan yang sudah sobat buat barusan. 

Silahkan lihat kodenya baik-baik yang dari google AdSense di sana akan tertera kode yang saya maksudkan.

5. Jika sobat sudah melakukan optimasi seperti langkah 1-4 silahkan sobat klik simpan. Dan lihat hasilnya.

Bang saya udah ikuti tutorial Abang tapi iklan gak muncul ?

Oke jika sobat udah ikuti tutorial saya tapi iklan gak muncul entah karena faktor template yang berbeda atau gimana.

Maka solusinya setiap sobat sudah memposting gambar pada saat menulis artikel.

Silahkan ubah mode penulisan menjadi html.

Silahkan tambahkan code <p> sebelum menulis artikel. Contoh :

<p>Cara Pasang Iklan Paralax Di Tengah Postingan Artikel Blogger By OkayimDotCom.

Setelah mengikuti yang saya instruksikan Maka iklan akan muncul di tengah artikel blog sobat.

Oke sobat sekian Tutorial Cara Buat Iklan Paralax Di Tengah Konten Postingan Artikel Blog semoga artikel ini bermanfaat, sampai jumpa kembali di lain kesempatan.