Ini yaitu postingan lanjutan dari sebelumnya yang sudah pernah dibahas Memasang Popup Notification Box di Blog AMP HTML. Di postingan lanjutan ini masih membahas hal yang sama namun berbeda cara menampilkannya. Jika sebelumnya untuk menampilkan Popup Notification tersedia tombol notificationnya di kali ini kita akan membuatnya otomatis muncul Popup ketika pertama kali blog di buka.
Pemasangan Popup Notification Box ini sangat memiliki kegunaan bagi media promosi terutama bagi sahabat yang mempunyai Blog Onlineshop supaya dapat memberitahukan Promosi apa yang sedang di jalankan sehingga dapat lebih menarik pelanggan untuk membeli produk yang ditawarkan. Tidak hanya sebatas Blog Onlineshop saja untuk Blog Tutorial pun ini sangat cocok jikalau mau menampilkan Notifikasi Secara Popup baik itu promosi maupun hal lainnya.
Di Cara Memasang Popup Notification Box Otomatis Muncul di Blog AMP HTML akan kita modifikasi sedikit scrip kodenya untuk menyembunyikan Popup Notification Box menggunakan .hide action AMP.
Bagi sahabat yang mau mencoba Memasang Popup Notification Box Otomatis Muncul di Blog AMP HTML dapat mengikuti langkah berikut ini.
Langkah Pertama
Silahkan salin instruksi CSS dibawah ini lalu letakkan di style amp-custom pada template blog sobat.
Langkah Ke Dua
Silahkan salin instruksi HTML dibawah ini lalu letakkan di atas instruksi </body>.
Untuk amp-img kemudian catatannya silahkan sahabat sesuaikan kembali.
Penerapan instruksi diatas akan Otomatis muncul Popup Notification ketika pengunjung membuka blog maupun ke halaman lainnya.
Jika dirasa cara menampilkan popup notification box diatas kurang begitu baik dikarenakan tampilannya menggangu pengunjung dan sahabat hanya mau menampilkannya cukup sekali saja setelah tombol close di klik selama pengunjung belum membersihkan cookies browser.
Maka perlu ditambahkan amp-user-notification yang akan memerintahkan otomatis ketika pengunjung mengklik tombol close notification box tidak akan muncul kembali meskipun sudah merefresh halaman selama cookie browser belum dibersihkan. Cara menampilkannya sebagai berikut.
Langkah Pertama
Silahkan salin instruksi CSS dibawah ini letakkan pada Style amp-custome, jikalau sebelumnya sudah memasangnya silahkan ganti dengan instruksi berikut ini.
Langkah Ke Dua
Silahkan salin instruksi JS dibawah ini lalu letakkan diatas instruksi </head>, jikalau sebelumnya sudah pernah memasangnya silahkan lewati langkah ini.
Langkah Ke Tiga
Silahkan salin instruksi dibawah ini lalu letakkan di atas instruksi </body>.
Pastikan sebelumnya sudah memasang instruksi Google Analytics pada template blognya, jikalau belum memasangnya silahkan salin instruksi amp-analitycs dibawah ini lalu letakkan di atas instruksi </body>.
Perhatikan instruksi UA-xxxxxxxxxxx silahkan ganti dengan instruksi analytics sahabat punya. Dan Selesai semoga bermanfaat.
@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); } }Langkah Ke Dua
Silahkan salin instruksi HTML dibawah ini lalu letakkan 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'>&times;</button> <amp-img alt="" height="550" layout="responsive" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgstI7q6NrV3oxoV3W0knRUxEcIPb-WBPnFEOxq3pWgPVKFGJz07tyc-0JU9ZfQxYUJQvuzCreOu9tvp6H3cWXiveq7NhJeVcKbhTpUCiP1kDIj9-XlFA_ZyYnhbz8PDKDPOrV82dDcmkc/w1100/logo-og-image.jpg" title="" width="1100"></amp-img> <p> For registration click <a href="#" title="here">here</a>, please. </p> </div> </div>Untuk amp-img kemudian catatannya silahkan sahabat sesuaikan kembali.
Penerapan instruksi diatas akan Otomatis muncul Popup Notification ketika pengunjung membuka blog maupun ke halaman lainnya.
Jika dirasa cara menampilkan popup notification box diatas kurang begitu baik dikarenakan tampilannya menggangu pengunjung dan sahabat hanya mau menampilkannya cukup sekali saja setelah tombol close di klik selama pengunjung belum membersihkan cookies browser.
Maka perlu ditambahkan amp-user-notification yang akan memerintahkan otomatis ketika pengunjung mengklik tombol close notification box tidak akan muncul kembali meskipun sudah merefresh halaman selama cookie browser belum dibersihkan. Cara menampilkannya sebagai berikut.
Langkah Pertama
Silahkan salin instruksi CSS dibawah ini letakkan pada Style amp-custome, jikalau sebelumnya sudah memasangnya silahkan ganti dengan instruksi berikut 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); } }Langkah Ke Dua
Silahkan salin instruksi JS dibawah ini lalu letakkan diatas instruksi </head>, jikalau sebelumnya sudah pernah memasangnya silahkan lewati langkah ini.
<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>Langkah Ke Tiga
Silahkan salin instruksi dibawah ini lalu letakkan 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'>&times;</button> <amp-img alt="" height="550" layout="responsive" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgstI7q6NrV3oxoV3W0knRUxEcIPb-WBPnFEOxq3pWgPVKFGJz07tyc-0JU9ZfQxYUJQvuzCreOu9tvp6H3cWXiveq7NhJeVcKbhTpUCiP1kDIj9-XlFA_ZyYnhbz8PDKDPOrV82dDcmkc/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>Pastikan sebelumnya sudah memasang instruksi Google Analytics pada template blognya, jikalau belum memasangnya silahkan salin instruksi amp-analitycs dibawah ini lalu letakkan 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>Perhatikan instruksi UA-xxxxxxxxxxx silahkan ganti dengan instruksi analytics sahabat punya. Dan Selesai semoga bermanfaat.
Comments