Tombol Back To Top Pure CSS
Tombol back to top seperti dari namanya berfungsi untuk kembali ke atas dengan sekali klik, jadi jika kalian memiliki postingan yang panjang, pengunjung tidak perlu repot untuk kembali ke atas postingan.
Biasanya fitur ini menggunakan JavaScript, tapi di artikel ini saya ingin membagikan cara yang hanya menggunakan CSS saja, emang bisa ? tentu. baca tutorial dibawah ini.
Tutorial Tombol Back To Top CSS
- Pertama, login ke akun blogger kalian.
- Lalu, masuk ke menu tema dan klik edit html.
- dan cari kode ]]></b:skin> dan taruh kode berikut diatasnya.
/* Back to Top CSS */
html {scroll-behavior:smooth;}
.infoToTop {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;}
.infoToTop: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;}- Setelah itu masukkan kode dibawah ini di atas </body>.
<a href="#" class="infoToTop"></a>- Terakhir, simpan tema kalian dan lihat hasilnya.
Akhir Kata
Itu saja tutorial untuk membuat tombol back to top CSS, jika kalian memiliki saran, silahkan komentar dibawah, terimakasih.