Thursday, August 2, 2018

Create AdSense Ad Slot with Parallax Style in AMP 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!