Skip to main content
Ivhaa Design

follow us

Cara Memasang Show Hide Scroll To Top Pada Blog AMP

Cara Memasang Show Hide Scroll To Top Pada Blog AMP

Baca juga:



Tombol Back To Top ini sangat penting banget buat karena agar pengunjung bisa kembali ke atas dengan adanya fitur ini. Beberapa yang lalu kompi ajaib sudah membuat tutorial tersebut sekarang juga sudah saya terapkan di blog saya ini.

Nah untuk demonya seperti apa kalian bisa lihat blog saya ini karena sudah saya coba.

Buat yang ingin menggunakan tutorial ini simak artikel kali ini sampai akhir ya sobat Blogger.

Silahkan kalian simpan Kode JS ini tepat di atas kode </head>. Jika kode tersebut sudah ada maka lewati aja.
<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 simpan CSS berikut di 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:#FF1744;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;}

Untuk warnanya sesuaikan dengan selera kalian .

Setelah itu kalian cari kode<body> letatakan kode berikut ini dibawah ini ko<div id='totop'/>. Jika tidak ada cari aja yang mirip seperti ini <body. . . . . .>.

Langka terakhir tinggal masukan kode berikut ini di atas</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>

Gimana gampang kan selamat mencoba.

You Might Also Like:

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