Iklan Billboard 970x250

Untuk Anda yang mau mengirimkan karya literasimu, baik itu cerpen, puisi, esai dan karya literasi lainya, silahkan Anda buka disini Kirim Artikel. LINK UNDUH SUDAH SAYA PERBAIKI. (Khusus Pada Artikel Aplikasi Android )

×
Cara Pasang atau Membuat Popup Notification di Blog AMP HTML Keren

Iklan 728x90

Cara Pasang atau Membuat Popup Notification di Blog AMP HTML Keren

    Bloggerntt.com - Cara Pasang atau Membuat Popup Notification di Blog AMP HTML Keren- Membuat atau memasang popup notification box di blog amp sangatlah mudah. Popup Notification Box atau kotak pesan peringatan di blog berfungi sebagai pemberitahun untuk pengunjung blog jika ada pesan khusus dari admin blog. Ada banyak cara untuk memasang notifikasi popup di blogger, namun kali ini saya akan membagikan cara paling mudah untuk Anda terapkan di blog atau web Anda.

    Cara Pasang atau Membuat Popup Notification di Blog AMP HTML Keren


    Baca juga :

    1. Cara Terbaru Pasang Iklan AdSense amp-ad di AMP Blogger 2019
    2. Pasang Custom Fonts Pada Blogger Valid Google Blog AMP HTML
    3. Cara Pasang Tombol Search Box Di Template Blog AMP HTML
    4. Cara Pasang Widget Recent Comments Disqus di Blog AMP HTML
    5. Cara Pasang Popup Notification Muncul Secara Otomatis di Blog AMP HTML


     Berikut Langkah Cara Pasang atau Membuat Popup Notification di Blog AMP HTML Keren :

     PERTAMA

    Anda salin kode amp-lightbox.js ini lalu letakkan kode tersebut di atas kode </head>. Jika sudah pernah memasang kode dibawah silahkan lewati langkah ini.


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

    KEDUA

    Anda salin kode CSS dibawah ini lalu letakkan di bagian style amp-custom pada template blog.

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


    KETIGA

    Anda salin kode HTML dibawah ini lalu letakkan 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>


    Jika Anda mau menampilkan tombol Popup notificationnya silahkan tambahkan kode on="tap:notifbox" seperti dibawah ini.

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

    TERAKHIR

    Silahkan SAVE template blog Anda .



    Sekian artikel Cara Pasang atau Membuat Popup Notification di Blog AMP HTML Keren, semoga bermanfaat.
    Baca Juga
    SHARE
    Masukan Email Anda Untuk Dapatkan Update GRATIS!

    Artikel Terkait:

    Post a Comment

    Iklan Tengah Post