Skip to main content

follow us


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.

Baca juga :

  1. Cara Memasang Image Lightbox Valid AMP Blogger Template
  2. Memasang Widget Multi Tab Valid AMP di Blogger Template 2019
  3. Cara Melindungi Konten Blog dengan Widget DMCA Badge di Blogger AMP HTML
  4. Alternatif AdSense 2019, 3 Situs Penyedia Iklan Terbaik Untuk Blog Valid AMP Template
  5. Memasang Kotak Subscribe Berlangganan FeedBurner Email di AMP Blogger


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.

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar