Blogging

How to Convert a Blogger Template to AMP Template

Posted by

First, understand what AMP is:

AMP (Accelerated Mobile Pages) is a project by Google to make web pages load super fast, especially on mobile devices.
If you want to convert your Blogger template into an AMP template, you need to follow some special rules.

Basic Steps to Convert Blogger Template to AMP

1. Make HTML AMP-Compatible

Every HTML element must follow AMP standards.

2. Use AMP Tags

Replace normal HTML tags with AMP tags:

Normal TagAMP Tag
<img><amp-img>
<video><amp-video>
<iframe><amp-iframe>

Example:

<!-- Normal -->
<img src="image.jpg" alt="My Image">

<!-- AMP Version -->
<amp-img src="image.jpg" width="600" height="400" layout="responsive" alt="My Image"></amp-img>

3. Remove All Custom JavaScript

  • AMP does not allow custom JavaScript.
  • Only AMP official scripts are allowed.

4. Inline All CSS

  • You cannot use external CSS files like <link rel="stylesheet">.
  • All CSS must be inside <style amp-custom> ... </style>.

Example:

<style amp-custom>
  body { background: #fff; }
  h1 { color: #333; }
</style>

5. Add AMP Required Boilerplate in <head>

In your Blogger template’s <head>, add this:

<!doctype html>
<html ⚡>
<head>
  <meta charset="utf-8">
  <title>Your Page Title</title>
  <link rel="canonical" href="your-normal-url.html" />
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  
  <style amp-boilerplate>
    body {
      -webkit-animation: -amp-start 8s steps(1,end) 0s 1 normal both;
      -moz-animation: -amp-start 8s steps(1,end) 0s 1 normal both;
      -ms-animation: -amp-start 8s steps(1,end) 0s 1 normal both;
      animation: -amp-start 8s steps(1,end) 0s 1 normal both;
    }
    @-webkit-keyframes -amp-start { from { visibility: hidden } to { visibility: visible } }
    @-moz-keyframes -amp-start { from { visibility: hidden } to { visibility: visible } }
    @-ms-keyframes -amp-start { from { visibility: hidden } to { visibility: visible } }
    @-o-keyframes -amp-start { from { visibility: hidden } to { visibility: visible } }
    @keyframes -amp-start { from { visibility: hidden } to { visibility: visible } }
  </style>

  <noscript>
    <style amp-boilerplate>
      body { -webkit-animation: none; -moz-animation: none; -ms-animation: none; animation: none; }
    </style>
  </noscript>
</head>

Important:

  • Your <html> tag must have ⚡ symbol or amp keyword.
    Example: <html ⚡>

Final Checklist

  • Use <amp-img>, <amp-video>, <amp-iframe> instead of <img>, <video>, <iframe>.
  • In-line all CSS using <style amp-custom>.
  • Remove or replace JavaScript.
  • Validate your page with AMP Validator.
  • Fix all AMP errors if any.

Quick Example Before & After

Normal Blogger CodeAMP Blogger Code
<img><amp-img> with width/height
External CSS fileInline <style amp-custom>
JavaScriptRemove it or use AMP components
<html><html ⚡>

Bonus Tip:

If you want, you can download a ready-made AMP Blogger template and modify it, which will save a lot of time.
Or you can manually edit your existing template step-by-step using the guide above.

Final Question for You:

  • Do you want me to show a full working example template also?
  • Or help you convert your own Blogger template step-by-step?

Tell me!
I can even make a simple AMP Blogger template example for you if you want!
(Yes/No?)

how to change Android application Name