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.

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

---

• AMP HTML component for Ads https://www.ampproject.org/docs/reference/components/amp-ad
• AMP HTML component for Images (Built-in) : https://www.ampproject.org/docs/reference/components/amp-img