Great News! Try our new tool to convert img to amp-img. Try Now!

Saturday, August 4, 2018

Get Better CTR with Customize AMP Sticky Ad with CSS

How to Customize and Styling AMP-Sticky-Ad with CSS in AMP Blogger template For better CTR. Free CSS3 AMP tutorial

Customize and Styling AMP-Sticky-Ad with CSS in AMP Blogger template For better CTR

The most successful ad type on Google's valid Blogger AMP template is AMP Sticky Ad. This type of ad will show an overlay at the bottom of the screen. But visitors can still eliminate these ads by pressing the close button that contained in layout amp-sticky-ad.

Here's the problem, which makes the ads often ignored. That's why you need to modify the layout to make the ads look more attractive. By using CSS, it can certainly be done. Just by doing 'override' on the amp-sticky-ad selector, the display will change.

I will explain how to customize AMP Sticky Ad by using CSS below.

On amp-sticky-ad, selector contained in amp.css among others .amp-sticky-ad.amp-sticky-ad-close-button and .amp-sticky-ad-top-padding .

I try to modify amp-sticky-ad and amp-sticky-ad-close-button to look similar to sticky ad on Google AdSense Auto Ads.

Make sure you've added an amp-sticky-ad ad with a height size of 100px. Read this article: Alternative Adsense Solution for Page-Level Ads on Blogger AMP

Open EDIT HTML in your Blogger Template dashboard, then search for <style amp-custom='amp-custom'>. Copy the following CSS code to modify close button on amp-sticky-ad, paste it after the code <style amp-custom='amp-custom'>.
/* Amp sticky Close Button */
.amp-sticky-ad-close-button{position:absolute;visibility:hidden;width:28px;height:28px;top:-28px;margin:auto;left:0;background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxMjkgMTI5IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMjkgMTI5IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4Ij4KICA8Zz4KICAgIDxwYXRoIGQ9Im0xMjEuMywzNC42Yy0xLjYtMS42LTQuMi0xLjYtNS44LDBsLTUxLDUxLjEtNTEuMS01MS4xYy0xLjYtMS42LTQuMi0xLjYtNS44LDAtMS42LDEuNi0xLjYsNC4yIDAsNS44bDUzLjksNTMuOWMwLjgsMC44IDEuOCwxLjIgMi45LDEuMiAxLDAgMi4xLTAuNCAyLjktMS4ybDUzLjktNTMuOWMxLjctMS42IDEuNy00LjIgMC4xLTUuOHoiIGZpbGw9IiMwMDAwMDAiLz4KICA8L2c+Cjwvc3ZnPgo=);background-size:13px 13px;background-position:50% center;background-repeat:no-repeat;background-color:#969595;box-shadow:0 0 5px 0 rgba(0,0,0,.2);border:none;width:80px;   border-radius: 50px 50px 0 0;}

Then the AMP STICKY AD Close button will change as shown below:

Next I will modify the display border to be similar to sticky ad on Auto Ads AdSense. Copy and paste the following CSS below the code <style amp-custom='amp-custom'>
/* DIV AMP-STICKY-AD */

amp-sticky-ad[visible]{border-top-style: solid; border-top-color: #969595; border-top-width: 10px;}

Result:

To proceed to the final process, click save. To see if the display changes, please access your blog on your smartphone.

May be useful :)

Read more: Create Automatic Watermark on Blogger Image Articles