✪ Cara Membuat Tombol Button Kembali ke Atas Dengan CSS

Untuk anda Yang Baru Belajar desaign Blogger ,tombol Button ini sangat Penting Bagi blog anda karna akan memudahkan pengunjung untuk lebih mudah berselancar di halaman blog anda, tapi ini tidak ada dalam bawaan themplate bloger, jadi kita harus memasangnya secara manual,


CSS Murni Scroll Back To Top Button Tanpa JavaScript


tips pemasangan kali ini saya memakai kode CSS Murni, jadi lebih seo freanly buat blog kalian, dan untuk buttonnya sendiri tampilanya menarik dan juga responsive di semua perangkat bowser /device, langsung aja yuk gues! kita praktekin, pahami step by step ya gues biar nggak ada kesalahan dan membuat template anda eror.


-seperti biasa buka halaman html dan edit kode nya,untuk mencari kode tekan control+F Biar cepat dalam pencarian kode yang akan kita tambahin kodenya.
-kemudian cari kode berikut ]]></b:skin> Kemudian copy code di bawah ini taruh di atas /sebelum kode tadi, perhatikan gambar biar nggak bingung.

.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;
  }
} 
back button pada blogger

-kemudian setelah itu cari kode </body> Dan copy kode di bawah ini sebelum kodenya,perhatikan gambar juga, Dan SAVE! Lihat Hasilnya

<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 memasang tombol back button pada blog

source :w3schools

Info Terkait !!