Create AdSense Ad Slot with Parallax Style in AMP Blogger
How to Install amp-fx-flying-carpet On Blogspot Blog. How to Install AdSense Parallax Ads in Blogger
How to Install amp-fx-flying-carpet On Blogspot Blog
Recently, AMP Project and AdSense released a new breakthrough about new ad units and new extensions for AMP. Yep! is amp-fx-flying-carpet.
This latest AMP extension allows you to create parallax ads that you can install on your website, including Wordpress based blogs.
The way is easy enough, you simply create a new div for ad placement, and then install a vertical ad with a minimum size of 300X600. Want to know how? Let's follow the way here:
1. first step, put amp-fx-flying-carpet js before </head>:
<script async='async' custom-element='amp-fx-flying-carpet' src='https://cdn.ampproject.org/v0/amp-fx-flying-carpet-0.1.js'></script>2. Now, you must install this CSS for your parallax ad placement. Copy and paste the code below, before the code </ amp-custom>
.abovead {
padding-top: 0px;
width:300px;
margin: 0 5px 5px 0px;
display: inline;
position: inline;
top: 500;
float: left;
background:
/* On "top" */
repeating-linear-gradient(
45deg,
transparent,
transparent 10px,
#ccc 10px,
#ccc 20px
),
/* on "bottom" */
linear-gradient(
to bottom,
#eee,
#999
);
background-repeat:no-repeat;
background-size:cover;
background-attachment: fixed;
}
.abovead:hover span {
visibility:visible;
top:0; left:250px;
z-index:1;
}
@media screen and (max-width:414px) {
.abovead {
padding-top: 5px;
width: 100%;
height: auto;
margin: 0 0 5px;
display: block;
float: none
}
}
.amp-flying-carpet-text-border {
background-color: white;
color: black;
text-align: center;
border-style: solid;
} 3. For ads to appear under the title, copy the following code, paste it under the code <div class='post-body entry-content' :
<b:if cond='data:blog.pageType == "item"'>
<div class='abovead'>
<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>* Replace XXXX with your Adsense publisher, and YYYY with the 300X600 AdSense ad unit code you have created.
5. Click SAVE to finish the step:
Try to refres your page content, and see it works!