Cara Pasang Popup Notification Muncul Secara Otomatis di Blog AMP HTML

Cara Pasang Popup Notification Muncul Secara Otomatis di Blog AMP HTML

Cara Pasang Popup Notification Muncul Secara Otomatis di Blog AMP HTML


FLOBAMORApedia - Sebelumnya dalam posting saya yang lalu, saya sudah membahas cara memasang popup notification di blog amp dengan tombol open close. Fungsinya sama, namun berbeda dalam penerapanya di web atau blog. Cara pasangnya pun sangatlah mudah, jadi ikuti tutorial dibawah ini dengan baik.

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


Berikut ini Cara Pasang Popup Notification Muncul Secara Otomatis di Blog AMP HTML :

Langkah Pertama

Anda 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

Anda 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://4.bp.blogspot.com/-PYDgN0a8iFE/WaOJ7CPan-I/AAAAAAAAsdg/llvkuGlrhFwxaWX05XMT4aBgAV2oO-IYQCLcBGAs/w1100/logo-og-image.jpg" title="" width="1100"></amp-img>
        <p>
        For registration click <a href="#" title="here">here</a>, please.
        </p>
      </div>
    </div>

Perhatikan kode yang saya tandai, ganti sesuai dengan url gambar/logo Anda dan Teks/url yang saya tandai diatas dengan url dan kata-kata Anda sendiri.

Untuk penerapan kode diatas akan otomatis muncul Popup Notification saat pengunjung membuka blog maupun ke halaman lainnya. Anda bisa membuat popup notification ini muncul sekali saja setelah tombol close di klik. Jadi perlu ditambahkan amp-user-notification yang akan memerintahkan otomatis saat pengunjung mengklik tombol close notification box tidak akan muncul kembali. Cara menampilkannya sebagai berikut, perhatikan baik-baik.
Langkah Pertama

Anda salin kode CSS dibawah ini letakkan di Style amp-custome, jika sebelumnya sudah memasangnya silahkan ganti dengan kode dibawah 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

Anda salin kode JS dibawah ini lalu letakkan diatas kode </head>, abaikan jika sebelumnya sudah pernah memasangnya.

  <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

Anda 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://4.bp.blogspot.com/-PYDgN0a8iFE/WaOJ7CPan-I/AAAAAAAAsdg/llvkuGlrhFwxaWX05XMT4aBgAV2oO-IYQCLcBGAs/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>

Perhatikan kode yang saya tandai, ganti sesuai dengan url gambar/logo Anda dan Teks/url yang saya tandai diatas dengan url dan kata-kata Anda sendiri. Pastikan kode Google Analytics sudah dipasang pada template blognya, jika belum Anda 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 yang saya tandai, ganti dengan kode Google Analytics Anda

Sekian artikel Cara Pasang Popup Notification Muncul Secara Otomatis di Blog AMP HTML, semoga bermanfaat.

Blogger
Disqus
Pilih Sistem Komentar

No comments

۝ Peraturan dalam berkomentar :

☛ UpsS,. Budayakan berkomentar sesudah membaca artikel sob.
☛ Dilarang Menghina, Promosi (Iklan), Menyelipkan Link Aktiv, dsb.
☛ Dilarang berkomentar berbau Porno, Spam, Sara, Politic, Profokasi.
☛ Berkomentarlah yang Sopan,Bijak, dan Sesuai Artikel (Dilarang OOT)
☛ Saya sangat berterima kasih atas semua yang mau berkomentar diblog saya.
☛ Saya PASTI akan berkunjung balik ke blog Sobat yang sudah mau berkomentar di sini.

Copyright © 2018 - Blogger NTT® Bloggerntt.com✓

Advertiser