Topics

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


BlogrAMP (V2) amp-ad - Monetizing Blogger Blog Super Easy

BlogrAMP (V2) amp-ad - Monetizing Blogger Blog Super Easy
Theme Version: 2-0-0

BlogrAMP Blogger theme with AMP HTML integrations makes monetizing ads on your blog using AMP supported ads network super easy with custom widget installer.

The theme works great with Adsense, one of the most popular ad network which Blogger users can apply right from their dashboard "Earnings" panel. Read how your blog can be eligible to apply for Adsense on Blogger blogs here.

Blogr-AMP AMP HTML template layout already has a 100% success rate for new Adsense applications. But... this does not mean that you can get approved immediately when using this theme as many other factors needs your careful consideration.

Did you know that the team provides Free crash course, analyzing & preparation for your Adsense applications when using Blog-AMP themes? Find out more right here...

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-ad Adsense on Blogger Template with AMP HTML for Monetization

Location


Blogger Dashboard Layout


offer-top

  • Preferred AMP HTML components usage.
  • Displays ads or text below blogpage main navigation 
  • Available on all pages.
  • Viewable on web & mobile.

ads below title

  • Preferred AMP HTML components usage. 
  • Displays ads or text below blog post title.
  • Available on blog Posts and Pages.
  • Drag & drop re-arrange widget with ads accordingly.
  • Viewable on web & mobile.

ads below blog post contents

  • Preferred AMP HTML components usage. 
  • Displays ads or text below blog post body.
  • Available on blog Posts and Pages.
  • Drag & drop re-arrange widget with ads accordingly.
  • Viewable on web & mobile.

offer-bottom

  • Preferred AMP HTML components usage. 
  • Displays ads or text below blog posts above footer.
  • Viewable on web & mobile.

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

  • Strictly for amp-ad tags. 
  • Displays "floating/sticky" on blog page footer unless closed. 
  • amp-ad component requires the width & height to be set.
  • Viewable on web & mobile.

user-notify (optional)

  • Preferred AMP HTML component usage. 
  • 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.
  • Viewable on web & mobile.

Template HTML - Blog1


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

  • Strictly for amp-ad AMP HTML component.
  • Displays amp-ad specific component in between blog posts at homepage or index pages views.
  • Available on index pages, search pages & archive pages.
  • Viewable on web & mobile.

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

Behavior


  • AMP HTML component strict use.
  • Javascripts prohibited. 
  • DOM element with attribute class by name prohibited.
  • Form elements prohibited.
  • Style attribute prohibited.
  • Inline style tags prohibited.
  • 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 offers class offers-square or offers-banner to easily style amp-ads according to its layout.

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

<div class='offers offers-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)

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

Useful AMP References



Blogr-AMP Blogger AMP HTML Template Rated 5/5 based on 98 reviews Monetizing ads add amp-ad use Adsense or supported ad networks for Blogr-AMP Blogger template with AMP integrations rearrange, drag & drop ads placement easily to optimize ads display in blog pages. Blogr-AMP: BlogrAMP (V2) amp-ad - Monetizing Blogger Blog Super Easy
5/ 5
Best AMP Blogger template, Blogr-AMP exceeded my expectations. Search engine friendly, easy to use, backed by great support BlogrAMP Blogger theme with AMP HTML integrations makes monetizing ads on your blog using AMP supported ads network super easy with custom w....

Topics You Might Be Interested...


Disqus Comments

Facebook Comments

Google+ Comments

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.

Contact Us