The AMP - Documentation

Installation (Recommended way)

  • Unzip the downloaded ZIP file and Open .xml file on Notepad.
  • Select all and copy all codes.
  • On Blogger Dashboard Click Template > Edit HTML
  • Past all codes and Save Template.

Customize SEO Meta tags

<meta content='1487723054853663' property='fb:app_id'/>
<meta content='100004364052994' property='fb:admins'/>
<link href='https://plus.google.com/106651422636219211057' rel='me'/>
<link href='https://plus.google.com/106651422636219211057' rel='publisher'/>
<meta content='@msubelbd' name='twitter:site'/>
<meta content='@msubelbd' name='twitter:creator'/>
<meta content='Muhammad Subel' name='Author'/>
<meta content='https://www.facebook.com/templatemark.phtml' property='article:author'/>

Top Menu

Go to Template > Edit HTML and find below codes.
<nav class='page-menu' itemprop='mainEntity' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>
<div class='mobile-hide'>
 <ul>
   <li><a href='#' itemprop='url' title='About'><span itemprop='name'>About</span></a></li>
   <li><a href='#' itemprop='url' title='Contact'><span itemprop='name'>Contact</span></a></li>
   <li><a href='#' itemprop='url' title='Menu1'><span itemprop='name'>Privacy</span></a></li>
   <li><a href='#' itemprop='url' title='Menu2'><span itemprop='name'>DMCA</span></a></li>
   <li><a href='#' itemprop='url' title='Menu3'><span itemprop='name'>Sitemap</span></a></li>
    </ul>
  </div>
</nav>

Main Menu

Go to Template > Edit HTML and find below codes.
 <div id='menu-wrapper'>
<nav id='menu' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
<ul>
<li class='homers'><a href='/'><i class='fa fa-home'/> Home</a></li>
<li><a href='#'>Menu1</a></li>
<li><a class='ai' href='#'>Drop Menu <i class='fa fa-angle-down'/></a>
<ul class='menus'>
<li><a href='#'>Drop Menu 1</a></li>
<li><a href='#'>Drop Menu 2</a></li>
<li><a href='#'>Drop Menu 3</a></li>
</ul>
</li>
<li><a href='#'>Menu2</a></li>
<li><a class='ai' href='#'>Drop Menu <i class='fa fa-angle-down'/></a>
<ul class='menus'>
<li><a href='#'>Drop Menu 1</a></li>
<li><a href='#'>Drop Menu 2</a></li>
<li><a href='#'>Drop Menu 3</a></li>
</ul>
</li>
  <li><a href='/404'>Error</a></li>
<li><a class='trigger2' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;amp;langpair=en%7cen&amp;amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='English'>Translate</a></li>
</ul>
</nav>
</div>

Mobile Menu

Go to Template > Edit HTML and find below codes.
 <amp-sidebar id='offcanvas' layout='nodisplay'>
  <button class='buttonss' on='tap:offcanvas.close'><i aria-hidden='true' class='fa fa-times'/></button>
  <div class='sidebar'>
  <ul>
    <li><a href='#'>Menu1</a></li>
    <li><a href='#'>Menu2</a></li>
    <li><a href='#'>Menu3</a></li>
    <li><a href='#'>Menu4</a></li>
  </ul>
  </div>
</amp-sidebar>

Featured Posts Widget

Go to Layout > Open recent1 widget and type any LABEL_NAME


Sidebar Subscribe box Widget

Go to Layout > Open Subscribe Me widget and past below codes.
<div class="wp-subscribe no-name-field" id="wp-subscribe">
<h4 class="title">Get more nice stuff <br /> <span>in your inbox</span></h4>
<p class="text">instantly by Subscribing to us. So you will get email everytime we post something new here</p>

<form action="https://feedburner.google.com/fb/a/mailverify?uri=USER_NAME" method="get" target="_blank"> <input class="email-field" type="text" value="" placeholder="Enter email id here..." name="email" /> <input type="hidden" value="USER_NAME" name="uri" /><input type="hidden" name="loc" value="en_US" /> <input class="submit" name="submit" type="submit" value="Subscribe Now" /></form>

<div class="clear"></div>
<p class="footer-text">We guarantee you won't get any other SPAM</p>
</div>

Note: Change USER_NAME with your feedburner username.

Footer Social Icons

 <div class='top-navigation-right'>
