Membuat Popup Notification Box Untuk Amp Html
Sebelumnya aku sudah membagikan cara menciptakan floating search box dengan amp-lightbox, sekarang aku membagikan cara menciptakan popup notification box untuk blog dengan AMP HTML.Dengan begitu, tampilan dan fitur blog AMP pun tidak akan kalah menarik dibanding dengan blog biasa. Popup notification box ini dapat dipakai untuk pengumuman dari admin blog yang ditujukan untuk pengunjung blog.
Sebagai demonya silahkan coba pada Fiddle di bawah ini:
Jika tertarik untuk mencobanya, silahkan ikuti langkahnya di bawah ini.
Simpan amp-lightbox.js berikut di atas arahan
</head>, kalau sudah ada maka tidak perlu menambahkannya lagi. <script async='async' custom-element='amp-lightbox' src='https://cdn.ampproject.org/v0/amp-lightbox-0.1.js'></script>
Kemudian silahkan simpan CSS berikut 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 {
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);
}
}
Kemudian simpan arahan html berikut 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>
Dan silahkan tambahkan arahan
on="tap:notifbox" pada tombol untuk menampilkan popup notification box menyerupai di bawah ini. <button on="tap:notifbox" role="button" tabindex="0">
Open Notif box
</button>
Praktis bukan? Selamat mencoba. Sumber https://www.kompiajaib.com/
0 Response to "Membuat Popup Notification Box Untuk Amp Html"
Posting Komentar