Thursday, August 2, 2018

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 == &quot;item&quot;'>
<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!