Memasang Popup Notification Box di Blog AMP HTML

Setelah kemarin kita membahas dan sudah mempraktekkan Floating Search Box With Jquery for Blogspot agar membuat tampilan pencarian lebih terlihat profesional. Dipostingan kali ini kita akan membahas Cara Memasang Popup Notification Box di Blog AMP HTML yang tujuannya juga untuk membuat tampilan blog lebih terlihat profesional tidak kalah dengan blog besar lainnya.

Pemasangan Popup notification Box ini di khususkan bagi sobat yang menggunakan template AMP HTML. Biasanya para pemilik blog atau website menggunakan Popup notification box ini digunakan untuk Promosi produk baru atau sekedar pemberitahuan, misalkan pemberitahuan bahwa blog tersebut sudah ada aplikasi di Playstore.

Pemasangan Popup notification Box ini juga cocok untuk Blog download, Games atau Onlineshop untuk updated berita terbaru dari Produk yang di tawarkan nantinya jika sudah terpasang penampakkannya seperti di bawah ini.



Bagaimana sobat tertarik untuk memasangnya ? untuk itu mari kita bahas dan ikuti langkah penerapannya dibawah ini Cara Memasang Popup Notification Box di Blog AMP HTML.

Langkah Pertama
Silahkan salin kode amp-lightbox.js ini lalu letakkan kode tersebut di atas kode </head>.

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

Jika di pembahasan sebelumnya sudah pernah terpasang kode diatas silahkan lewati langkah ini.


Langkah Ke Dua
Silahkan salin kode CSS dibawah ini lalu letakkan di bagian style amp-custom pada template 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/QHD8zigcbDB8aPfIoaupKOvvDin1pK8aKteLpeZ5c0A.ttf) format('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/RxZJdnzeo3R5zSexge8UUT8E0i7KZn-EPnyo3HZu7kw.woff) format('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 {
      z-index: 10000;
    }  
    .notifbox {
      background: rgba(0, 0, 0, 0.5);
      width: 100%;
      height: 100%;
      position: fixed;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1;
    }   
    .notif_box {
      background: #fff;
      color: #555;
      font-family: Roboto, sans-serif;
      position: absolute;
      padding: 25px;
      top: 15%;
      transition: all .3s ease-in-out;
      width: 50%;
      left: 50%;
      margin-left: -25%;
      z-index: 99;
      border-radius: 4px;
      box-shadow: 0 9px 46px 8px rgba(0, 0, 0, .14), 0 11px 15px -7px rgba(0, 0, 0, .12), 0 24px 38px 3px rgba(0, 0, 0, .2);
      z-index: 2;
    }
    .notif_box p {
      margin: 0;
      padding: 0;
      font-size: 14px;
      font-weight: 400;
      line-height: 1.3;
    }
    .notif_box h4 {
      color: #333;
      font-size: 18px;
      font-weight: 500;
      margin: 0 0 10px;
      line-height: 1;
    }
    hr {
      height: 0;
      border: 0;
      border-top: 1px solid #ddd
    }
    .notifbox .close_notifbox {
      background: 0 0;
      border: none;
      padding: 0;
      color: #555;
      font-size: 30px;
      position: absolute;
      top: 23px;
      right: 23px;
      cursor: pointer;
      width: 20px;
      height: 20px;
      line-height: 20px;
      text-align: center;
    }   
    .notifbox .close_notifbox:focus,
    .notifbox .done_notifbox:focus {
      outline: none;
    }   
    .notifbox .done_notifbox {
      background: #FF4081;
      color: #fff;
      border: none;
      margin-top: 15px;
      display: inline-block;
      padding: 10px 13px;
      border-radius: 3px;
      box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
      float: right;
      font-family: Roboto, sans-serif;
      font-size: 14px;
      font-weight: 500;
      text-transform: uppercase;
      cursor: pointer;
    }
    .notifbox .close_notifbox:hover {
      color: #C51162;
    }
    .notifbox .done_notifbox:hover {
      background: #C51162;
    }
    .slideInDown {
      -webkit-animation-name: slideInDown;
      animation-name: slideInDown;
      -webkit-animation-duration: .4s;
      animation-duration: .4s;
      -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);
      }
    }

Langkah Ke Tiga
Silahkan salin kode HTML dibawah ini lalu letakkan di atas kode </body>.

  <amp-lightbox id="notifbox" layout="nodisplay">
    <div class="notifbox">
      <div class="notif_box slideInDown">
      <button class='close_notifbox' on='tap:notifbox.close' role='button' tabindex='0' title='Close'>&amp;times;</button>
      <h4>Notification</h4>
        <hr/>
        <p>
          Nunc faucibus, velit sed dapibus molestie, odio tortor tempor risus, quis pellentesque odio felis ac augue. Maecenas lobortis lorem urna, sit amet iaculis nibh feugiat sed. Aenean bibendum tristique ante, eu commodo orci condimentum non. Donec dapibus, tortor vitae vulputate accumsan, nisi lacus malesuada turpis, vitae convallis ligula eros vitae sapien. Duis massa elit, pellentesque eget leo ut, ornare blandit nisl. Donec hendrerit scelerisque accumsan.
        </p>
        <button class='done_notifbox' on='tap:notifbox.close' role='button' tabindex='0' title='Done'>Done</button>
      </div>
    </div>
  </amp-lightbox>

Jika mau menampilkan tombol Popup notificationnya silahkan tambahkan kode on="tap:notifbox" seperti dibawah ini.

  <button on="tap:notifbox" role="button" tabindex="0">
    Open Notif box
  </button>

Perhatikan langkah penerapannya, jika sudah sesuai silahkan SAVE dan selesai, selamat mencoba.