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

Blogr-AMP for amp-user-notification

Most users requests, since version 0.9.15, Blogr-AMP Blogger template with AMP HTML integration now provides easier access to enable or add a user notification using Blogger widgets.

Users can easily access, edit & apply easily a sticky styled notification text or images with links which upon blog pages display a custom notification located at the bottom of screen will appear.

amp-user-notification install Blogger template with AMP

Location


Template HTML - amp components

<script async='async' custom-element='amp-user-notification' src='https://cdn.ampproject.org/v0/amp-user-notification-0.1.js'/>
<script async='async' custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

Layout - user-notify

  • 2 Blogger HTML/Javascript widgets have been assigned to display user notification for web & mobile views.
  • Use amp-user-notification tags to add in widget & display the user notification accordingly.

Behavior


  • Displays a sticky user notification on users screen when visiting blog pages.
  • Strictly amp-user-notification tags
  • When multiple amp-user-notification elements are on a page, only one is shown at a single time (Once one is dismissed the next one is shown). .
  • Displays sticky until users clicked the close button
  • Always available upon page display.
  • Advance setup is available. View amp documentation below.

Example Usages



Example user notification using an image with a fallback placeholder text.

<amp-user-notification id='banner1' layout='nodisplay' data-persist-dismissal='false'>
  <button class='btn btn-primary' on='tap:banner1.dismiss'>
    <i class="material-icons">close</i>
  </button>
  <a href='{{LINK-URL}}' target='_blank'>
    <amp-img height='55' layout='fixed' src='{{IMAGE-URL}}'>
      <div placeholder="placeholder">
        <p>
          {{Text to display as fallback}}
        </p>
      </div>
    </amp-img>
  </a>
</amp-user-notification>

  • Replace banner1 with a unique id.
  • Replace tap.banner2.dismiss with reference to the unique id for the amp-user-notification tag.
  • Replace {{LINK-URL}}with a fully qualified URL to link to. HTTPS protocol preferred.
  • Replace {{IMAGE-URL}} with a fully qualified URL to an uploaded image. HTTPS protocol required.
  • Replace {{Text to display as fallback}} with preferred text to display as fallback.
  • Click Save to save widget

Example user notification using text with link.

<amp-user-notification id='banner2' layout='nodisplay' data-persist-dismissal='false'>
  <button class='btn btn-primary' on='tap:banner2.dismiss'>
    <i class="material-icons">close</i>
  </button>  
  <p>
    {{Text to display as notification}} <a href='{{LINK-URL}}' target='_blank'>{{LINK-TEXT}}</a>
  </p>
</amp-user-notification>

  • Replace banner2 with a unique id
  • Replace tap.banner2.dismiss with reference to the unique id for the amp-user-notification tag.
  • Replace {{LINK-URL}} with a fully qualified URL to link to. HTTPS protocol preferred.
  • Replace {{LINK-TEXT}} with text to display as a link.
  • Click Save to save widget

Styling


Custom CSS applied with theme.

.user-notify {
  position:relative;
}

.user-notify a {
  color: inherit;
}

amp-user-notification {
  background-color: rgba(255,255,255,.55);
  color: inherit;
  line-height:1.428;
  padding: 12px 0;
  display: block;
  width:auto;
  text-align:center;
  width:100%;
}

.user-notify amp-user-notification button.btn {
  background-color: transparent;
  border:0;
  margin:0;
  color: inherit;
  padding:10px;
  box-shadow:none;
  position:absolute;
  top:0;
  right:0;
  z-index:999;
}

amp-user-notification p {
  margin-bottom:0;
}

amp-user-notification p a:link,
amp-user-notification p a:visited {
  color: inherit;
  border-bottom:1px dashed #aaa;
}

Useful Reference




Have a comment/question? Add it here... expand_more

Comment on Google+ expand_more

Comment on Facebook expand_more

Have a code snippet to share? Format RAW codes here... expand_more

Users who needs to share code snippets in comments, use helper below to paste your codes & copy to comments body.

Blogr-AMP Blogger AMP HTML Template
Rated 5/5 based on 98 reviews
Display dismissable notification for Blogger blog visitors with amp-user-notification tags on Blogspot template with AMP HTML integration use assigned custom gadget/widgets & apply amp tags easily for mobile and web views. Tutorial, full codes & custom CSS styles included.
Blogr-AMP: Blogr-AMP for amp-user-notification
5/ 5
Best AMP Blogger template, Blogr-AMP exceeded my expectations. Search engine friendly, easy to use, backed by great support Blogr-AMP for amp-user-notification.
mail