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::
<div class='post-body entry-content' ........
dan pasang kode dibawah ini diatas kode tersebut ::
Lantas bagaimana kita bisa Membuat Iklan Parallax pada Blogger Non AMP.

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 == "item"'> <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 == "item"'> <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.
Related Posts :
script
SEBELUMNYA
« Pos Sebelumnya
« Pos Sebelumnya
BERIKUTNYA
Posting selanjutnya »
Posting selanjutnya »