Mungkin Anda pernah melihat iklan gaya paralaks yang saya maksud (bukan paralaks sebenarnya hahahaha). Biasanya gaya iklan ini akan menggunakan iklan yang tinggi, sedangkan area untuk melihat iklannya adalah kotak dengan ukuran 300x250.
Dengan begitu, iklan tinggi (160x600, 180x600, 300x600) dapat ditampilkan tanpa menghabiskan area tempat iklan ditempatkan berukuran 300x250.
Nah, ini (iklan paralaks yang saya maksud) juga bisa kita buat di AMP HTML blog dengan menggunakan amp-fx-flying-carpet untuk membuat efek paralaks pada AMP HTML.
Nah jika Anda ingin mencobanya, silahkan ikuti langkah-langkah di bawah ini.
Namun perlu diketahui, pastikan unit iklan ini berada di bawah viewport/bukaan jendela yang pertama kali terlihat agar amp-fx-flying-carpet bekerja.
Mohon simpan js amp-fx-flying-carpet ini diatas kode </head>
<script async="async" custom-element="amp-fx-flying-carpet" src="https://cdn.ampproject.org/v0/amp-fx-flying-carpet-0.1.js"></script>
Kemudian salin kode HTML di bawah ini
<b:if cond='data:blog.pageType == "item"'>
<div class='above_post'>
<amp-fx-flying-carpet height='250px'>
<amp-ad data-ad-client='xxxxxxxxxxxxxxxxx' data-ad-slot='xxxxxxxx' height='600' layout='fixed' type='adsense' width='300'>
</amp-ad>
</amp-fx-flying-carpet>
</div>
</b:if>
Dan simpan di atas kode berikut:
<div class='post-body entry-content'
Kemudian tambahkan CSS ini ke gaya amp-custom untuk halaman posting
.above_post {
padding-top: 8px;
width: 300px;
margin: 0 20px 5px 0;
display: inline;
float: left
}
@media screen and (max-width:414px) {
.above_post {
padding-top: 10px;
width: 100%;
height: auto;
margin: 0 0 10px;
display: block;
float: none
}
}
Jika blog Anda menggunakan sticky header, silahkan tambahkan css berikut untuk mencegah iklan dari sticky header.
.above_post amp-ad {
margin-top: 60px
}
Simpan kode berikut di atas kode</head>
<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>
Kemudian simpan kode HTML di bawah ini tepat di atas kode berikut.
<div class='post-body entry-content'
Berikut kode HTMLnya.
<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 Anda menggunakan untuk iklan banner (banner dengan tinggi 600px dan lebar 300px), silahkan ganti url gambar pada kode di atas.
Jika Anda menggunakan untuk iklan dengan iframe atau adsense (iklan 300x600), silakan ganti tag <img> di atas dengan kode iklan Anda.
Semoga beruntung....
