AMP HTML Header Gadget/Widget for Blogger Templates

AMP HTML Header Gadget/Widget for Blogger Templates

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


Source
http://blogr-amp.blogspot.co.id/2017/02/amp-html-header-gadgetwidget-for.html
Related Posts
Disqus Comments
© Copyright 2017 CB AMP - All Rights Reserved | Template by CB Blogger