Skip to content
This repository has been archived by the owner on Sep 2, 2022. It is now read-only.

Documentation

Jump to bottom
Kolappan Nathan edited this page Sep 1, 2022 · 2 revisions

Table of Contents

  1. How to apply AMP Template to Blogger?
  2. Making images responsive in AMP Blogger Template
  3. Embedding-YouTube-videos-in-this-AMP-template

How to apply AMP Template to Blogger?

This is a step by step guide on how to apply AMP based template your blog. We make use of the custom template feature in blogger for this purpose.

  1. Download our AMP template from the GitHub repo.
  2. Go to blogger.com dashboard.
  3. Click on the theme option in the sidebar.
  4. Click on the Backup / Restore option in the top right corner of the screen.
  5. In the popup window you will be provided an option to download the existing blog template. Download the current template just in case of backup.
  6. Now click on the upload template button.
  7. Select the previously downloaded template file.
  8. Now the AMP theme will be shown on desktops but mobile website will still be showing you the old theme you had.
  9. To solve this, click on the settings icon at the bottom of the mobile theme.
  10. Select "No. Show desktop theme on mobile devices." option to show the responsive AMP theme on mobile too.

Making images responsive in AMP Blogger Template

The AMP blogger template make the website and text responsive by default. But the images have to be made responsive manually.Yes, you heard that right. You have to manually alter every image to make it responsive. By default when you insert an image into blogger you get the following code

<img border="0" data-original-height="200" data-original-width="600" height="200" src="https://3.bp.blogspot.com/abcde.png" width="600" />

You have the change the code into following. You have to copy paste the image src. Obtain the height from the data-original-height and data-original-width tags.

<amp-img src="" alt="A responsive image" height="200" width="600" layout="responsive"></amp-img>

Do not forget to include the layout="responsive" attribute otherwise the image will not be responsive.

Embedding YouTube videos in this AMP template

The script required for AMP YouTube is not included in the template. First include it either in the template or in the post.

<script async="" custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>

Include the above code in the html section of the post or in the template of your blog.

<amp-youtube data-videoid="SGDwb3OeelQ" layout="responsive" width="480" height="270">
</amp-youtube>
Clone this wiki locally