NixOS Linux 17.03 Installation with KDE Plasma 5 on VMware Workstation

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!