Add AMP HTML Pop-up Notification Box In Blogger

AMP HTML Pop-up Notification Box - For AMP users create a Pop-up notification box when the blog is opened. I will share. Earlier, I shared how to create HTML modal notification box for blog sites.

It can be used to display a promotional product, a blog post, or a banner ad in the notification box that opens. To create this Pop-up notification box, we will use the "AMP Commands and Shortcodes" that we shared in our previous post. To add the AMP notification box to your blog, follow the steps below.

How to Add AMP HTML Pop-up Notification Box?

Add the following CSS codes to the amp-custom style file on your blog.

@font-face{font-family:'Roboto';font-style:normal;font-weight:400; src:local('Roboto'),local('Roboto-Regular'),url(https://fonts.gstatic.com/s/roboto/v16/CWB0XYA8bzo0kSThX0UTuA.woff2) format('woff2'),url(https ://fonts.gstatic.com/s/roboto/v16/2UX7WLTfW3W8TclTUvlFyQ.woff) format('woff'),url(https://fonts.gstatic.com/s/roboto/v16/QHD8zigcbDB8aPfIoaupKOvvDin1pZ8ct5f) formatApeL. 'truetype')}
@font-face{font-family:'Roboto';font-style:normal;font-weight:500;src:local('Roboto Medium'),local('Roboto-Medium'),url(https:// fonts.gstatic.com/s/roboto/v16/RxZJdnzeo3R5zSexge8UUVtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'),url(https://fonts.gstatic.com/s/roboto/v16/RxZJdnzeo3R5Z3 'Exge8UUVtXRa8) woff'),url(https://fonts.gstatic.com/s/roboto/v16/RxZJdnzeo3R5zSexge8UUSZ2oysoEQEeKwjgmXLRnTc.ttf) format('truetype')}
*{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.notifbox{width:100%;height:100%;position:fixed;top:0;left:0;justify-content:center;z-index:10000;display:flex;align-items:center;}
.notif_box{background:#fff;color:#555;padding:0;top:15%;transition:all .3s ease-in-out;font-family:Roboto,sans-serif;position:absolute;width:50 %;box-shadow: 0 1px 8px rgba(0,0,0,.3);left:50%;margin-left:-25%;z-index:99;border-radius:4px;z-index: 2;overflow:hidden;}
.notif_box p{margin:0;font-size:14px;font-weight:400;padding:10px 20px;line-height:1.3}
.notif_box p a{font-weight:500;color:red;text-decoration:none;}
.notif_box p a:hover{color:#333}
.notifbox .close_notifbox{border:none;padding:0;cursor:pointer;width:20px;height:20px;line-height:20px;text-align:center;z-index:2;background:0 0;color: #efefef;font-size:30px;position:absolute;top:7px;right:5px;}
.notifbox .close_notifbox:focus,.notifbox .done_notifbox:focus{outline:none}
.notifbox .close_notifbox:hover{color:red}
.slideInDown{-webkit-animation-name:slideInDown;animation-name:slideInDown;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode: both}
@-webkit-keyframes slideInDown{0%{-webkit-transform:translateY(-100%);transform:translateY(-100%);visibility:visible}100%{-webkit-transform:translateY(0);transform: translateY(0)}}
@keyframes slideInDown{0%{-webkit-transform:translateY(-100%);transform:translateY(-100%);visibility:visible}100%{-webkit-transform:translateY(0);transform:translateY(0 )}}

Add the following HTML code one line above the </body> code of your blog.

<div class="notifbox" id="notifbox">
<div class="notif_box slideInDown">
<button class='close_notifbox' on='tap:notifbox.hide' role='button' tabindex='0' title='Close'>&amp;times;</button>
<amp-img alt="" height="470" layout="responsive" src="https://4.bp.blogspot.com/-f2qFkne-d2w/WZiMLuu5RqI/AAAAAAAABrE/IjIY-2v- hqQzwzIUXIAAiFVIgtewS-ZUQCLcBGAs/s1600/blog.png" title="Label" width="940"></amp-img>
<p>
For more, please <a href="#" title="here">here</a> Click.
</p>
</div>
</div>

Adjust the view to match amp-img and catatanny.


The notification box code above shows the notification box when the blog is visited, pages are opened or pages are refreshed.

However, if you want the AMP notification box to be displayed only once and the blog visitors close the notification box, the notification box will be displayed if users clear/delete their browser cookies. In other words, when the notification box is closed, if the blog pages are refreshed, the notification box will not appear.

This is if you want to add the AMP notification box to your blog, don't add the above codes to your blog. Add the following CSS codes to the amp-custom style file on your blog.

*{-moz-box-sizing:border-box;box-sizing:border-box;-webkit-box -sizing:border-box;}
.notifbox{width:100%;height:100%;position:fixed;display:flex;top:0;left:0;align-items:center;justify-content:center;z-index:10000}
.notif_box{background:#fff;border-radius:4px;box-shadow: 0 1px 8px rgba(0,0,0,.3);color:#555;font-family:Roboto,sans-serif;position: absolute;padding:0;top:15%;transition:all .3s ease-in-out;width:50%;left:50%;margin-left:-25%;z-index:99;z-index: 2;overflow:hidden}
.notif_box p{padding:10px 20px;margin:0;font-size:14px;font-weight:400;line-height:1.3}
.notif_box p a{color:#f44336;text-decoration:none}
.notif_box p a:hover{color:#333}
.notifbox .close_notifbox{background:0 0;cursor:pointer;width:20px;height:20px;line-height:20px;text-align:center;z-index:2;border:none;padding:0;color: #efefef;font-size:30px;position:absolute;top:7px;right:5px;}
.notifbox .close_notifbox:focus,.notifbox .done_notifbox:focus{outline:none}
.notifbox .close_notifbox:hover{color:#f44336}
.slideInDown{-webkit-animation-name:slideInDown;animation-name:slideInDown;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode: both}
@-webkit-keyframes slideInDown{0%{-webkit-transform:translateY(-100%);transform:translateY(-100%);visibility:visible}100%{-webkit-transform:translateY(0);transform: translateY(0)}}
@keyframes slideInDown{0%{-webkit-transform:translateY(-100%);transform:translateY(-100%);visibility:visible}100%{-webkit-transform:translateY(0);transform:translateY(0 )}}

Add the following AMP JS codes one line above your blog's </head> code. If the following AMP JS codes are among the AMP JS codes on your blog, there is no need to add them again.

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

Add the following HTML code one line above the </body> code in your blog.

<amp-user-notification id="my-notification" layout="nodisplay">
<div class="notifbox" id="notifbox">
<div class="notif_box slideInDown">
<button class='close_notifbox' on='tap:my-notification.dismiss' role='button' tabindex='0' title='Close'>&amp;times;</button>
<amp-img alt="" height="470" layout="responsive" src="https://4.bp.blogspot.com/-f2qFkne-d2w/WZiMLuu5RqI/AAAAAAAABrE/IjIY-2v- hqQzwzIUXIAAiFVIgtewS-ZUQCLcBGAs/s1600/blog.png" title="Label" width="940"></amp-img>
<p>
For more, please <a href="#" title="here">here</a> Click.
</p>
</div>
</div>
</amp-user-notification>

After adding the above codes, check if your blog has amp-analytics code. Otherwise, add the following code one line above the </body> code.

<amp-analytics id='analytics1' type='googleanalytics'>
<script type='application/json'>
{
  "var": {
    "account": "UA-X0X0X0X0X0"
  },
  "triggers": {
    "trackPageview": {
      "on": "visible",
      "request": "pageview"
    }
  }
}
</script>
</amp-analytics>

Replace UA-X0X0X0X0X0 in the code above with the code in your analytics account.