Back To Top Adalah Tombol "Kembali ke atas" ini memungkinkan pengguna untuk menggulir kembali ke atas halaman dengan lancar. meningkatkan pengalaman navigasi di situs web dengan halaman yang panjang.Berikut Cara Membuat Back To Top pada Blogger AMP :
- Buka Blogger
- Klik Menu Theme/Template -> Edit HTML
- Masukan Kode dibawah ini Sesudah <body> :
<div id='totop'></div> - Masukan CSS dibawah ini pada <style amp-custom='amp-custom'> :
/* Back To Top */ #totop:before { content: ""; display: block; height: 20px; margin-top: -20px; visibility: hidden; } .scrollToTop{cursor: pointer;color:#fafafa;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:#132fff;z-index:9999;bottom:15px;right:35px;position:fixed;opacity:0;visibility:hidden} #marker{position:absolute;top:100px;width:0;height:0} .scrollToTop svg{width:34px;height:34px;vertical-align:middle;} - Masukan JS Script dibawah ini sebelum tag </head> :
<b:if cond='data:blog.pageType != "static_page" and data:blog.pageType != "error_page"'> <script async='async' custom-element='amp-position-observer' src='https://cdn.ampproject.org/v0/amp-position-observer-0.1.js'/> <script async='async' custom-element='amp-animation' src='https://cdn.ampproject.org/v0/amp-animation-0.1.js'/> </b:if> - Masukan Kode Button Back To Top dibawah ini sebelum tags </body> :
<b:if cond='data:blog.pageType != "static_page" and data:blog.pageType != "error_page"'> <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" }] }] } </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" }] }] } </script> </amp-animation> <div id='marker'> <amp-position-observer layout='nodisplay' on='enter:hideAnim.start; exit:showAnim.start'> </amp-position-observer> </div> <button 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> - Terakhir Kalian Save.