Box Notifikasi Popup Otomatis pada blog AMP HTML
Desain Blog yang baik adalah tujuan untuk membuat tampilan blog lebih profesional. Untuk menjadikan seperti itu, salah satunya memasang Box Notifikasi Popup Otomatis pada blog muncul di awal ketika pengunjung membuka blog.Ini bisa digunakan untuk menampilkan sebuah promo, Menampilkan banner iklan atau sekedar pemberitahuan kepada pengunjung blog anda.
Pemasangan Popup notification Box ini di khususkan bagi blog berbasis AMP, Untuk blog yang non-amp akan saya posting pada postingan mendatang.
Untuk demonya silahkan pada link dibawah ini:
https://jsfiddle.net/k9L6dm83/11/embedded/result,html/#Result
Jika ingin mencobanya silahkan ikuti langkah-langkah yang saya diberikan di bawah ini.
Langkah 1
Pasang script komponen amp pada Template
Letakan script komponen amp dibawah ini tepat di atas kode</head>, Jika sudah ada maka anda lewati langkah ini. Atau jika salah satunya belum ada maka silahkan pasang yang belum ada. <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 2
Menambahkan CSS di style Template Blog Anda
Simpan CSS di bawah ini 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 {
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 3
Buat HTML Box Notifikasi Popup
Simpan kode HTML berikut di atas kode</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="500" layout="responsive" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXQ6lLtX7PuU_iXvxCvdWOd08gsfydohBDjLIdqtxcJHcNwwfH0WcAwQqq2gbT0uLLIjHBwtryi07qSXZlkMjSet3PRClbkgnCVDTlC7YBV5AscyXbfxd8Q9nZlvmO0bvwDXFXHQeVIuOr/s1600/google-amp.jpg" title="" width="1100"></amp-img>
<p>
For registration click <a href="#" title="here">here</a>, please.
</p>
</div>
</div>
Silahkan sesuaikan dengan keinginan Anda.
Kode di atas, Box Notifikasi Popup akan muncul setiap pengunjung membuka atau me-refresh halaman blog.
Untuk Box Notifikasi Popup yang hanya muncul sekali saja tanpa me-refresh halaman blog, silahkan ikuti langkahnya di bawah ini.
Ganti kode CSS pada langkah 2 dengan kode CSS dibawah 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);
}
}
Ganti kode HTML pada langkah 3 dengan kode dibawah ini
<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="500" layout="responsive" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXQ6lLtX7PuU_iXvxCvdWOd08gsfydohBDjLIdqtxcJHcNwwfH0WcAwQqq2gbT0uLLIjHBwtryi07qSXZlkMjSet3PRClbkgnCVDTlC7YBV5AscyXbfxd8Q9nZlvmO0bvwDXFXHQeVIuOr/s1600/google-amp.jpg" title="" width="1100"></amp-img>
<p>
For registration click <a href="#" title="here">here</a>, please.
</p>
</div>
</div>
</amp-user-notification>
Dan jangan lupa untuk memasang kode amp-analitycs di template blog anda, Silahkan pasang kode berikut ini di atas kode
</body> <amp-analytics id='analytics1' type='googleanalytics'>
<script type='application/json'>
{
"vars": {
"account": "UA-xxxxxxxxxx"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
Petunjuk: Ganti kode
UA-xxxxxxxxxx di atas dengan kode akun analitycs blog Anda.Demikian langkah-langkah untuk membuat Box Notifikasi Popup Otomatis pada blog AMP HTML.
0 Response to "Box Notifikasi Popup Otomatis pada blog AMP HTML"
Post a Comment