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

AMP HTML Header Gadget/Widget for Blogger Templates

AMP HTML Header Gadget/Widget for Blogger Templates
Customizing Blogger templates & integrate AMP HTML fundamentals is a bit challenging. Thanks to the inter-web, converting Blogger themes to Accelerated Mobile Pages is widely shared by template designers/developers.

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

AMP HTML Blogger Header Gadget Tutorial

This post covers the details on updating default Blogger Header1 gadget/widget & apply AMP HTML markups while still having to use existing Blogger widget Layout functionalities.

Blogger + AMP Header Gadget HTML

The complete HTML codes for Blogger Header widget/gadget with AMP HTML markups. You can copy & paste the AMP HTML supported markups used with Blogger themes.

If you have not received your unique pass codes, then send your request below. The  unique pass code will be sent to your email, handled by Google feed services. No personal data exposed & no details info required.

Using Google services allows your personal data to be more secured & protected, with encrypted connections & keeping you safe while browsing websites or blogs.

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 Header Gadget
If you have a unique PassCode from earlier datas, please re-enter your PassCode. Thank You.

How to Apply

  • At Blogger Dashboard > go to Template
  • Backup template before proceeding
  • Click Edit Template
  • At Jump to Widget > select Header1
  • Copy above codes & replace current Header1 widget:-

<b:widget id='Header1' locked='true' title='YOUR BLOG (Header)' type='Header' version='1' visible='true'>

... {{ codes }} ...


  • Save Template.
  • Preview changes.


  • No changes on application at Blogger layout.
  • Edit, assign, upload images as default blogger widget does.


  • Replaced <img /> tag & used <amp-img/> tags with attributes alt, width & height auto pre-assigned.
  • Updated header title tags for content hierarchy.
  • Uploaded images width & height will automatically updated widget image output.
  • All links using Blog's canonical URL's.
  • Remove javascript used on Blogger widgets.

Common Styles

Most common element reference used at Blogger Template Header1 widget for styling. Add CSS within <style amp-custom="amp-custom"/> tag in template HTML.

.Header {


.Header .title {


.Header .title a {


.Header amp-img {


.descriptionwrapper {


/* used with images as background */
.Header #header-inner {
  background-repeat: no-repeat;
  background-position: center;

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 reviewsComplete AMP HTML codes for Blogger Template Header1 widget/gadget with amp-img tags, alt, width & height attribute auto assigned, detaill tutorial how to customize existing Blogspot header gadget with valid AMP HTML markups.Blogr-AMP: AMP HTML Header 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 Customizing Blogger templates & integrate AMP HTML fundamentals is a bit challenging. Thanks to the inter-web, converting Blogger themes....

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.

Follow us on Instagram

More from Instagram...


Ooops! We're having trouble connecting...