Cara Membuat Iklan Parallax di Blogger

Iklan Parallax ataupun parallax scrolling web design adalah suatu teknik khusus yang dimana sebuah objek berada pada latar belakang bergerak lebih lambat dibandingkan dengan objek yang berada di latar depan sehingga terlihat objek tersebut tidak bergerak. Biasanya jenis iklan parallax ini seringkali anda temukan pada situs-situs media besar yang ada di Indonesia, akan tetapi jenis iklan ini sudah banyak juga digunakan oleh kebanyakan blogger salah satunya situs yang sedang anda baca saat ini.

Apabila anda melakukan scrolling terhadap jenis iklan ini, maka iklan ini akan diam dan akan melekat sesuai dengan pergerakan scroll yang anda lakukan. Untuk lebih jelasnya, Anda bisa lihat saja jenis iklan parallax yang sudah diterapkan pada situs ini pada tengah-tengah artikel. Akan tetapi, iklan parallax yang saya terapkan pada situs ini hanya tersedia pada versi mobile saja.

Hal ini dikarenakan, iklan parallax sangat direkomendasikan untuk muncul pada versi Mobile bukan Desktop. Mungkin, diantara anda pernah mengikuti tutorial blogger lainnya dengan cara memasang iklan parallax di blog ini, sayangnya banyak dari cara tersebut yang tidak work pada beberapa template alias iklan yang muncul bukan ditengah postingan, melainkan berantakan sehingga membuat pengunjung merasa kurang nyaman.

Untuk itu, saya berinisiatif untuk membuatkan artikelnya dengan apa yang sudah saya pelajari dan terapkan pada situs ini dan membagikannya kepada anda semua. Proses membuat iklan parallax yang akan saya bagikan pada artikel ini tentu saja menggunakan Javacript dan juga CSS yang pastinya tidak memberatkan loading blog anda mengingat tidak adanya jQuary.

Banyak orang menafsirkan bahwasannya untuk memasang iklan parallax ini harus dengan kode iklan Google Adsense. Padahal, selain Google Adsense anda juga bisa memasang iklan lainnya seperti MGID, Adsterra, banner pribadi maupun banner sponsored, dan masih banyak lagi. Jika anda ingin menerapkannya, maka silahkan ikuti langkah-langkah berikut ini.

Cara Membuat Iklan Parallax di Blogger

Sebelum mengikuti langkah-langkah dibawah ini, alangkah baiknya anda menyediakan script iklan maupun script banner yang ingin anda jadikan Parallax. Setelah menemukan script nya, maka simpan saja terlebih dahulu di Notepad. Berikut langkah-langkahnya:

• Buka akun Blogger anda masing-masing.
• Masuk ke menu Tema » Edit HTML » selanjutnya salin css dibawah ini dan letakkan diatas kode ]]></b:skin>

/* iklan paralax by mahes blog  */
.mahesparalax{position:relative;display:block;overflow:visible;width:100%;height:0;margin:auto;text-align:center;z-index:1}
.mahesparalax > div{overflow:hidden;width:100%;height:100%;margin:0;position:absolute;top:0;left:0;clip:rect(auto auto auto auto)}
.mahesparalax > 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)}
.mahesparalax > 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}
.mahesparalax > div > div > div > *{margin:auto}
.mahesparalax > div > div > div > a{width:100%;height:100%}
.mahesparalax img,.mahesparalax iframe,.mahesparalax ins{height:100%;border:0}
.clear{clear:both;display:block}
.mahesparalax{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;}

• Setelah itu, salin kode dibawah ini dan letakkan tepat dibawah kode <data:post.body/> biasanya ada lebih dari satu bahkan hingga tiga kode seperti ini apabila di template VioMagz dan sejenisnya, apabila anda menggunakan Median UI. Maka, hanya ada satu kode seperti ini.

<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
 <b:if cond='data:view.isPost'>
  <div class='mahesparalax'>
   <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.mahes.web.id/
function mahesparalax(Ad1) {let paralax = document.getElementsByClassName ('mahesparalax')[0]; if (paralax) {let Adsp = document.querySelectorAll ('.post-body p')[Ad1 - 1]; Adsp.parentNode .insertBefore (paralax, Adsp.nextSibling)}} mahesparalax(4);/*]]>*/</script></b:if></b:if>

Silahkan ganti ca-pub-3178545226xxxxxxx dan data-ad-slot='264506xxxx' dengan kode milik Adsense anda. Selain itu, Anda juga bisa perhatikan pada kode mahesparalax(4); angka 4 artinya iklan parallax akan muncul setelah paragraf ke 4. Jika anda ingin merubahnya, maka anda bisa sesuaikan dengan pragraf berapa nantinya iklan ini akan muncul seperti mahesparalax(5), dan lain sebagainya.

• Selesai.

Pada saat menulis artikel, sangat diwajibkan untuk menggunakan tag <p> saat membuat paragfraf baru agar iklan parallax ini berjalan dengan baik tanpa adanya kendala maupun masalah lainnya.

Itulah artikel kali ini mengenai cara membuat iklan parallax di blogger dengan mudah yang bisa anda ikuti, Semoga bermanfaat!