Ditulis oleh: Ditulis pada: 6/03/2017
Masih ingat dengan cara membuat iklan parallax pada blog AMP? Kita dapat membuat iklan parallax pada blog AMP dengan mudah dengan bantuan js amp-fx-flying-carpet.Tentu saja hal tersebut tidak akan bekerja pada blog non AMP karena itu khusus untuk blog dengan template AMP.
Lalu bagaimana jika kita ingin membuat iklan parallax pada blog non AMP?
Banyak yang menanyakan hal ini (iklan parallax pada blog non AMP) kepada saya, dan akhinya saya berhasil membuatnya, seperti pada halaman berikut:
Iklan parallax ini bisa untuk banner image, iklan dengan iframe, atau untuk adsense.
Jika Anda ingin mencobanya, silahkan copy kode-kode berikut.
Silahkan 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 HTML-nya.
<b:if cond='data:blog.pageType == "item"'>
<div class="paralax_div">
<div>
<div>
<div>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhL7J44aJ2yeKW_dfGKslt1MJcKgJY36iVO67DfiH92WLoEL3rTAj1IwhegF1TyOUonkK6j2fQz0xPTk6Qt3kjSCpAmHW2ikl7qfHgI8hhjuoqz9P3woF11uUd_GIFnDvfwhHv9i1ykv1EP/s300/18835763_10208567628658748_4561466345738187918_n.jpg" alt="banner" width="300" height="600" />
</div>
</div>
</div>
<span class="clear"/>
</div>
</b:if>
Jika Anda gunakan untuk iklan banner (banner dengan tinggi 600px dan lebar 300px), silahkan ganti url image pada kode di atas.
Jika Anda gunakan untuk iklan dengan iframe atau adsense (iklan 300x600), silahkan ganti tag
<img> di atas dengan kode iklan Anda.