Topics

Create Blogger AMP HTML template install & download Accelerated Mobile Pages themes for Blogspot platform.


Blogr-AMP for Ads & Monetization

Blogr-AMP for Ads & Monetization
Theme Version: 1-0-0 & below...

Describes the usage of Blogr-AMP theme ads placement using amp-ad component & tags required with AMP HTML Blogger template framework.

Reference location to update/edit ads placement for Blogr-AMP Blogger blog layout using AMP HTML tags/components amp-ad or amp-img or text with links.

Use amp-ads Adsense on Blogger Template with AMP Monetization

Location


Blogger Dashboard Layout

offer-top

  • Preferred AMP tags/components usages.
  • Displays ads or text below Blogger page navigation 
  • Available in web view.


offer-bottom

  • Preferred AMP tags/components usages. 
  • Displays ads or text below Blogger blog posts.
  • Available in web view.


sticky-ads (web)
sticky-ads (mobile)

  • Strictly for amp-ad tags. 
  • Displays "floating/sticky" on blog page footer unless closed. 
  • Provide ads display for mobile & web view.


user-notify (optional)

  • Preferred AMP tags/components usages. 
  • Use amp-img tag or text with link to display ads as a replacement for a notifier.
  • Displays "floating/sticky" on blog page footer unless closed.
  • Available in web & mobile view

Template HTML - Blog1

<b:includable id='post-ads'>

  • Strictly for amp-ads tags.
  • Displays amp-ad specific tag below blog post contents

<b:includable id='post-ads-inner'>

  • Strictly for amp-ad tags
  • Displays amp-ad specific tag below post title

Layout Reference: https://blogr-amp.blogspot.com/docs

Behavior


  • AMP tags/components strict use.
  • Javascripts not allowed. 
  • DOM element with attribute class by name not allowed.
  • Form elements not allowed.
  • Style tags not allowed.
  • Sticky ads displays once users scrolls. Refer AMP reference below.

Examples Usages


amp-ad

Use with Adsense

<amp-ad data-ad-client='ca-pub-12345678912345' data-ad-slot='1234567890' height='250' type='adsense' width='300'>
</amp-ad>

  • Copy & paste codes to assigned section.
  • Replace Adsense data-ad-client unique ID
  • Replace Adsense data-ad-slot unique ID
  • Replace width with the ads width
  • Replace height with the ads height.
  • Save settings.

amp-img 

Use Custom Images with Link

<a href='{{LINK_URL}}' target='_blank'>
  <amp-img height='265' layout='responsive' src='{{IMAGE_URL}}' width='320'/>
</a>

  • Copy & paste codes to assigned section
  • Replace {{LINK_URL}} to the page to refer to
  • Replace {{IMAGE_URL}} with the uploaded image to display
  • Replace width value with the image width
  • Replace height value with the image height.
  • Save settings

Style


Use Blogr-AMP pre-built ads class ads-square or ads-banner to easily style amp-ads according to its layout.

<div class='ads ads-square'>
  <amp-ad data-ad-client='ca-pub-12345678912345' data-ad-slot='1234567890' height='250' type='adsense' width='300'>
  </amp-ad>
</div>

<div class='ads ads-banner'>
  <amp-ad data-ad-client='ca-pub-12345678912345' data-ad-slot='1234567890' height='90' type='adsense' width='768'>
  </amp-ad>
</div>

CSS (pre-assigned)

.ads { text-align:center; margin:0 auto; }
.ads-square { max-width: 300px; height: auto; }
.ads-banner { max-width: 768px; height:auto; }

Useful AMP References



Blogr-AMP Blogger AMP HTML TemplateRated 5/5 based on 98 reviewsAdd amp-ads use Adsense for Blogr-AMP Blogger template with AMP integrations with data-slot-id and data-ad-client defined attributes. Insert amp-img tags to include images as ads with links with detail location to monetize ads performance.Blogr-AMP: Blogr-AMP for Ads & Monetization
5/ 5
Best AMP Blogger template, Blogr-AMP exceeded my expectations. Search engine friendly, easy to use, backed by great support Describes the usage of Blogr-AMP theme ads placement using amp-ad  component & tags required with AMP HTML Blogger template framework. ....

Topics You Might Be Interested...


Disqus Comments

Facebook Comments

Working to get connected...

Ooops! We're having trouble connecting. Please refresh your page or contact us...

Code Parser

Have a code snippet to share? Format RAW codes here...

Users who needs to share code snippets in comments, use helper below to paste your codes & copy to comments body.

Follow us on Instagram
@irsahindesigns





More from Instagram...

Working...

Ooops! We're having trouble connecting...