Selamat datang di website www.imamkunblog.com - Tempat Sharing Tips Trik Android, Komputer, Internet dll

Cara Membuat Tombol Scroll Back Top Tanpa JavaScript

Cara Membuat Tombol Scroll Back Top Tanpa JavaScript
Cara Membuat Tombol Scroll Back Top Tanpa JavaScript - Kali ini saya ingin membagikan kepada sobat Cara Membuat Tombol Scroll Back To TOP Untuk Blogger. Dengan memasang tombol ini maka akan mempermudah para pengunjung untuk kembali ke halaman atas blog.

Tombol TOP ke atas juga merupakan salah satu pengaruh bagusnya suatu blog, dan back to top juga merupakah salah satu SEO tidak langsung yang menjadikan blog semakin SEO Friendly dan disukai oleh Google karena memiliki pengarahan atau navigasi yang baik.


Jikak di template blog sobat belum ada tombol bak to top, maka saya sarankan sobat untuk memasangnya diblog sobat supaya blog sobat semakin baik dan bagus dan dapat mempermudah visitor sobat untuk kembali ke atas halaman sobat tanpa harus mengscroll secara manual.

Untuk pemasangan atau penerapannya pada theme blog sangatlah mudah hanya dengan melakukan peneditan HTML di theme blog sobat saja. Oia disini saya membagikan tanpa JavaScript dan Menggunakan JavaScript jadi tinggal sobat pilih sendiri mau menggunakan yang mana.

Cara Membuat Tombol Scroll Back Top Tanpa JavaScript

1. Pertama sobat Login ke Blogger
2. Pilih Template/Theme pada dasboard blogger sobat dan klik Edit HTML
3. Kemudian cari kode ]]></b:skin> (Gunakan CTRL+F untuk mempermudah pencarian)
4. Jika sudah ketemu kodenya maka selanjutnya sobat copy dan pastekan kode dibawah ini tepat diatas kode ]]></b:skin>

.scrolltop-wrap {
  box-sizing: border-box;
  position: absolute;
  top: 12rem;
  right: 2rem;
  bottom: 0;
  pointer-events: none;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.scrolltop-wrap #scrolltop-bg {
  fill: #007bff;
}
.scrolltop-wrap #scrolltop-arrow {
  fill: white;
}
.scrolltop-wrap a:hover #scrolltop-bg {
  fill: #2990ff;
}
.scrolltop-wrap a:hover #scrolltop-arrow {
  fill: white;
}
@supports (-moz-appearance: meterbar) {
.scrolltop-wrap {
    clip: rect(0, 3rem, auto, 0);
  }
}
.scrolltop-wrap a {
  position: fixed;
  position: -webkit-sticky;
  position: sticky;
  top: -5rem;
  width: 3rem;
  height: 3rem;
  margin-bottom: -5rem;
  -webkit-transform: translateY(100vh);
          transform: translateY(100vh);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  display: inline-block;
  text-decoration: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  pointer-events: all;
  outline: none;
  overflow: hidden;
}
.scrolltop-wrap a svg {
  display: block;
  border-radius: 50%;
  width: 100%;
  height: 100%;
}
.scrolltop-wrap a svg path {
  transition: all 0.1s;
}
.scrolltop-wrap a #scrolltop-arrow {
  -webkit-transform: scale(0.66);
          transform: scale(0.66);
  -webkit-transform-origin: center;
          transform-origin: center;
}
@media print {
  .scrolltop-wrap {
    display: none !important;
  }
Kemudian langkah ke-dua adalah cari lagi kode </body> dan letakkan kode dibawah ini tepat diatas kode </body>
<div class="scrolltop-wrap">
    <a href="#" role="button" aria-label="Scroll to top">
        <svg viewBox="0 0 48 48" width="48" height="48px" xmlns="http://www.w3.org/2000/svg">
          <path id="scrolltop-bg" d="M0 0h48v48h-48z"></path>
            <path id="scrolltop-arrow" d="M14.83 30.83l9.17-9.17 9.17 9.17 2.83-2.83-12-12-12 12z"></path>
        </svg>
    </a>
  </div>

Cara Membuat Tombol Scroll Back Top Dengan JavaScript

1. Cari kode ]]></b:skin> dan letakkan kode dibawah ini tepat diatas kode ]]></b:skin>
#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}
#myBtn:hover {
  background-color: #555;
}
2. Dan cari lago kode </body> dan letakkan kode dibawah ini tepat diatas kode </body>
<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
<script>
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    document.getElementById("myBtn").style.display = "block";
  } else {
    document.getElementById("myBtn").style.display = "none";
  }
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
}</script>
Demikianlah Cara Membuat Tombol Scroll Back Top di Blogger. Untuk DEMO nya sobat bisa melihat pada theme blog saya saat ini yang saya gunakan, seperti itulah demonya! Oke semoga bermanfaat ya!!

Sumber Referensi: codepen

Happy Blogging!!
Show comments
Hide comments

0 Response to "Cara Membuat Tombol Scroll Back Top Tanpa JavaScript"

Post a Comment

Berkomentar dengan Baik dan Jangan Buat Spam
1. Tidak semua pertanyaan sempat atau bisa dijawab.
3. Bagi yang mau tanya, sebelum bertanya, silakan cari dulu di Kotak Pencarian di Sidebar.
Thanks for visiting and the comment :)

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Adblock Detected

Like this blog? Keep us running by whitelisting this blog in your ad blocker

This is how to whitelisting this blog in your ad blocker

Thank you

×