› › › › › › ›

Membuat Popup Notification Box Muncul Dikala Buka Blog Untuk Amp Html

Jumat, 27 April 2018 Add Comment Edit
Sebelumnya saya sudah membagikan cara membuat Popup Notification Box untuk AMP HTML yang kemunculannya dengan menekan sebuah tombol. Nah kali ini saya akan membagikan cara membuat Popup Notification Box yang muncul di awal dikala pengunjung membuka blog.

Popup Notification Box ini dapat dipakai untuk menampilkan sebuah promo atau untuk menampilkan banner iklan.

Untuk menyembunyikan Popup Notification Box ini kita memanfaatkan .hide action AMP yang kemarin saya bagikan.

Penampakannya ibarat pada Fiddle di bawah ini, silahkan refresh halaman ini.


Jika ingin mencobanya silahkan ikuti langkahnya di bawah ini.

Silahkan simpan CSS di bawah ini 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 {
       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);
       }
     }

Kemudian simpan instruksi HTML berikut di atas instruksi </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="Membuat Popup Notification Box Muncul Ketika Buka Blog Untuk AMP HTML Membuat Popup Notification Box Muncul Ketika Buka Blog Untuk AMP HTML" height="550" layout="responsive" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsDRbomPcA5CxM95WNfY0JqS-39DQu-U0POH6BC5EH6wZAXufhJmJJd5J2GPNDzWfCZZ2vszP8eqFQHJ7Ww1jPLwitJC6mgXdhwnEzKF3_zt678vNkXEoyzQ5W_HQ8QJBNAu3k4_1Vn6Q/w1100/logo-og-image.jpg" title="Membuat Popup Notification Box Muncul Ketika Buka Blog Untuk AMP HTML" width="1100"></amp-img>
         <p>
         For registration click <a href="#" title="Membuat Popup Notification Box Muncul Ketika Buka Blog Untuk AMP HTML">here</a>, please.
         </p>
       </div>
     </div>

Silahkan sesuaikan amp-img dan catatannya sesuai impian Anda.

Dengan instruksi di atas, notification box akan muncul setiap pengunjung membuka atau me-refresh halaman blog.

Namun kalau Anda menginginkan notification box ini hanya muncul sekali saja sehingga tidak mengganggu pengunjung setiap membuka atau me-refresh halaman blog, kita dapat memanfaatkan amp-user-notification. Ketika pengunjung meng-close notification box maka selanjutnya tidak akan muncul lagi sebelum pengunjung menghapus cookies pada browser-nya.

Penampakannya ibarat pada Fiddle di bawah ini. Silahkan close notification box-nya kemudian refresh halaman ini, maka notification box-nya tidak akan muncul sebelum menghapus cookies browser.


Jika ingin mencobanya silahkan ikuti langkahnya di bawah ini.

Silahkan simpan CSS di bawah ini pada style amp-custom, kalau sudah memakai cara pertama silahkan ganti CSS cara pertama dengan yang di bawah 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);
       }
     }

Kemudian silahkan pasang kedua js berikut ini di atas instruksi </head>, kalau sudah ada maka lewati langkah ini. Atau kalau salah satunya belum ada maka silahkan pasang js yang belum ada saja.

   <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>

Kemudian silahkan pasang instruksi ini di atas instruksi </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="Membuat Popup Notification Box Muncul Ketika Buka Blog Untuk AMP HTML Membuat Popup Notification Box Muncul Ketika Buka Blog Untuk AMP HTML" height="550" layout="responsive" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsDRbomPcA5CxM95WNfY0JqS-39DQu-U0POH6BC5EH6wZAXufhJmJJd5J2GPNDzWfCZZ2vszP8eqFQHJ7Ww1jPLwitJC6mgXdhwnEzKF3_zt678vNkXEoyzQ5W_HQ8QJBNAu3k4_1Vn6Q/w1100/logo-og-image.jpg" title="Membuat Popup Notification Box Muncul Ketika Buka Blog Untuk AMP HTML" width="1100"></amp-img>
         <p>
         For registration click <a href="#" title="Membuat Popup Notification Box Muncul Ketika Buka Blog Untuk AMP HTML">here</a>, please.
         </p>
       </div>
     </div>
   </amp-user-notification>

Silahkan sesuaikan amp-img dan catatannya sesuai impian Anda.

Kemudian pastikan Anda juga sudah memasang instruksi amp-analitycs, kalau belum silahkan pasang instruksi berikut ini di atas instruksi </body>

   <amp-analytics id='analytics1' type='googleanalytics'>
 <script type='application/json'>
 {
   "vars": {
     "account": "UA-xxxxxxxxxx"
   },
   "triggers": {
     "trackPageview": {
       "on": "visible",
       "request": "pageview"
     }
   }
 }
 </script>
 </amp-analytics>

Ganti instruksi UA-xxxxxxxxxx dengan instruksi akun analitycs blog Anda.
Sumber https://www.kompiajaib.com/

0 Response to "Membuat Popup Notification Box Muncul Dikala Buka Blog Untuk Amp Html"

Posting Komentar

Langganan: Posting Komentar (Atom)

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel