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.

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

</b:widget>

• Save Template.
• Preview changes.

Behavior

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

Improvements

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