Kode HTML Header Gadget/Widget untuk Template Blogger AMP

Kode HTML Header Gadget/Widget untuk Template Blogger AMP

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

<b:widget id='Header1' locked='true' title='YOUR BLOG (Header)' type='Header' version='1' visible='true'>
    <b:includable id='main'>
  <b:if cond='data:useImage'>
    <b:if cond='data:imagePlacement == &quot;BEHIND&quot;'>
    <!--
      Show image as background to text. You can't really calculate the width
      reliably in JS because margins are not taken into account by any of
      clientWidth, offsetWidth or scrollWidth, so we don't force a minimum
      width if the user is using shrink to fit.
      This results in a margin-width's worth of pixels being cropped. If the
      user is not using shrink to fit then we expand the header.
      -->
      <b:if cond='data:mobile'>
        <div id='header-inner'>
          <div class='titlewrapper'>
            <b:include name='title'/>
          </div>
          <b:include name='description'/>
        </div>
      <b:else/>
        <a expr:href='data:blog.canonicalHomepageUrl'>
          <amp-img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width'/>
        </a>
          <div class='titlewrapper'>
            <b:include name='title'/>
          </div>
        <b:include name='description'/>
      </b:if>
    <b:else/>
      <!--Show the image only-->
      <div id='header-inner'>
        <a expr:href='data:blog.canonicalHomepageUrl'>
          <amp-img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width'/>
        </a>
        <!--Show the description-->
        <b:if cond='data:imagePlacement == &quot;BEFORE_DESCRIPTION&quot;'>
          <b:include name='description'/>
        </b:if>
      </div>
    </b:if>
  <b:else/>
    <!--No header image -->
    <div id='header-inner'>
      <div class='titlewrapper'>
        <b:include name='title'/>
      </div>
      <b:include name='description'/>
    </div>
  </b:if>
</b:includable>
          <b:includable id='description'>
  <div class='descriptionwrapper'>
    <data:description/>
  </div>
</b:includable>
          <b:includable id='title'>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <h1 class='title'><data:title/></h1>
  <b:else/>
    <h2 class='title'><a expr:href='data:blog.canonicalHomepageUrl'><data:title/></a></h2>
  </b:if>
</b:includable>
        </b:widget>

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

Source:

http://blogr-amp.blogspot.co.id/2017/02/amp-html-header-gadgetwidget-for.html