Daftar Isi [ Tampilkan ]

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. 

  1. Wah mantap kang, cuma dengan naroh kode Scroll behavior smooth di b:skin saja bisa beda dengan back to top biasa ya.

    ReplyDelete
    Replies
    1. Iyaa mas, jadi lebih smooth dan enak dilihat

      Delete
  2. 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

    ReplyDelete
    Replies
    1. Selamat mencoba, jika ada kendala bisa hubungi saya nanti saya bantu

      Delete
  3. 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

    ReplyDelete
    Replies
    1. hhi memang kadang seperti itu, walaupun kuliah IT gak harus di IT juga kerjanya, ilmunya bisa dikolaborasikan dengan hal lain..

      Delete
  4. Wah saya pakai wp kak kurang paham ttg blogpost hehehe tapi next time mau coba bikin blogpost ahh

    ReplyDelete
    Replies
    1. Wahh next time kalau pake blogger mungkin bisa bermanfaat, bookmark aja dlu artikel ini..

      Delete
  5. Hmm perlu nih, bagi yang mau utak atik CSS agar bisa sesuai keinginan utk kustomisasi web masing2ya.

    ReplyDelete
  6. Mantap nihh.. bermanfaat banget buat aku sebagai blogger pemula. Makasih kak infonyaa

    ReplyDelete
  7. 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! :D


    Sintia Astarina
    www.sintiaastarina.com

    ReplyDelete
    Replies
    1. Sama-sama, semoga bisa memberikan manfaat yaaa.. Iya nih ak di Belitung, kalau ke Belitung jangan lupa kabar-kabar yaaa hhe

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

    ReplyDelete
    Replies
    1. Jika memang ingin ditambahkan ke blog nanti saya bantu juga gapapa

      Delete
  9. Mantap. sudah lama saya gak ngotak ngatik template blog. hahaha. jd termotivasi juga bikin bikin tutorial blog gini yak.. thanks ya

    ReplyDelete
    Replies
    1. Dicoba aja dlu, ingat tagline di header blog ini hhe

      Delete
  10. Blogku kayaknya ngga punya fitur ini padahal memudahkan banget ya untuk pengunjung kita izin kopas yaaa makasih banyak

    ReplyDelete
    Replies
    1. Iyaa biar lebih enak aja dilihat kalau misalnya ingin menambahkan tombol back to top. Nanti saat di klik akan memberikan efek scroll keatas gitu..

      Delete
  11. Aku sudah pernah baca tutorial scrolling back to top buat WP, nah ini yang kucari, untuk blogger. Yeayy, makasih Kak, nanti kucoba

    ReplyDelete
  12. caakep nih Kak, kalau ada tombol scrolling back to top itu asyik, tinggal klik tombolnya aja gak perlu repot scrolling segala :D

    ReplyDelete
    Replies
    1. Betul banget, apalagi kalau artikel yang dimiliki panjang bangett

      Delete
  13. wah thank you infonya ya, bermanfaat banget nih biar scrolling jadi lebih smooth

    ReplyDelete
  14. auto kasi link ke temen yg pake blogger untuk nge blog. nuhun mas!

    ReplyDelete
  15. 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.

    ReplyDelete
    Replies
    1. 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..

      Delete
  16. 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.

    ReplyDelete
    Replies
    1. Boleh saya bantu, jika memang mengalami kesulitan..

      Delete
  17. Assiyap. Bakal belajar lagi nih bahasa pemograman CSS.
    Kalo dah mulai pusing, tinggal contek plek ketiplek tutorialnya mas Andri. Berangkaattt

    ReplyDelete
    Replies
    1. Biar tampilannya makin oke dan sesuai keinginan belajar pemograman penting banget nih, sekalian cara optimasinya..

      Delete
  18. 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

    ReplyDelete
    Replies
    1. Semoga berhasil ya, jika ada kendala bisa menghubungi saya

      Delete
  19. Bisa dicoba nih. Tapi aku suka bingung kalau masuk-masukin kode html gitu. Hahaha, seringnya jadi eror. Huhuhu, sedih.

    ReplyDelete
    Replies
    1. Lihat panduannya saja, jika kesulitan bisa saya bantu

      Delete
  20. 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

    ReplyDelete
    Replies
    1. Wah kalau pake back to top jadi kelewatan, harus dikira-kira biar pas sama bacaan yang ingin dibaca..

      Delete
  21. Baru tau caranya 😱, saya kira harus punya template tertentu untuk bisa scroll kayak gini. Membantu banget untuk yang punya artikel panjang-panjang. Ternyata bisa pake kode ya, terima kasih banyak. Nanti saya coba deh.

    ReplyDelete
    Replies
    1. Hha tidak juga, yang penting sekreatif aja dan bisa membuatnya

      Delete
  22. Wah, keren nih mas. Mau aku coba terapin di blog aku nih. Semoga bisa makin kece ntar

    ReplyDelete
    Replies
    1. semoga berhasil, dan semoga bermanfaat.

      Delete
  23. Ada yang kurang di artikelnya: import Tailwind.

    ReplyDelete
  24. blog ku juga gitu mas. harus scrolling.
    boleh juga nih aku ikutin tutorialnyaa..

    ReplyDelete
  25. Ooo ternyata bisa ya dibikin efek smooth saat scrolling. Iya nih punyaku langsung jebret naik ke atas. Boleh juga nih kapan2 cobain utak-atik html utk bikin efek ini. Thks ya.

    ReplyDelete
  26. nah tips tips seperti ini lho yang aku udah lama ga lakukan pas oprek-oprek blog, jadi mau coba lagi deh

    ReplyDelete

Post a Comment