<div class='top-social-wrapper'>
<div class='social-icon'><a href='#' target='_blank'><i class='fa fa-facebook'/></i></a></div>
<div class='social-icon'><a href='#' target='_blank'><i class='fa fa-google'/></i></a></div>
<div class='social-icon'><a href='#' target='_blank'><i class='fa fa-twitter'/></i></a></div>
<div class='social-icon'><a href='#' target='_blank'><i class='fa fa-linkedin'/></i></a></div>
<div class='social-icon'><a href='#' target='_blank'><i class='fa fa-youtube-play'/></i></a></div>
<div class='social-icon'><a href='#' target='_blank'><i class='fa fa-pinterest-square'/></i></a></div>
<div class='clear'/>     
</div>
</div></div>

Footer Navigations

<ul class="footer2 line">
<li><a href="#" title="Contact Form">Contact us</a></li>
<li><a href="#" title="About">About us</a></li>
<li><a href="#" title="Disclaimer">Disclaimer</a></li>
<li><a href="#" title="Privacy Policy">Privacy Policy</a></li>
<li><a href="#" title="Sitemap">Sitemap</a></li>
<li><a href="#" title="Terms of Service">Terms of Service</a></li>
</ul>

Post page Advertisement

Go to Template > Edit HTML and find below codes twice.
 <div class='ad1'>

Now past your AMP Responsive ad code within <div class='ad1'>AD CODE HERE</div>

Author box Bio

Go to Template > Edit HTML and find below codes
 <div class='authorboxwrap'>
<div class='authorboxfull'>
<div class='author_description_container'>
<h4><i aria-hidden='true' class='fa fa-pencil-square-o'/> Author: <a href='#' rel='author'><data:post.author/></a> </h4>
<p>
velit viverra minim sed metus egestas sapien consectetuer, ac etiam bibendum cras posuere pede placerat, velit neque felis. Turpis ut mollis, elit et vestibulum mattis integer aenean nulla, in vitae id augue vitae.     
</p>
</div>
</div>
</div>


Add Google Analytics Code

Go to Template > Edit HTML and find below codes.
&quot;UA-XXXXX-Y&quot;

Change UA-XXXXX-Y with your google analytics code.

AMP Friendly Post Format

 <div data-amp-style="text-align: left;" dir="ltr">
Pellentesque vitae lectus in mauris sollicitudin ornare sit amet eget ligula. Donec pharetra, arcu eu consectetur semper, est nulla sodales risus, vel efficitur orci justo quis tellus. Phasellus sit amet est pharetra, sodales ipsum et, sodales urna. In massa nisi, faucibus id egestas eu, fringilla sit amet velit. Integer vel dui eget lacus fermentum ornare ac at nisl. Cras justo urna, lacinia vel massa at, tincidunt posuere lectus. Nulla pretium ultrices velit ut malesuada. In arcu sem, elementum at nunc eu, ullamcorper bibendum lorem. Quisque rhoncus lacinia volutpat. Mauris tempus enim ornare neque rutrum mollis. Sed faucibus laoreet malesuada. Nam est enim, vulputate id porta id, maximus sagittis nulla.
<br />
<h2>
This is Heading 2</h2>
<div>
Type your Heading 2 Text here.</div>
<h3>
This is Heading 3</h3>
<div>
Type your Heading 3 Text here.</div>
<h4>
This is Heading 4</h4>
<div>
Type your Heading 4 Text here</div>
</div>
<noscript><img alt='Featured Image alt text here' src='#FEATURED_IMAGE_URL_HERE'/></noscript>

Note: After publish every posts, check validation here: https://validator.ampproject.org/

Additional Image Format

<amp-img
    src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSW2OS5s4DlGfj3CHkHSab5wMnb_a1HZGH-7A0Q_O0VSgKxCZlL8Y1lBvNOtza_Iq7JdH2iKBQI7PDmLUMEi7C66PrtUaX_Z6QRcD867iLD1uNHOvLG3slAI5d5Uwe1AtYAP5l3SSG7_Bs/s1600/4.jpg"
    width="527"
    height="320"
    layout="responsive">
</amp-img>

Responsive Adsense ad Format

<amp-ad
layout="fixed-height"
height="90"
type="adsense"
data-ad-client="ca-pub-1234567890123456"
data-ad-slot="1234567890">
</amp-ad>

Adsense Link Ad Format

<center>
<amp-ad 
data-ad-client='ca-pub-1234567890123456' 
data-ad-slot='1234567890' 
height='90' 
type='adsense' 
width='200'>
 </amp-ad>
  </center>

Note: Your Adsense link ad must sized with 90px height and 200px width.