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

Blogr-AMP for Ads & Monetization

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



Have a comment/question? Add it here... expand_more

Comment on Google+ expand_more

Comment on Facebook expand_more

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

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

Blogr-AMP Blogger AMP HTML Template
Rated 5/5 based on 98 reviews
Add 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 Blogr-AMP for Ads & Monetization.

MOBILE TEST by GOOGLE launch VALIDATE AMP launch
mail