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.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.
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-imgwithlayout='responsive' - All images size will spread the parent container width by default.
Improvements
- Replaced
<img />tag & used<amp-img/>tags with attributesalt,width&heightauto pre-assigned. - Uploaded images will automatically inherit
amp layout responsivedirective. - 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.
