Membuat Popup Notification Box Muncul Ketika Buka Blog Untuk AMP HTML

Pada artikel sebelumnya blogcozone sudah membagikan cara membuat Popup Notification Box untuk AMP HTML yang kemunculannya dengan menekan sebuah tombol. Nah kali ini blogcozone akan membagikan cara membuat Popup Notification Box yang muncul di awal ketika pengunjung membuka blog.

Popup Notification Box ini bisa kalian gunakan untuk menampilkan sebuah promo atau untuk menampilkan banner iklan. Untuk menyembunyikan Popup Notification Box ini kita memanfaatkan .hide action AMP jadi akan membuat blog lebih ringan saat loading.

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

Berikut ini Cara Membuat Popup Notification Box untuk Blog AMP

Untuk membuat popup notification box ini ada beberapa kode yang harus kalian terapkan pada blog kalian. Jika kalian ingin membuatnya kalian bisa mengikuti langkah-langkahnya sebagai berikut.

Silahkan kalian 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 kalian simpan kode HTML berikut 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitQaq2tpYN8-AeqULFFrF-rTDtBHC6cv4-ymW_YjLreK8D8J-VTj_AM1aOKI1JDJMkk6vBDPqElo4YYxXGdBzQAkxb7RXyTvNidPuhyphenhyphenhXVrGUHO_iU1qLlLcpohmEh4Vy5lyPkkqM9JZY/w1100/logo-og-image.jpg" title="" width="1100"></amp-img>
<p>
For registration click <a href="#" title="here">here</a>, please.
</p>
</div>
</div>

Catatan
Kemudian silahkan kalian sesuaikan amp-img dan catatannya sesuai keinginan kalian menggunakan kode diatas.

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

Langkah selanjutnya silahkan kalian simpan CSS di bawah ini pada style amp-custom, jika sudah menggunakan cara pertama silahkan ganti CSS cara pertama dengan yang ada 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 kalian pasang kedua JavaScript berikut ini di atas kode </head>, jika sudah ada maka lewati saja langkah ini. Atau jika salah satu kode belum ada maka silahkan kalian pasang JavaScript 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 kalian pasang kode ini 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitQaq2tpYN8-AeqULFFrF-rTDtBHC6cv4-ymW_YjLreK8D8J-VTj_AM1aOKI1JDJMkk6vBDPqElo4YYxXGdBzQAkxb7RXyTvNidPuhyphenhyphenhXVrGUHO_iU1qLlLcpohmEh4Vy5lyPkkqM9JZY/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>

Catatan
Kemudian silahkan kalian sesuaikan amp-img dan catatannya sesuai keinginan kalian menggunakan kode diatas.

Kemudian pastikan kalian juga sudah memasang kode amp-analitycs, jika belum silahkan pasang kode berikut ini 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>

Ganti kode UA-xxxxxxxxxx dengan kode akun analitycs blog kalian.