Maybe you've seen ads parallax style I mean (not
parallax actually hahahaha). Usually this style of ad will use a high ad, while
the area to see its ad is a box with a size of 300x250.
That way, high ads (160x600, 180x600, 300x600) can be
displayed without spending an area where ads are placed 300x250 in size.
Well, this (parallax ads I mean) we can also make on AMP
HTML blog by using amp-fx-flying-carpet to create parallax effect on AMP HTML.
Well if you want to try it, please follow the steps
below.
Paralax Ads style for AMP Blog
But be aware, make sure this ad unit is under the
viewport / window opening first seen in order to amp-fx-flying-carpet work.
Please keep this amp-fx-flying-carpet js above the code
</ head>
<script async="async" custom-element="amp-fx-flying-carpet" src="https://cdn.ampproject.org/v0/amp-fx-flying-carpet-0.1.js"></script>
Then copy the HTML code below
<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>
And save above the
following code :
<div class='post-body entry-content' ..........
Then add this CSS to the amp-custom style for the posting
page
.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
}
}
If your blog uses sticky header, please add the following
css to prevent the ad from sticky header.
.above_post amp-ad {
margin-top: 60px
}
Paralax Ads style for Non AMP Blog
Please keep the following code above </ head> code
<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>
Then save the HTML code below just above the following
code.
<div class='post-body entry-content' ........
Here's the HTML code.
<b:if cond='data:blog.pageType == "item"'>
<div class="paralax_div">
<div>
<div>
<div>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBNmWrZt-mSYdiGueMzXs0XJETARQwSPOKr8WrFd_iCfjNkS0xSifrveapLkgUTwHTNQr2TYiNes8sj7bYtRK-UnS_-sB7ewTtsTcTN64qAWptJkvQdyirVoRqPFwQbOUr_CwS8jjJTquU/s300/18835763_10208567628658748_4561466345738187918_n.jpg" alt="banner" width="300" height="600" />
</div>
</div>
</div>
<span class="clear"/>
</div>
</b:if>
If you use for banner ads (banner with height 600px and
width 300px), please replace url image in the code above.
If you use for ads with iframes or adsense (300x600 ads),
please replace the <img> tag above with your ad code.
Good luck....
