Chimul Chimol

follow us

Tuesday, 13 March 2018

Cara membuat tombol "Back to Top" pada Blog AMP HTML


السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ

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:&quot;&quot;;
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 😀

Blog ini dibuat oleh Yandi Mulyadi.

Use parse tool to easy get the text style on disqus comments:

Show Parser Hide Parser

Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.