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:
- Cara Membuat Fitur Google Translate seperti Blog auqri.my.id
- Cara Membuat Fitur Dark Mode di Blogger
- Cara Membuat Fitur Efek Scrolling Smooth di Blogger
- Cara Membuat Section Header seperti Blog auqri.my.id (soon)
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 “#” .
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.
Wah mantap kang, cuma dengan naroh kode Scroll behavior smooth di b:skin saja bisa beda dengan back to top biasa ya.
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
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
Hmm perlu nih, bagi yang mau utak atik CSS agar bisa sesuai keinginan utk kustomisasi web masing2ya.
auto kasi link ke temen yg pake blogger untuk nge blog. nuhun mas!
wah thank you infonya ya, bermanfaat banget nih biar scrolling jadi lebih smooth
caakep nih Kak, kalau ada tombol scrolling back to top itu asyik, tinggal klik tombolnya aja gak perlu repot scrolling segala 😀
Aku sudah pernah baca tutorial scrolling back to top buat WP, nah ini yang kucari, untuk blogger. Yeayy, makasih Kak, nanti kucoba
Blogku kayaknya ngga punya fitur ini padahal memudahkan banget ya untuk pengunjung kita izin kopas yaaa makasih banyak
Mantap. sudah lama saya gak ngotak ngatik template blog. hahaha. jd termotivasi juga bikin bikin tutorial blog gini yak.. thanks ya
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.
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
Mantap nihh.. bermanfaat banget buat aku sebagai blogger pemula. Makasih kak infonyaa
Wah saya pakai wp kak kurang paham ttg blogpost hehehe tapi next time mau coba bikin blogpost ahh
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.
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
Assiyap. Bakal belajar lagi nih bahasa pemograman CSS.
Kalo dah mulai pusing, tinggal contek plek ketiplek tutorialnya mas Andri. Berangkaattt
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.
Bisa dicoba nih. Tapi aku suka bingung kalau masuk-masukin kode html gitu. Hahaha, seringnya jadi eror. Huhuhu, sedih.
Wah, keren nih mas. Mau aku coba terapin di blog aku nih. Semoga bisa makin kece ntar
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
Iyaa mas, jadi lebih smooth dan enak dilihat
Selamat mencoba, jika ada kendala bisa hubungi saya nanti saya bantu
hhi memang kadang seperti itu, walaupun kuliah IT gak harus di IT juga kerjanya, ilmunya bisa dikolaborasikan dengan hal lain..
Semoga bermanfaat
Sama-sama, semoga bisa memberikan manfaat yaaa.. Iya nih ak di Belitung, kalau ke Belitung jangan lupa kabar-kabar yaaa hhe
Jika memang ingin ditambahkan ke blog nanti saya bantu juga gapapa
Dicoba aja dlu, ingat tagline di header blog ini hhe
Iyaa biar lebih enak aja dilihat kalau misalnya ingin menambahkan tombol back to top. Nanti saat di klik akan memberikan efek scroll keatas gitu..
Semoga bermanfaat
Betul banget, apalagi kalau artikel yang dimiliki panjang bangett
Wahh next time kalau pake blogger mungkin bisa bermanfaat, bookmark aja dlu artikel ini..
Selamat mencobaa
Sama-sama, semoga bermanfaat
Sama-sama, semoga bermanfaat yaaa..
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..
Boleh saya bantu, jika memang mengalami kesulitan..
Biar tampilannya makin oke dan sesuai keinginan belajar pemograman penting banget nih, sekalian cara optimasinya..
Semoga berhasil ya, jika ada kendala bisa menghubungi saya
Lihat panduannya saja, jika kesulitan bisa saya bantu
Wah kalau pake back to top jadi kelewatan, harus dikira-kira biar pas sama bacaan yang ingin dibaca..
Hha tidak juga, yang penting sekreatif aja dan bisa membuatnya
semoga berhasil, dan semoga bermanfaat.
Ada yang kurang di artikelnya: import Tailwind.
Oiyaa..