Topics

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


Common Blogger + AMP Template Editing Environment

Common Blogger + AMP Template Editing Environment
When porting your Blogger templates to use Accelerated Mobile Pages (AMP Project) features, editing theme HTML/CSS is just like editing any other HTML web page. There are some restrictions when using HTML elements (DOM) & webpage stylesheets (CSS) which is further detailed out here at AMP Project documentation page https://www.ampproject.org/docs/guides/responsive_amp .

Tutorial use Blogger widgets on Blogger template with AMP installed

Thinking outside the box, restrictions laid out when applying AMP HTML web pages features on your Blogger themes/templates helps you to deliver a neat & "tidier" theme layout. This web page working environment really helps beginners to experts users to organize, plan & design blog pages, while improving/implementing best web page practices.


Auto Added Attributes

Upon saving your Blogger template edits at Template HTML, the AMP project integration will work as expected & uses the required elements an AMP powered webpage must be applied with. Below is an example how the <html> tag is used on a Blogger + AMP integration.

Blogger templates attributes not used in AMP pages

However, when going back to edit your Blogger theme, Blogger servers will add automatically additional attributes to the <html> tag. When this attributes is added & saved, your AMP powered blog pages will not validate. Here is an example underlined in red.

Unless you are down-grading your templates & use Blogger Classic Templates, this will not be an issue. But when using previous versions of Blogger templates, you will loose a lot of newer Blogger template functionality (ie. tags, conditionals etc) which is very useful to really enhance your blog pages.

Remove additional HTML attributes inserted by Blogger

Always remember to remove additional attributes applied automatically by Blogger before saving your template changes.

AMP Components on Blogger Dashboard 

AMP Project HTML web pages uses several of its own document elements (known as components) to assign or use certain built-in functionality. For example, to display an image, instead of using the normal <img/> tag, for AMP HTML pages will be using <amp-img/> component/tag instead.

Another good example the usage of <amp-sidebar/> component to easily create a slide out sidebar for your web pages. With only a couple of additions, no extra coding needed, creating a slide out sidebar is made easy even for beginners. Below is an example.

How to add amp-sidebar on Blogger template with AMP pages

The awesome slide out sidebar will look like so - simple & easy without any additional coding!

Display of sidebar with amp-sidebar component on Blogger themes

When applying this slide out <amp-sidebar/> component, if users requires to include Blogger section elements & widgets, it will not show up/display at Blogger layout page for further editing/changes/updates. This is because Blogger dashboard could not detect the <amp-sidebar/> component.

To overcome this, update. change & save <amp-sidebar/> component to use a <div/> element tag instead & save your template.

Workaround use widgets with am-sidebar component for Blogger

When you have finished editing/updates widgets at your slide out sidebar Blogger layout page, change the <div/> element tag & use <amp-sidebar/> component instead, again save your template changes.

Consistent Image Size Uploads

When using AMP HTML web pages, all images are required to use <amp-img/> component to replace the existing <img/> element tag. Within this new component, all images are required to be equipped with the width & height attributes.

Update img tag to use amp-img tag and validate AMP Blogger pages

Careful planning must be considered by blog owners when uploading images via blog WYSIWYG editors. Since that Blogger already comes with presets image width/sizes (Small, Medium, Large, X-Large & Original), try as much to use the built in functionality sizes instead - to ease your editing.

We recommend to use/upload image & set the size to Extra Large (at blog editor) with 4:3 image ratio, an average image size of 1200px(W) X 900px(H) & below the 100kb image file size. This reasoning will be further laid out in future blog posts releases.

This posts also shows readers the image upload consistency & how it will display on various screen sizes. But wait! Does adding or uploading images to your blog posts editor needs to change the <img/> tag & use <amp-img/> tag instead?

The answer is yes. But... by doing so your images will no longer get picked up by your Blogger feed ;(. You can use the <noscript/> tag & insert your main post image in it & edit each image you uploaded to use the AMP image component. That would be a lot of prep for you to & time consuming...

Good news is that, we managed to developed a Blogger template, where you can get both worlds working for your Blog/website & still keep your AMP powered pages validated.

So what do you think? Is it too much to ask for (or consider) when using AMP HTML web page for Blogger templates? Shoot a comment below. We would love to read & share your findings to!


Blogr-AMP Blogger AMP HTML TemplateRated 5/5 based on 98 reviewsMost common Blogger template HTML editing conditions when AMP HTML pages is applied, use new image attributes & components, how to display Blogger widgets at Layout, auto added Blogger theme html attributes which helps organizing template & AMP HTML pages integration on a Blogspot blog.Blogr-AMP: Common Blogger + AMP Template Editing Environment
5/ 5
Best AMP Blogger template, Blogr-AMP exceeded my expectations. Search engine friendly, easy to use, backed by great support When porting your Blogger templates to use Accelerated Mobile Pages (AMP Project) features, editing theme HTML/CSS is just like editing any ....

Topics You Might Be Interested...


Disqus Comments

Facebook Comments

Working to get connected...

Ooops! We're having trouble connecting. Please refresh your page or contact us...

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.


Working...

Ooops! We're having trouble connecting...