Fitur Back To Top/Scroll To Top, seperti yang telah dijelaskan dalam Cara Membuat Fitur/Tombol Back To Top di Blogger (V1), adalah fitur navigasi blog yang berfungsi sebagai shortcut agar pengunjung bisa kembali ke bagian atas halaman blog dengan cepat dan hanya dalam satu klik.
Tombol back to Top Blogspot kali ini berjenis melayang (floating) dan berada di bagian pojok kanan bawah. Kodenya pun sedehana dan tidak menggunakan javascript/jquery sehingga waktu muatnya lebih pendek. Script ini dibuat berdasarkan perintah link yang mengacu ke wrapper (#) dengan ditambah aturan CSS position-styling. Easy.
Cara Memasang Back to Top Blogger/Blogspot V2:
1. Copy kode berikut:
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Scroll/Back to Top"><img src="url gambar back to top blog" /></a>
Anda dapat mengganti title Scroll/Back to Top dengan kata-kata yang diinginkan. Ganti url gambar back to top blog dengan gambar back to top anda, atau copy salah satu dari beberapa gambar "Back To Top" di posting tips-tricks blogger sebelumnya: Cara Membuat Fitur/Tombol Back To Top di Blogger (V1), atau bisa juga googling dengan keyword "back to top button image". Edit ukurannya sesuai dengan besar yang diinginkan, lalu upload. Masukkan url gambar yang telah diupload ke dalam script.
2. Buka dashboard > Layout/Rancangan > Klik Add a/Tambah Gadget > Pilih opsi HTML/Javascript
3. Paste/letakkan kode tersebut, lalu save.
Posisi gadget dimanapun tidak masalah karena letak tombol tersebut fixed (tetap), yang menjadikannya melayang.
4. Done!
Have Fun with your Back to Top Button!
Update: mau tombol tombol kembali ke atas dengan efek fading dan smooth berbasis javascript yang super keren? Simak Back/Scroll to To Top dengan Jquery
© buka-rahasia.blogspot.com
KAlau kodenya di simpan pada sidebar, mungkin akan sedikit mengurangi pemandangan sidebar blog denganadanya widget yg terlihat kosong. Saya lebih suka menyimpan kodenya pada kode html template blog.Nice info...
ReplyDeleteoh tidak bro, sifatnya invisible atau tidak menempel di dinding halaman, karena mengacu ke wrapper terluar. jadi dia tidak memiliki space di ruangan halaman yang nampak. kalo ada space, itu karena diakses oleh si pemilik blog yang sudah login, jadi ada semacam link shortcut ke edit widget,itupun cuma space kecil. sedangkan kalo dari pengunjung tidak. ya, bisa dimasukkan juga lewat edit html di atas tag penutup body, /body. thanks for visiting. :D
ReplyDeleteterimakasih tas infonya
ReplyDeletehttp://www.inimun.co.cc
http://www.inibook.blogspot.com
terima kasih ,,,
ReplyDeletesudah mengajarkan saya membuat back to top ...
jangan lupa kunjangi juga blog sederhana saya ,,,
http://blog-kitta.blogspot.com
:)
Terimakasih infonya. Walaupun blog saya wordpress tetapi tetap bisa.
ReplyDeletesip bro... ya karena itu cuma HTML, jadi untuk blog wordpress.com (yang widgetnya ga support javascript) tetap bisa.
ReplyDeletemantabs om.. sukses buatnya..
ReplyDeletelumayan buat memenuhin tampilan..hehehe
makasih om..
ow ya om gmn ni buat ganti font judul postingan.. dri kmrin2 gak dpt pencerahan ni..mungkin dapat pencerahan di sini..
halo, bro.... kebetulan mau posting itu juga, agak panjang sih. tar sore yah aku posting soal ganti2 font, ga enak bikin posting di kantor, haha. lengkap sekalian, beberapa, jadi ga cuma font judul posting aja :D sabar yak
ReplyDeletemasyaallah...thx bro! copas nih...
ReplyDeleteTerima kasih Infonya bermanfaat sangat
ReplyDeleteterima kasih info nya gan salam kenal .....!!!
ReplyDeleteTk'y infonya Bos
ReplyDeletethanks bangets nih gan,,, udah bisa
ReplyDeletemakasih bro infonya.. nice tips by the way.. :)
ReplyDeleteoke masbro sepp :D
ReplyDeletesaya praktekin bagus gan., tapi sy oprek lagi di ilangin gambarnya., lihat contohnya di : djawadreang.com
ReplyDeletemakasih infonya., :D
thank gan scripnya sudah berhasil saya pasang di blog saya..
ReplyDeletethank you... its work on my blog
ReplyDeletecek it !
http://encrypted-scramble.blogspot.com/
blogwalking, visit me back please :)
ReplyDeleteThankz infonya ya ??
ReplyDeleteTerimakasih ya infonya. Ijin pasang Bro. salam kenal.
ReplyDeletewah baus juga nih gan caranya mau coba dulu gan/....!
ReplyDeleteKereen, saya sudah menerapkannya & sukses.
ReplyDeleteBtw, langsung saja saya mohon ijinnya untuk menayangkan artikel ini di blog saya.
Jazaakumullah bi Khoiril Jazaa...
Mantaaaaap......
ReplyDeleteizin pake ya mas.., syukran *smile
ReplyDeletethanks tutorialnya gan, udah saya di pakai di blogQ
ReplyDeleteBY : http://zulhairi88.blogspot.com/
ijin pakai ^^
ReplyDeletemas kok tiap ane klik tuh tombol di blog ane, alamat blog ane jadi ada tambahan tanda pagar ya? normal ga tuh? makasih ane msh newbie soalnya mas :)
ReplyDeleteitu wajar, itu menunjukkan fungsinya untuk kembali ke bagian wrapper terluar yg ditandai dengan #
ReplyDeleteKeren-keren boss, artikelnya........
ReplyDelete(www.wantec.co.cc)
gan, klo punya agan masih di atas kan g ada, muncul pas mulai scrol ke bawah. itu gimana y gan? *mauuuuu
ReplyDeletenice share
ReplyDeletetrik ini dh aku coba ubah tapi kok masih belum bisa kaya punya ente bang?
sekali scroll langsung sampe ke atas ga pelan-pelan kaya punya ente?
mohon pencerahan :)
Thanks kang udah di praktekin nih
ReplyDeletemas gimana caranya supaya jadi agak lambat waktu back to topnya mas dan icon back to topnya cuma muncul pada saat ada di bagian bawah blog mohon pencerhannya mas
ReplyDeletetombol down ny ada om ?
ReplyDeletemanteppp gan info'y , makasih bnyak nih ...
ReplyDeletejngan lupa kunjungan balik ya ..
http://ojezzlastfriend.blogspot.com/
Afwan sob, saya mau tanya.
ReplyDeleteSetelah saya perhatikan, kok punya saya beda ya dengan punya sobat. Kalau punya sobat, setelah sampai atas menghilang secara perlahan (keren euy). Sedangkan punya saya kok tidak ya?
Mohon pencerahannya sob...
halo mas, itu saya pake jquery. besok2 akan saya posting scriptnya.
ReplyDeletekok nggak ada gambarnya sob..?sertakan gambarnya sekalian aja sob...
ReplyDeleteterima kasih atas artikelnya
ReplyDeletematep gan, thanks langsung praktek
ReplyDeleteyang suka anime mampir mari 90animax
ngga nongol kang, pake "tambah HTML.Jawvascript mah euy.
ReplyDeletenuhun sudah dapet ilmu dan pengalamn disini
salam kenal, mau tanya, kog waktu halaman blog saya ada diatas, gambar back to top nya tetap g bisa ilang kaya di web agan ya? udah saya coba pake opera malah muncul javascriptnya, kalo pake firefox tetap muncul terus gan. tolong yah solusinya..
ReplyDeletekunjungi blog baru saya ya di http://langitdesember.blogspot.com . terimakasih..
Wah, Simpel banget kodenya Gan :D
ReplyDeleteThanks ya...
Mantap sob.. udah ane coba..
ReplyDeletekeren banget blognya...
ReplyDeletekok gak work ya di blog saya, bdw nice info deh :D
ReplyDeletenuwun infone mas, tak gawene sikik. hehe
ReplyDeletesalam kenal.
terimakasih mas .. tipsnya berguna.. udah saya coba dan sudah berhasil :)
ReplyDeletegan, gimana caranya agar background gambarnya bisa transparan??
ReplyDeletewisnuwidhiw.blogspot.com
terima kasih sdh share bro
ReplyDelete@buka rahasia
ReplyDeletesaya sudah pasang tapi kok beda dengan punyanya sampeyan, tolong dong kode scriptnya di share lewat coment jg gpp biar bisa smoth scroll kaya punya sampean gimana scriptnya? apa saya harus cari tutorial dari blog lain.. nanti sya kasih cendol gan itung2 nambah penghasilan sesama bloger terimakasih
assalamualaikum
ReplyDeletekalo saya boleh minta tolong tolong share script back to top seperti punya abang, tombol backtotopnya keluar hanya pas scroll di bawah, sedangkan pas scroll di atas tombol backtotop hilang
terima kasih banyak atar ilmunya semoga mas bisa mendapatkan berkah
udh bisa gan cukup membantuk,, tapi tadi ada yang saya tambahin utk ukuran gambar dan penempatan posisinya..
ReplyDelete