Topics

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


AMP HTML Image Gadget/Widget for Blogger Templates

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
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.

Blogr-AMP Blogger AMP HTML TemplateRated 5/5 based on 98 reviewsUse 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 Users using Blogger templates with AMP HTML requires to update uploaded post images & use amp-img tags instead. However, Blogger Image ....

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...