Cara Membuat Tombol Back To Top Smooth Dengan CSS di Blog

WANHEART NET - Cara Membuat Tombol Back To Top Smooth Dengan CSS di Blog. Cara pasang tombol back to top dengan HTML dan CSS yang lebih Ringan dan Responsive. Tips memasang tombol back to top di blogger. Tombol Back to Top adalah tombol yang membantu para pembaca ketika sudah mencapai bawah page kemudian ingin kembali ke atas, maka hanya menekan tombol ini, maka pembaca akan kembali ke atas halaman. Walaupun terlihat sepele, namun banyak website yang menerapkan tombol ini.

Kali ini admin akan memberikan cara membuat tombol back to top dengan CSS dan HTML di blogger yang ringan dan smooth. Berbeda dari yang lain, untuk tombol back to top ini kita akan menggunakan CSS yang dijamin tidak akan memberatkan website anda. Jika biasanya tombol back to top dibuat dengan javascript dan Jquery yang lumayan berat, maka kita akan gunakan CSS agar lebih Ringan.

Kita akan menggunakan salah satu properti css yaitu scroll-behavior, properti ini melakukan tindakan bergulir (scroll) secara harus, berbeda dari sebelumnya jika kita tidak menggunakan properti ini maka halaman langsung melompat keatas tanpa ada perilaku scroll, namun jika kita menggunakan properti ini, maka kita akan melihat efek scroll ketika menuju ke halaman atas.

properti scroll-behavior mempunyai 2 value yaitu auto (default) dan smooth. Berikut penjelasannya.

1. Auto (default)

Value auto akan memberikan efek lompatan yang kasar, seperti teleport. Jadi walau terbilang cepat untuk menuju halaman atas, namun efek smooth tidak terlihat.

2. Smooth

Value smooth akan memberikan efek scroll atau bergulir ke atas secara halus, sesuai namanya smooth value ini cocok untuk dipasang di website anda.

Cara Buat Tombol Back To Top Smooth dengan CSS di Blogger

Oke, langsung saja berikut ini adalah Cara Buat Tombol Back To Top dengan CSS di Blogger Mudah dan Cepat.

1. Silakan masuk ke dashboard blogger.
2. Pilih menu TEMA, klik PANAH KECIL di samping tombol Sesuaikan.
3. Pilih EDIT HTML.
4. Masukan kode CSS berikut di atas ]]></b:skin> atau </style>

/* Back to Top Pure CSS by igniel */
html {scroll-behavior:smooth;}
.toTop {width:50px; height:50px; position:fixed; bottom:50px; right: 50px; z-index:99; cursor:pointer; border-radius:100px; transition:all .5s; background:#008c5f url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z' fill='%23fff'/%3E%3C/svg%3E") no-repeat center center;}
.toTop:hover {background:#1d2129 url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z' fill='%23fff'/%3E%3C/svg%3E") no-repeat center center;}

5. Masukan kode HTML berikut di atas </body>

<a href="#" class="toTop"></a>

6. Kemudian Save.

Jika sudah anda bisa langsung mencobanya, mungkin itu Cara Buat Tombol Back To Top dengan CSS di Blogger Mudah dan Cepat. Kurang lebihnya saya minta maaf, terima kasih.

sumber: igniel.com