Customize and Styling AMP-Sticky-Ad with CSS in 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.
On amp-sticky-ad, selector contained in amp.css among others
I try to modify
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
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
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
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
Comments
Post a Comment