Tutorial

Cara Membuat Efek Scrolling Tombol Back to Top Smooth dengan CSS di Blogger

Untuk download aplikasinya klik di bawah ini!

Tutorial Blogger – Cara membuat efek scrolling back to top smooth dengan css di Blogger. Saat memiliki artikel yang panjang sebelumnya blog auqri.my.id tidak ada tombol back to top, dan jika ingin kembali keatas ya harus scrolling lagi menggunakan mouse yang dimiliki.

Akhirnya akhir-akhir ini blog auqri.my.id update berbagai macam fitur mulai dari tombol back to top, lalu fitur dark mode, menambah section baru di header, dan penambahan fitur Google Translate tanpa harus berpindah halaman. 

Perubahan ini tentu dilakukan berasal dari masukan, kritikan, serta komentar dari pengunjung pada artikel sebelum-sebelumnya. Akhirnya pada minggu ini semuanya bisa terlaksana, nah bagi Anda yang mau membuat fitur seperti ini saya sudah membuatkan beberapa tutorial untuk membuatnya:

Nah pada kesempatan kali ini blog auqri akan berbagi cara membuat fitur efek scrolling smooth di blogger, efek ini akan berpengaruh pada keseluruhan blog tidak hanya tombol back to top saja akan tetapi tombol-tombol yang diberikan link ID pada halaman blog yang diberikan link simbol tanda pagar “#” .

Cara Membuat Efek Scrolling Back to Top Smooth dengan CSS di Blogger

Pada tampilan diatas terlihat saat ditekan tombol back to top halaman tidak langsung menuju keatas, akan tetapi ada efek scrolling keatas dengan smooth atau mulus. Untuk membuat efek seperti ini cukup tambahkan kode css dibawah ini, lalu letakkan diatas ]]></b:skin>

html {
scroll-behavior: smooth;
}

Setelah ditambahkan silahkan simpan template blog Anda, dan lihat hasilnya. Jika kalian belum memiliki tombol back to top, nih saya bagikan milik saya sendiri. Saya membuat ini sendiri menggunakan text dan icon menggunakan svg agar lebih enteng, berikut kode program nya:

Rekomendasi: Cara Membuat Loading Blog Terasa Lebih Cepat dan Enteng

<a class="text-gray-600 transition-colors duration-300 hover:text-deep-purple-accent-400" href="#" title="Back to Top">
Back to Top
<svg class="h-3" fill="currentColor" viewBox="0 0 24 24">
<path d="M23.677 18.52c.914 1.523-.183 3.472-1.967 3.472h-19.414c-1.784 0-2.881-1.949-1.967-3.472l9.709-16.18c.891-1.483 3.041-1.48 3.93 0l9.709 16.18z">
</path>
</svg>
</a>

Jika sudah simpan template blog, dan lihat hasilnya. Semoga bermanfaat. 

Originally posted 2021-10-24 22:03:00.

Related Articles

51 Comments

  1. Asik asiikk, jadi paham nih gimana cara bikin efek scrolling back to the top.
    karena sukaaaa banget ngelihatin efek2 seperti ini di blog teman2 dan penasaran kan jadinyaaaaa

  2. Dulu kuliah IT dan belajar coding sedikit tapi setelah belasan tahun lenyap sebab gak diasah sama sekali (kerjaan juga bukan bidang itu) baca tulisan ini sambil membayangkan jadinya kayak apa. Kangen juga ngecoding lagi haha

  3. Wow, mantap banget nih Mas Andrie berbagi tips bikin scroll back to top-nya cakeeeep 😀 Naruh scroll behavior smooth ternyata mungkiiiin mudah ya tapi aku belum berani utak-atik hahaha 😀 Enak jadi cepet seeettt! ke atas deh heheheh. TFS ya.

  4. Udah lama banget gak utak-atik blog! Rasanya kepengin bikin 1 blog lagi yang bisa jadi sarana belajar alias memperbagus tampilan/layout blog. Pengin aplikasiiin efek yang dijelasin di artikel ini. Siapa tau butuh, ya kaan. Hehehe. Makasih udah sharing, lhooo!

    Btw aku salfok, Kak Andrie tinggal di Belitung, ya? Wuihh kepengin banget traveling ke sana! 😀

    Sintia Astarina
    http://www.sintiaastarina.com

  5. Nice info mas, cuma kebetulan templateku sudah dibekali dengan fitur ini. Memang memudahkan sih apalagi mostly menu navigasi itu ada di bagian atas halaman.

    Ya kalao postingannya 300-500 karakter. Kalau postingan in depth sampe 1500 kata, lalu ga bisa pulang ke atas kan sepet juga jadinya.

  6. wah iya, ini informasi yg menarik
    apalagi template ku juga bisa dgn fitur ini
    tapi kok aku baru tahu caranya, haha
    gpp lah, lebih baik terlambat tahu daripada g tahu apa apa

  7. Waaah baru tau ni caranya, tapi kalo praktekin sendiri kayaknya belom bisa deh. Untuk nulis dan posting aja masih kagok di blogger karena sebelumnya biasa nulis dan posting di wordpress. Tp makasih sharingnya, mas.

  8. Nah ini nih. Kadang kan ada tuh tulisan yang panjang tapi menarik banget. Terus sampai pertengahan kita pingin baca bagian awal lagi buat menyinkronkan keterangannya. Agak ribet kalau mesti scroll up gitu. Kalau ada tombolnya back to top kan lebih nyaman gitu. Hehehe

  9. Iyaa kalau artikel yang panjang fitur ini bermanfaat banget, daripada harus scroll terus berkali-kali.. Masih mending kalau menggunakan mousce, lah ini cuma pake touchpad di laptop aja..