Setelah kemarin kita membahas dan sudah mempraktekkan Floating Search Box With Jquery for Blogspot biar membuat tampilan pencarian lebih terlihat profesional. Dipostingan kali ini kita akan membahas Cara Memasang Popup Notification Box di Blog AMP HTML yang tujuannya juga untuk membuat tampilan blog lebih terlihat profesional tidak kalah dengan blog besar lainnya.
Pemasangan Popup notification Box ini di khususkan bagi teman yang menggunakan template AMP HTML. Biasanya para pemilik blog atau website menggunakan Popup notification box ini digunakan untuk Promosi produk gres atau sekedar pemberitahuan, misalkan pemberitahuan bahwa blog tersebut sudah ada aplikasi di Playstore.
Pemasangan Popup notification Box ini juga cocok untuk Blog download, Games atau Onlineshop untuk updated gosip terbaru dari Produk yang di tawarkan nantinya jikalau sudah terpasang penampakkannya menyerupai di bawah ini.
Bagaimana teman tertarik untuk memasangnya ? untuk itu mari kita bahas dan ikuti langkah penerapannya dibawah ini Cara Memasang Popup Notification Box di Blog AMP HTML.
Langkah Pertama
Silahkan salin arahan amp-lightbox.js ini lalu letakkan arahan tersebut di atas arahan </head>.
Jika di pembahasan sebelumnya sudah pernah terpasang arahan diatas silahkan lewati langkah ini.
Langkah Ke Dua
Silahkan salin arahan CSS dibawah ini lalu letakkan di bab style amp-custom pada template blog.
Langkah Ke Tiga
Silahkan salin arahan HTML dibawah ini lalu letakkan di atas arahan </body>.
Jika mau menampilkan tombol Popup notificationnya silahkan tambahkan arahan on="tap:notifbox" seperti dibawah ini.
Perhatikan langkah penerapannya, jikalau sudah sesuai silahkan SAVE dan selesai, selamat mencoba.
Bagaimana teman tertarik untuk memasangnya ? untuk itu mari kita bahas dan ikuti langkah penerapannya dibawah ini Cara Memasang Popup Notification Box di Blog AMP HTML.
Langkah Pertama
Silahkan salin arahan amp-lightbox.js ini lalu letakkan arahan tersebut di atas arahan </head>.
<script async='async' custom-element='amp-lightbox' src='https://cdn.ampproject.org/v0/amp-lightbox-0.1.js'></script>Jika di pembahasan sebelumnya sudah pernah terpasang arahan diatas silahkan lewati langkah ini.
Langkah Ke Dua
Silahkan salin arahan CSS dibawah ini lalu letakkan di bab 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); } }Langkah Ke Tiga
Silahkan salin arahan HTML dibawah ini lalu letakkan di atas arahan </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'>&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 mau menampilkan tombol Popup notificationnya silahkan tambahkan arahan on="tap:notifbox" seperti dibawah ini.
<button on="tap:notifbox" role="button" tabindex="0"> Open Notif box </button>Perhatikan langkah penerapannya, jikalau sudah sesuai silahkan SAVE dan selesai, selamat mencoba.
Comments