Membuat Popup Notification Box Muncul Ketika Buka Blog Untuk AMP HTML

Ditulis oleh: Adhy Suryadi

Ditulis pada: 8/29/2017

Sebelumnya saya sudah membagikan cara membuat Popup Notification Box untuk AMP HTML yang kemunculannya dengan menekan sebuah tombol. Nah kali ini saya akan membagikan cara membuat Popup Notification Box yang muncul di awal ketika pengunjung membuka blog.

Popup Notification Box ini bisa digunakan untuk menampilkan sebuah promo atau untuk menampilkan banner iklan.

Untuk menyembunyikan Popup Notification Box ini kita memanfaatkan .hide action AMP yang kemarin saya bagikan.

Penampakannya seperti pada Fiddle di bawah ini, silahkan refresh halaman ini.


Jika ingin mencobanya silahkan ikuti langkahnya di bawah ini.

Silahkan simpan CSS di bawah ini pada style amp-custom

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

      width: 100%;

      height: 100%;

      position: fixed;

      top:0;

      left:0;

      display: flex;

      align-items: center;

      justify-content: center;

      z-index: 10000;

    }

    .notif_box{

      background:#fff;

      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;

      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;

      overflow:hidden;

    }

    .notif_box p{

      margin:0;

      padding:10px 20px;

      font-size:14px;

      font-weight: 400;

      line-height:1.3;

    }

    .notif_box p a {

      color:red;

      text-decoration: none;

      font-weight: 500;

    }

    .notif_box p a:hover {

      color:black;

    }

    .notifbox .close_notifbox {

      background: 0 0;

      border: none;

      padding:0;

      color: #efefef;

      font-size: 30px;

      position: absolute;

      top: 7px;

      right: 5px;

      cursor: pointer;

      width:20px;

      height:20px;

      line-height: 20px;

      text-align: center;

      z-index:2;

    }

    .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);

      }

    }

Kemudian simpan kode HTML berikut di atas kode </body>

    <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="550" layout="responsive" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrvBYv1qfNTGht__vDStpuNd3D33xXqSDfsfS1ZsC2EyWXe_Ab5dd1mEgau1d60mOG2qF9azeG9hrrPuH-gnAxPOOBZMs60KNlQeeHb0X_v-gkJrm0I6w6vz0BJIGS3bPTRsdfLYykviA/w1100/logo-og-image.jpg" title="" width="1100"></amp-img>

        <p>

        For registration click <a href="#" title="here">here</a>, please.

        </p>

      </div>

    </div>

Silahkan sesuaikan amp-img dan catatannya sesuai keinginan Anda.

Dengan kode di atas, notification box akan muncul setiap pengunjung membuka atau me-refresh halaman blog.

Namun jika Anda menginginkan notification box ini hanya muncul sekali saja sehingga tidak mengganggu pengunjung setiap membuka atau me-refresh halaman blog, kita bisa memanfaatkan amp-user-notification. Ketika pengunjung meng-close notification box maka selanjutnya tidak akan muncul lagi sebelum pengunjung menghapus cookies pada browser-nya.

Penampakannya seperti pada Fiddle di bawah ini. Silahkan close notification box-nya lalu refresh halaman ini, maka notification box-nya tidak akan muncul sebelum menghapus cookies browser.


Jika ingin mencobanya silahkan ikuti langkahnya di bawah ini.

Silahkan simpan CSS di bawah ini pada style amp-custom, jika sudah menggunakan cara pertama silahkan ganti CSS cara pertama dengan yang di bawah ini.

    *{

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

      display: flex;

      align-items: center;

      justify-content: center;

      z-index: 10000;

    }

    .notif_box{

      background:#fff;

      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;

      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;

      overflow:hidden;

    }

    .notif_box p{

      margin:0;

      padding:10px 20px;

      font-size:14px;

      font-weight: 400;

      line-height:1.3;

    }

    .notif_box p a {

      color:red;

      text-decoration: none;

    }

    .notif_box p a:hover {

      color:black;

    }

    .notifbox .close_notifbox {

      background: 0 0;

      border: none;

      padding:0;

      color: #efefef;

      font-size: 30px;

      position: absolute;

      top: 7px;

      right: 5px;

      cursor: pointer;

      width:20px;

      height:20px;

      line-height: 20px;

      text-align: center;

      z-index:2;

    }

    .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);

      }

    }

Kemudian silahkan pasang kedua js berikut ini di atas kode </head>, jika sudah ada maka lewati langkah ini. Atau jika salah satunya belum ada maka silahkan pasang js yang belum ada saja.

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

Kemudian silahkan pasang kode ini di atas kode </body>

  <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="550" layout="responsive" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrvBYv1qfNTGht__vDStpuNd3D33xXqSDfsfS1ZsC2EyWXe_Ab5dd1mEgau1d60mOG2qF9azeG9hrrPuH-gnAxPOOBZMs60KNlQeeHb0X_v-gkJrm0I6w6vz0BJIGS3bPTRsdfLYykviA/w1100/logo-og-image.jpg" title="" width="1100"></amp-img>

        <p>

        For registration click <a href="#" title="here">here</a>, please.

        </p>

      </div>

    </div>

  </amp-user-notification>

Silahkan sesuaikan amp-img dan catatannya sesuai keinginan Anda.

Kemudian pastikan Anda juga sudah memasang kode amp-analitycs, jika belum silahkan pasang kode berikut ini di atas kode </body>

  <amp-analytics id='analytics1' type='googleanalytics'>

<script type='application/json'>

{

  "vars": {

    "account": "UA-xxxxxxxxxx"

  },

  "triggers": {

    "trackPageview": {

      "on": "visible",

      "request": "pageview"

    }

  }

}

</script>

</amp-analytics>

Ganti kode UA-xxxxxxxxxx dengan kode akun analitycs blog Anda.