---

Cara Membuat Iklan Parallax pada Blogger Non AMP

Kali ini kita akan Membuat Iklan Parallax pada Blogger Non AMP Mudah kok caranya menggunakan bantuan JS amp-fx-flying-carpet namun script ini tidak akan berjalan pada template blog AMP.

Lantas bagaimana kita bisa Membuat Iklan Parallax pada Blogger Non AMP.

Banyak blogger yang menginginkan blognya terpasangi iklan dengan cara Iklan Parallax pada Blogger Non AMP berikut DEMO

Sobat bisa menggunakan Iklan Parallax pada Blog untuk dipasangi banner, iframe atau adsense jika sobat ingin memasangnya silahkan gunakan kode-kode berikut:

Pasang kode berikut diatas kode </head> berikut kodenya::

<b:if cond='data:blog.pageType == &quot;item&quot;'> <style type='text/css'> /*<![CDATA[*/ .paralax_div { position: relative; overflow: visible; width: 300px; height: 250px; margin-right: 20px; display: inline-block; float: left; z-index: 9999; } .paralax_div > div { overflow: hidden; width: 100%; height: 100%; margin: 0; position: absolute; top: 0; left: 0; clip: rect(auto auto auto auto); } .paralax_div > div > div { width: 100%; height: 100%; position: fixed; top: 0; margin: 0 auto; -moz-transform: translateZ(0); -webkit-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); } .paralax_div > div > div > div { width: 100%; height: 100vh; position: absolute; left: 50%; top: 0; border: none; -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-content: center; align-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; background: #ddd; } .paralax_div > div > div > div > * { margin: 0; margin-top: 0; } .paralax_div > div > div > div > a { width: 100%; height: 100vh; } .paralax_div img,.paralax_div iframe,.paralax_div ins { height: 600px; width: 300px; } .clear { clear: both; display: block } @media screen and (max-width:640px) { .paralax_div { width: 100%; height: 250px; margin: 0 auto; float: none; } .paralax_div > div > div > div { left: 50%; -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } .paralax_div > div > div { width: 100%; left:0; text-align: center; } .paralax_div img { margin: 0 auto; width:auto; max-width:100%; height:auto; } } @media screen and (max-width:320px) { .paralax_div iframe,.parallax_banner ins { margin: 0 auto; width:100%; height:600px; } } /*]]>*/ </style> </b:if>

Cari kode berikut ::
<div class='post-body entry-content' ........

dan pasang kode dibawah ini diatas kode tersebut ::

<b:if cond='data:blog.pageType == &quot;item&quot;'> <div class="paralax_div"> <div> <div> <div> <img src="https://4.bp.blogspot.com/-JpV04y4MQwM/WTITSODPw-I/AAAAAAAArd4/KKuyWD3QGuADLhqSj2Oif781jK4xrnNjQCLcB/s300/18835763_10208567628658748_4561466345738187918_n.jpg" alt="banner" width="300" height="600" /> </div> </div> </div> <span class="clear"/> </div> </b:if>

Jika sobat menggunakan iklan banner dengan ukuran tinggi 600 lebar 300 silahkan ganti alamat url diatas. Sobat juga bisa pasang kode iklan adsense sobat pada tempat tersebut.

** Sobat Barusan Telah Membaca Postingan Tentang Cara Membuat Iklan Parallax pada Blogger Non AMP Semoga Bermanfaat Dan Silahkan baca postingan kami yang lain, Terima Kasih.

---

Tweet