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 yang tujuannya juga untuk membuat tampilan blog lebih terlihat profesional tidak kalah dengan blog besar lainnya.
Pemasangan Popup notification Box ini di khususkan bagi sahabat yang menggunakan template . 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 sahabat tertarik untuk memasangnya ? untuk itu mari kita bahas dan ikuti langkah penerapannya dibawah ini Cara Memasang Popup Notification Box di Blog .
Langkah Pertama
Silahkan salin instruksi amp-lightbox.js ini lalu letakkan instruksi tersebut di atas instruksi </head>.
Jika di pembahasan sebelumnya sudah pernah terpasang instruksi diatas silahkan lewati langkah ini.
Langkah Ke Dua
Silahkan salin instruksi CSS dibawah ini lalu letakkan di bab style amp-custom pada template blog.
Langkah Ke Tiga
Silahkan salin instruksi HTML dibawah ini lalu letakkan di atas instruksi </body>.
Jika mau menampilkan tombol Popup notificationnya silahkan tambahkan instruksi on="tap:notifbox" seperti dibawah ini.
Perhatikan langkah penerapannya, jikalau sudah sesuai silahkan SAVE dan selesai, selamat mencoba.
Bagaimana sahabat tertarik untuk memasangnya ? untuk itu mari kita bahas dan ikuti langkah penerapannya dibawah ini Cara Memasang Popup Notification Box di Blog .
Langkah Pertama
Silahkan salin instruksi amp-lightbox.js ini lalu letakkan instruksi tersebut di atas instruksi </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 instruksi diatas silahkan lewati langkah ini.
Langkah Ke Dua
Silahkan salin instruksi 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 instruksi HTML dibawah ini lalu letakkan di atas instruksi </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 instruksi 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