Ini yaitu postingan lanjutan dari sebelumnya yang sudah pernah dibahas Memasang Popup Notification Box di Blog . 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 dikala pertama kali blog di buka.
Pemasangan Popup Notification Box ini sangat berkhasiat bagi media promosi terutama bagi sahabat yang mempunyai Blog Onlineshop biar 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 kalau mau menampilkan Notifikasi Secara Popup baik itu promosi maupun hal lainnya.
Di Cara Memasang Popup Notification Box Otomatis Muncul di Blog akan kita modifikasi sedikit scrip kodenya untuk menyembunyikan Popup Notification Box menggunakan .hide action .
Bagi sahabat yang mau mencoba Memasang Popup Notification Box Otomatis Muncul di Blog dapat mengikuti langkah berikut ini.
Langkah Pertama
Silahkan salin arahan CSS dibawah ini lalu letakkan di style amp-custom pada template blog sobat.
Langkah Ke Dua
Silahkan salin arahan HTML dibawah ini lalu letakkan di atas arahan </body>.
Untuk amp-img kemudian catatannya silahkan sahabat sesuaikan kembali.
Penerapan arahan diatas akan Otomatis muncul Popup Notification dikala 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 dikala 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 arahan CSS dibawah ini letakkan pada Style amp-custome, kalau sebelumnya sudah memasangnya silahkan ganti dengan arahan berikut ini.
Langkah Ke Dua
Silahkan salin arahan JS dibawah ini lalu letakkan diatas arahan </head>, kalau sebelumnya sudah pernah memasangnya silahkan lewati langkah ini.
Langkah Ke Tiga
Silahkan salin arahan dibawah ini lalu letakkan di atas arahan </body>.
Pastikan sebelumnya sudah memasang arahan Google Analytics pada template blognya, kalau belum memasangnya silahkan salin arahan amp-analitycs dibawah ini lalu letakkan di atas arahan </body>.
Perhatikan arahan UA-xxxxxxxxxxx silahkan ganti dengan arahan 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 arahan HTML dibawah ini lalu letakkan di atas arahan </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 arahan diatas akan Otomatis muncul Popup Notification dikala 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 dikala 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 arahan CSS dibawah ini letakkan pada Style amp-custome, kalau sebelumnya sudah memasangnya silahkan ganti dengan arahan 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 arahan JS dibawah ini lalu letakkan diatas arahan </head>, kalau 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 arahan dibawah ini lalu letakkan di atas arahan </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 arahan Google Analytics pada template blognya, kalau belum memasangnya silahkan salin arahan amp-analitycs dibawah ini lalu letakkan di atas arahan </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 arahan UA-xxxxxxxxxxx silahkan ganti dengan arahan analytics sahabat punya. Dan Selesai semoga bermanfaat.
Comments