Skip to main content
Valid AMP

follow us

Cara Mudah Membuat Popup Notification Box Valid AMP HTML saat Blog Dibuka

Pada kesempatan kali ini saya akan mengulas artikel tentang bagaimana Cara Mudah Membuat Popup Notification Box Valid AMP HTML saat Blog Dibuka
Fungsi Pop Up adalah jendela yang muncul secara otomatis dan tiba-tiba di depan layar aplikasi kita atau saat kita membuka website seseorang, Fungsi jendela Pop Up sendiri adalah untuk menyampaikan pesen yang berada di website kita atau website seseorang sebelum kita membuka halaman-halaman lain yang ada di website tersebut.Dengan begitu, tampilan dan fitur blog AMP sobat akan lebih menarik.

Untuk lebih jelasnya silahkan lihat demonya di bawah ini:



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

  • Petama silahkan anda Simpan amp-lightbox.js berikut di atas kode , jika sudah ada maka tidak perlu menambahkannya lagi atau lewati saja.

     
  • Kemudian silahkan coy kode CSS berikut pada style amp-custom di halaman postingan mobile maupun mobile.

        @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


 

   


     


     

     

Notification



       


       



          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.

       



       

     


   


 


  • jika sudah sekarang silahkan anda tambahkan kode on="tap:notifbox" pada tombol untuk menampilkan popup notification box seperti di bawah ini.

     

    Selesai,silahkan anda uji coba,Mudah bukan?itulah artikel tentang Cara Mudah Membuat Popup Notification Box Valid AMP HTML saat Blog Dibuka


  • Dul Bjn

    Valid Amp
    Reaksi:

    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