Membuat iklan parallax di blogger

Hello sobat Bloggermuda kali ini admin bakalan menjabarkan mengenai cara membuat iklan parallax di blogger

Info: Jika kamu sudah penasaran dengan pembahasan kita kali ini yuk langsung aja kita bahas bersama sama

Iklan Parallax

Apa itu iklan Parallax? iklan parallax adalah iklan yang muncul di tengah postingan, sedangkan parallax yang di maksud adalah efek parallax yakni menciptakan ilusi optik yang keren pada iklan yang muncul, admin juga menerapkan iklan parallax ini di blog, jika kamu melihat iklan parallax di blog Bloggermuda seperti itulah contoh tampilnya

Apakah bisa membuat iklan parallax muncul di kiri atau di kanan blog semisal menu sidebar atau menu navigasi? ya tergantung bagaimana anda bisa menyesuaikan kode parallax dengan template yang anda gunakan

Fungsi Iklan Parallax

Iklan parallax memiliki beberapa fungsi dan manfaat yang dapat membantu meningkatkan efektivitas tampilan iklan Anda. Berikut adalah beberapa fungsi iklan parallax yang penting:

Meningkatkan Keterlibatan Pengguna

Efek parallax dalam iklan parallax dapat menarik perhatian pengguna dan meningkatkan tingkat keterlibatan. Dengan tampilan yang dinamis dan interaktif, pengguna cenderung lebih tertarik untuk berinteraksi dengan iklan Anda.

Memperkuat Branding: Iklan parallax dapat digunakan untuk memperkuat citra merek Anda dengan cara yang kreatif. Anda dapat menyampaikan pesan merek Anda dengan cara yang menarik dan berbeda, sehingga menciptakan kesan positif pada audiens.

Meningkatkan Tingkat Konversi

Dengan menarik perhatian pengguna dan memberikan pengalaman visual yang menarik, iklan parallax dapat membantu meningkatkan tingkat konversi. Pengguna yang terlibat cenderung lebih mungkin untuk melakukan tindakan tertentu, seperti mengklik tautan atau membuat pembelian.

Memperkuat Pesan Iklan

Dengan menggunakan efek parallax, Anda dapat menyampaikan pesan iklan Anda dengan cara yang lebih menarik dan mudah diingat. Hal ini dapat membantu pesan iklan Anda lebih mudah dipahami dan diingat oleh audiens.

Meningkatkan Pengalaman Pengguna

Iklan parallax dapat menciptakan pengalaman pengguna yang lebih interaktif dan menarik. Dengan tampilan yang dinamis dan efek visual yang menarik, pengguna cenderung merasa lebih terlibat dan terkesan dengan iklan Anda.

Membuat Iklan Parallax

Baiklah sekarang saatnya admin akan jelaskan mengenai bagaimana caranya membuat iklan parallax di tengah postingan blog, silahkan kamu baca dan ikuti setiap arahan yang bakal admin jelaskan di bawah ini

1. Login ke blogger menggunakan akun google milikmu
2. Selanjutnya silahkan pergi ke menu Theme atau Tema kemudian pilih menu Edit HTML
3. Jika sudah silahkan salin seluruh kode CSS pembuat iklan parallax di bawah ini, kemudian taruh di atas kode ]]></b:skin>

/* Iklan Paralax by Bloggermuda.com  */
.rahParallax{position:relative;display:block;overflow:visible;width:100%;height:0;margin:auto;text-align:center;z-index:1}
.rahParallax > div{overflow:hidden;width:100%;height:100%;margin:0;position:absolute;top:0;left:0;clip:rect(auto auto auto auto)}
.rahParallax > 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)}
.rahParallax > 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}
.rahParallax > div > div > div > *{margin:auto}
.rahParallax > div > div > div > a{width:100%;height:100%}
.rahParallax img,.rahParallax iframe,.rahParallax ins{height:100%;border:0}
.clear{clear:both;display:block}
.rahParallax{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 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='rahParallax'>
   <div>
    <div>
      <div>
       <ins class='adsbygoogle adParallax' data-ad-client='ca-pub-xxxxxxxxx' data-ad-slot='xxxxxxxx' style='display:block'/>
        <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
        </script>
      </div>
    </div>
  </div>
 <span class='clear'/>
</div>
<script> //<![CDATA[
function rahParallax(Ad1) {let paralax = document.getElementsByClassName ('rahParallax')[0]; if (paralax) {let Adsp = document.querySelectorAll ('.post-body p')[Ad1 - 1]; Adsp.parentNode .insertBefore (paralax, Adsp.nextSibling)}} rahParallax(4);/*]]>*/</script></b:if>

Info: Silakan ganti ca-pub-xxxxxxxxx dan data-ad-slot='xxxxxxxx' milik kalian, kalian juga bisa mengatur pada pragraf ke berapa iklan akan di tampilkan, perhatikan kode rahParallax(4); angka 4 artinya iklan akan muncul setelah pragraf ke 4 jadi silakan di ubah sesuai kebutuhan.

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

5. Jika sudah jangan lupa untuk klik simpan dan lihat bagaimana hasilnya, semoga bermanfaat.