BERLANGGANAN

Dapatkan Penawaran Terbaik Kami Dengan Berlangganan Melalui Email

Setelah Anda memasukkan email di atas, maka secara otomatis Anda akan menerima posting baru dari kami

Cara Membuat Popup Notification Box Valid AMP HTML


Hi Sobat MidaMax.Net... Apa Kabar?? Semoga Sobat MidaMax.Net yang sedang menyimak ulasan ini dalam keadaan baik dan sehat semuanya, Amin... Amin... Amin...

Pada kesempatan kali ini saya akan mengulas tentang bagaimana cara membuat popup notification box untuk blog valid AMP HTML. Sebenarnya ulasan ini sebelumnya saya dapat dari blog Kang Adhy Suryadi ( KompiAjaib.com ), namun pada kali ini saya hanya bermaksud untuk meneruskan saja apa yang telah saya dapatkan dari yang telah dibagikan oleh Kang Adhy Suryadi disitusnya KompiAjaib.com.

Setelah saya simak dan saya pelajari ternyata cara  cara membuat popup notification box untuk blog valid AMP HTML sangat mudah untuk penerapannya pada blog sobat yang sudah valid AMP HTML.

Dengan begitu, tampilan dan fitur blog AMP sobat akan lebih  menarik dibanding dengan blog biasa. Popup notification box ini bisa digunakan untuk pengumuman dari admin blog yang ditujukan untuk pengunjung blog.

Berikut demonya silahkan sobat lihat pada Fiddle di bawah ini:



Jika tertarik untuk mencobanya, silahkan ikuti langkahnya di bawah ini.

Simpan amp-lightbox.js berikut di atas kode </head>, jika sudah ada maka tidak perlu menambahkannya lagi.


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

Kemudian silahkan simpan CSS berikut 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 {
      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);
      }
    }

Kemudian simpan kode html berikut 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>

Dan silahkan tambahkan kode on="tap:notifbox" pada tombol untuk menampilkan popup notification box seperti di bawah ini.



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

Mudah bukan? Selamat mencoba.


Disqus Comments
Slide Library

Build modern, professional sliders with the hundreds of premade slides in minutes. Fresh design, with harmonious typography.

Endless Possibilities

Mix carefully crafted slides to create gorgeous sliders and blocks

Flexible System

Styles and UI elements fit for any kind of a web related project

Mobile Friendly

Make your slide looks great on all screens, tablets and phones

Copyright © 2017 MidaMax