GagakTekno

Cara Memasang Back To Top AMP

Back To Top memang selalu dipakai oleh kalangan Blogger untuk mempermudah pengunjung saat ingin membaca kembali tanpa perlu melakukan Scroll ke atas dan tentu saja ini dapat membuat pengunjung merasa lebih diperhatikan karena pengunjung tidak dipersulit oleh blog yang kita jalankan dan hal ini juga dapat menambah pengunjung merasa lebih baik saat berselancar di blog kita.

Kenapa saya judul yang saya gunakan AMP ? tentu saja karena yang akan dibahas adalah tentang Acelerated Mobile Page atau yang disingkat dengan AMP, AMP sendiri memang tidak memperbolehkan kita untuk membuat sebuah script internal lagi karena sudah disediakan maka dari itu AMP cukup merepotkan sekali tetapi bila sobat ingin mencoba berbagai hal bisa juga tanpa memerlukan Javascript melainkan CSS saja.

Cara Memasang Back To Top AMP


Seperti biasa sobat masuk terlebih dahulu ke blognya dulu sebelum langsung ke Tutorialnya. Bila sudah maka langsung saja ke To the Point atau Praktekan langsung.

Pertama klik Tema > Klik Edit HTML
Kedua cari kode </head> dan tambahkan kode dibawah ini diatasnya
<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;error_page&quot;'>
<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>
Kemudian silahkan copy CSS berikut dan paste pada <style amp-custom>
/* Scroll To Top */
.scrollToTop{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:#233a53;z-index:9999;bottom:10px;right:10px;position:fixed;opacity:0;visibility:hidden}
#marker{position:absolute;top:100px;width:0;height:0}
.scrollToTop svg{width:34px;height:34px;vertical-align:middle;}
Kemudian di bawah kode <body> silahkan simpan kode berikut untuk target action ScrollToTop.
<div id='totop'/>
Dan terakhir silahkan simpan kode berikut di atas kode </body>
<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;error_page&quot;'>
<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 on="enter:hideAnim.start; exit:showAnim.start"
    layout="nodisplay">
  </amp-position-observer>
</div>
<button id="scrollToTopButton"
  on="tap:totop.scrollTo(duration=200)"
  class="scrollToTop">
<svg viewBox="0 0 24 24">
    <path fill="#fff" d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z" />
</svg>
</button>
</b:if>

Selesai, untuk melihat tampilan Back To Top sobat bisa melihat di halaman Postingan dan Homepage. Semoga tutorial ini sangat bermanfaat bagi sobat dan mohon maaf bila saya jarang update post dikarenakan sedang menyelesaikan Tugas Web saya.
Comment Policy : Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
BERI KOMENTAR