Our Topics

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.


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

Blogr-AMP Blogger AMP HTML Template
Rated 5/5 based on 98 reviews
Complete 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 AMP HTML Header Gadget/Widget for Blogger Templates.

Interesting Topics You Might Be Interested...


Disqus Comments

Facebook Comments

Google+ Comments

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.

Contact Us