Home AMP Blog Tutorial Memasang Popup Notification Box Otomatis Muncul di Blog AMP HTML

Saturday 23 September 2017

Memasang Popup Notification Box Otomatis Muncul di Blog AMP HTML

Diterbitkan

Popup Notification Box Otomatis

Ini adalah postingan lanjutan dari sebelumnya yang sudah pernah dibahas Memasang Popup Notification Box di Blog AMP HTML. Di postingan lanjutan ini masih membahas hal yang sama namun berbeda cara menampilkannya. Jika sebelumnya untuk menampilkan Popup Notification tersedia tombol notificationnya di kali ini kita akan membuatnya otomatis muncul Popup saat pertama kali blog di buka. 

Pemasangan Popup Notification Box ini sangat berguna bagi media promosi terutama bagi sobat yang mempunyai Blog Onlineshop agar dapat memberitahukan Promosi apa yang sedang di jalankan sehingga dapat lebih menarik pelanggan untuk membeli produk yang ditawarkan. Tidak hanya sebatas Blog Onlineshop saja untuk Blog Tutorial pun ini sangat cocok jika mau menampilkan Notifikasi Secara Popup baik itu promosi maupun hal lainnya.

Di Cara Memasang Popup Notification Box Otomatis Muncul di Blog AMP HTML akan kita modifikasi sedikit scrip kodenya untuk menyembunyikan Popup Notification Box menggunakan .hide action AMP.

Bagi sobat yang mau mencoba Memasang Popup Notification Box Otomatis Muncul di Blog AMP HTML dapat mengikuti langkah berikut ini.


Langkah Pertama
Silahkan salin kode CSS dibawah ini lalu letakkan di style amp-custom pada template blog sobat.

    @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);
      }
    }


Langkah Ke Dua
Silahkan salin kode HTML dibawah ini lalu letakkan 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/AVvXsEjpgTuyfDeHToEqZUWJLLovoQME9v6HvRquQQ-v0tUKr0QtY-ke2PEhEAB7iny7iw7ejkhxqxYkhO5JBMkgC4qGObB2yTG3Edp-erIR-xDOgHRvKeO1tZebQF1bnpRIkbOBVVoMOL2MMCY/w1100/logo-og-image.jpg" title="" width="1100"></amp-img>
        <p>
        For registration click <a href="#" title="here">here</a>, please.
        </p>
      </div>
    </div>



Untuk amp-img kemudian catatannya silahkan sobat sesuaikan kembali.

Penerapan kode diatas akan Otomatis muncul Popup Notification saat pengunjung membuka blog maupun ke halaman lainnya.

Jika dirasa cara menampilkan popup notification box diatas kurang begitu baik dikarenakan tampilannya menggangu pengunjung dan sobat hanya mau menampilkannya cukup sekali saja setelah tombol close di klik selama pengunjung belum membersihkan cookies browser.

Maka perlu ditambahkan amp-user-notification yang akan memerintahkan otomatis saat pengunjung mengklik tombol close notification box tidak akan muncul kembali meskipun sudah merefresh halaman selama cookie browser belum dibersihkan. Cara menampilkannya sebagai berikut.

Langkah Pertama
Silahkan salin kode CSS dibawah ini letakkan pada Style amp-custome, jika sebelumnya sudah memasangnya silahkan ganti dengan kode berikut 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);
      }
    }


Langkah Ke Dua
Silahkan salin kode JS dibawah ini lalu letakkan diatas kode </head>, jika sebelumnya sudah pernah memasangnya silahkan lewati langkah ini.


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


Langkah Ke Tiga
Silahkan salin kode dibawah ini lalu letakkan 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/AVvXsEjpgTuyfDeHToEqZUWJLLovoQME9v6HvRquQQ-v0tUKr0QtY-ke2PEhEAB7iny7iw7ejkhxqxYkhO5JBMkgC4qGObB2yTG3Edp-erIR-xDOgHRvKeO1tZebQF1bnpRIkbOBVVoMOL2MMCY/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>
Untuk amp-img kemudian catatannya silahkan sobat sesuaikan kembali.

Pastikan sebelumnya sudah memasang kode Google Analytics pada template blognya, jika belum memasangnya silahkan salin kode amp-analitycs dibawah ini lalu letakkan 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>

Perhatikan kode UA-xxxxxxxxxxx silahkan ganti dengan kode analytics sobat punya. Dan Selesai semoga bermanfaat.

Artikel Terkait

ade godel

Next Post
Previous Post


EmoticonEmoticon

Subscribe to: Post Comments (Atom)