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

AMP HTML Image Gadget/Widget for Blogger Templates

Users using Blogger templates with AMP HTML requires to update uploaded post images & use amp-img tags instead. However, Blogger Image gadgets or widgets requires the use of AMP HTML image tag & needs to be updated in Template HTML.

Blogr-AMP blog also covered & shared how to integrate & convert your Blogger template & use AMP components/tags where you can find it here at Getting Started, Create your 1st AMP Blogger Pages tutorial series.

Update Blogger Image Gadget Use amp-img Tags

This post covers the complete codes/markup for Blogger Image gadget/widget with required AMP HTML amp-img tags with related attributes. Blogger blog owners can copy & paste inside their blog template & still use existing Blogger Layout functionalities to edit widget title, caption & upload images from their computer.

Blogger + AMP Image Gadget/Widget HTML


The complete HTML codes/mark-ups for Blogger Image widget/gadget with AMP HTML intergrations.


Get Your Unique PassCode

1 PassCode used on All exclusive datas in this AMP Blogger Blog!

PassCode Delivered by Google's FeedBurner | Privacy Policy | Terms
lock Show & Copy AMP HTML Image Gadget
If you have a unique PassCode from earlier datas, please re-enter your PassCode. Thank You.

How to Use


  • At Blogger Dashboard > go to Template
  • Backup template before proceeding
  • Click Edit Template
  • At template <body> find any <b:section> ... </b:section> Blogger template layout tags.
  • Copy above codes inside any <b:section> tag
  • At id='Image**', replace ** with a unique integer/number.
  • Click Save Template
  • Edit, upload image use AMP Image widget at dashboard > Layout
  • Save widget
  • Drag & drop Image widget anywhere in template Layout.
  • Save Arrangements.
  • Preview your changes.

Behavior


  • No changes on application at Blogger layout.
  • Edit widget title to display as Image title.
  • Upload image using the Choose image button.
  • Shrink feature has been disabled & using amp-img with layout='responsive'
  • All images size will spread the parent container width by default.

Improvements


  • Replaced <img /> tag & used <amp-img/> tags with attributes altwidth & height auto pre-assigned.
  • Uploaded images will automatically inherit amp layout responsive directive.
  • Removed javascript used on Blogger widgets.

Common Styles


Common element name references to use for Image widget styling. Add CSS within <style amp-custom="amp-custom"/> tag in Template HTML.

#Image* {

}

#Image* h2 {

}

#Image* amp-img {

}

#Image* .caption {

}

Where * is the unique number/integer assigned for the Image widget.

If you find any issues, please do not hesitate to leave a comment below or contact us here.

Have a comment/question? Add it here... expand_more

Comment on Google+ expand_more

Comment on Facebook expand_more

Have a code snippet to share? Format RAW codes here... expand_more

Users who needs to share code snippets in comments, use helper below to paste your codes & copy to comments body.

Blogr-AMP Blogger AMP HTML Template
Rated 5/5 based on 98 reviews
Use amp-img for Blogger Image gadget/widget on template for Blogspot platform transform blog themes to use valid AMP HTML integrations while using existing widgets functionalities.
Blogr-AMP: AMP HTML Image Gadget/Widget for Blogger Templates
5/ 5
Best AMP Blogger template, Blogr-AMP exceeded my expectations. Search engine friendly, easy to use, backed by great support AMP HTML Image Gadget/Widget for Blogger Templates.

MOBILE TEST by GOOGLE launch VALIDATE AMP launch
mail