Cara membuat tombol "Back to Top" pada Blog AMP HTML
Cara membuat Navigasi Back to Top - Chimul - Blog tentang Ilmu Website dan Kehidupan
Views
Hallo Sobat, kali ini saya akan memposting tentang "Cara membuat navigasi tombol "Back to Top" pada Blog AMP HTML". Tombol Back to top sangat berguna bagi blog/website kamu yang memiliki banyak kata dalam postingan halamannya, maka dengan tombol ini akan menjadikan web kamu user friendly sehingga pengunjung lebih dimanjakan dengan tombol "Back to top" tersebut. Lalu bagaimana si cara membuatnya? Silahkan simak postingan berikut ini :
Pertama, masukkan kode berikut di dalam kode
Kedua, setelah kode di atas sudah dimasukkan ke dalam kode Style AMP-Custom lalu masukkan script berikut ini diatas kode
Ketiga, setelah kode script di atas sudah dimasukkan maka masukkan kode berikut dibawah kode
Keempat, setelah kode script di atas sudah dimasukkan maka masukkan kode dibawah ini diatas kode
Bila semua kode sudah dimasukkan, silahkan cek kembali di website/blog kamu apakah script sudah bisa dijalankan apa belum. Selamat mencoba 😀
السَّلاَÙ…ُ عَÙ„َÙŠْÙƒُÙ…ْ ÙˆَرَØْÙ…َØ©ُ اللهِ ÙˆَبَرَÙƒَاتُÙ‡ُ
Hallo Sobat, kali ini saya akan memposting tentang "Cara membuat navigasi tombol "Back to Top" pada Blog AMP HTML". Tombol Back to top sangat berguna bagi blog/website kamu yang memiliki banyak kata dalam postingan halamannya, maka dengan tombol ini akan menjadikan web kamu user friendly sehingga pengunjung lebih dimanjakan dengan tombol "Back to top" tersebut. Lalu bagaimana si cara membuatnya? Silahkan simak postingan berikut ini :
Pertama, masukkan kode berikut di dalam kode
<style amp-custom='amp-custom'>.scrollToTop{color:#ddd;
font-size:1.4em;
box-shadow:0 1px 1.5px 0 rgba(0,0,0,.12),0 1px 1px 0 rgba(0,0,0,.24);
width:50px;
height:50px;
border-radius:100px;
border:none;
outline:0;
background:#00c2ff;
z-index:1000;
bottom:10px;
right:10px;
position:fixed;
opacity:0;
visibility:hidden;
cursor:pointer
}
#marker{position:absolute;
top:100px;
width:0;
height:0;
}
.scrollToTop svg{width:34px;
height:34px;
vertical-align:middle;
}
#totop:before{content:"";
display:block;
height:20px;
margin-top:-20px;
visibility:hidden;
}
Kedua, setelah kode di atas sudah dimasukkan ke dalam kode Style AMP-Custom lalu masukkan script berikut ini diatas kode
</head><script async='async' custom-element='amp-animation' src='https://cdn.ampproject.org/v0/amp-animation-0.1.js'/>
<script async='async' custom-element='amp-position-observer' src='https://cdn.ampproject.org/v0/amp-position-observer-0.1.js'/>Ketiga, setelah kode script di atas sudah dimasukkan maka masukkan kode berikut dibawah kode
<body><div id='totop'></div>Keempat, setelah kode script di atas sudah dimasukkan maka masukkan kode dibawah ini diatas kode
</body>
<amp-animation id='showAnim' layout='nodisplay'>
<script type='application/json'>
{
"duration": "200ms",
"fill": "both",
"iterations": "1",
"direction": "alternate",
"animations": [{
"selector": "#scrollToTopButton",
"keyframes": [{
"opacity": "1",
"visibility": "visible"
}]
},
{
"selector": "#halaman",
"keyframes": [{
"opacity": "1",
"visibility": "visible"
}]
}]
}
</script>
</amp-animation>
<amp-animation id='hideAnim' layout='nodisplay'>
<script type='application/json'>
{
"duration": "200ms",
"fill": "both",
"iterations": "1",
"direction": "alternate",
"animations": [{
"selector": "#scrollToTopButton",
"keyframes": [{
"opacity": "0",
"visibility": "hidden"
}]
},
{
"selector": "#halaman",
"keyframes": [{
"opacity": "0",
"visibility": "hidden"
}]
}]
}
</script>
</amp-animation>
<div id='marker'>
<amp-position-observer layout='nodisplay' on='enter:hideAnim.start; exit:showAnim.start'>
</amp-position-observer>
</div>
<button aria-label='Scroll To Top' class='scrollToTop' id='scrollToTopButton' on='tap:totop.scrollTo(duration=200)'>
<svg viewBox='0 0 24 24'>
<path d='M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z' fill='#fff'/>
</svg>
</button>
Bila semua kode sudah dimasukkan, silahkan cek kembali di website/blog kamu apakah script sudah bisa dijalankan apa belum. Selamat mencoba 😀