Buka Rahasia Blogspot: Cara Membuat Fitur/Tombol Back To Top di Blogger-Blogspot

Back to Top Button atau Tombol Kembali ke Atas adalah fitur blog yang mempermudah pengunjung/visitor blog kembali ke bagian atas halaman dengan sekali klik tanpa melakukan mouse scrolling. Efeknya sangat besar sekali terutama bagi blog yang memiliki halaman panjang. Letak dari tombol fitur back to top kali ini ada di bagian footer sebelah kanan.

Cara menambahkan fitur 'Back To Top' untuk Blogger-Blogspot:

1. Masuk ke edit HTML.

2. Cari kode tag </body> (Ctrl+F)

3. Masukkan kode berikut di atas </body>:

<a href='#' style='position: fixed; right: 15px; bottom: 15px; outline: medium none; border: 0px none;' title='Back to Top'><img alt='Back to Top' border='0'src='alamat url gambar Back to Top-mu'/></a>

Ganti title Back to Top dengan kata-kata yang disuka, misalnya 'return to top', 'kembali ke atas', 'balik ke atas', 'meluncur ke atas', 'balikan nyook', atau 'kembali ke laptop'... terserahlah, suka-suka elo... ^_^ Fungsinya untuk notifikasi ke pengunjung tentang kegunaan tombol tersebut.

Alt Back to TOP lebih baik ditinggalkan begitu saja kalo-kalo gambar gagal dimuat browser jadi tulisan itu masih nongol sebagai pengganti.

Gunakan gambar berikut, klik kanan copy (save as), trus upload dan host sendiri ya gambarnya, biar gak lelet and pengunjung gak melet-melet!

Atau Googling (cari juga di photobucket.com) gambar 'back to top/kembali ke atas' sendiri yang lebih keren dan sesuai dengan warna dan ukuran footer blog-mu, gunakan keyword "back to top button image", kemudian upload dan host gambar itu.

Ambil/copy direct link gambar dan ganti alamat url gambar Back to Top-mu dengan alamat url/link tersebut. Contoh:

<a href='#' style='position: fixed; right: 15px; bottom: 15px; outline: medium none; border: 0px none;' title='Back to Top'><img alt='Back to Top' border='0'src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE3eankNwFfev71wgRClL7xeXmVm75-t6MPLBbVhcMf6G3QuVcs0p5dsksZT538tPbpYEVRPv9x-pKOEnHGom29acpraKHBJHaCbLjAqH7KrBggmOloh6q1XBgd5eq-baa87sBc65akP-9/s1600/bttp-4.png'/></a>

Oke, udah? Belum? Buruan lah!

4. Kalau sudah dimasukkan semuanya dan pastikan tidak ada yang terlewat, save template HTML-nya.

5. Done! Fitur/Button Back To Top siap digunakan.

23 comments:

HorierMonday, 25 April, 2011
oke deh sob, dicoba nih ^^
AnonymousSaturday, 05 November, 2011
ko aku cobain klik gambar yg di pojok kanan bawah blog ini untuk kembali ke top nya gx bisa???
di benerin lg om.. klo dah bisa baru saya sedooot. :D
UnknownSaturday, 05 November, 2011
sudah. thanks sudah mengingatkan. itu karena Blogger selalu mengubah menjadi default link ketika "#" di preview di rich text.
Puji hardiyanti hastutiThursday, 08 December, 2011
Thanks admin :) Join in my blog http://www.pujielectrontik.blogspot.com/
trik bloggerThursday, 08 December, 2011
wah tidah bisa malah muncul : Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
Pesan error XML: Element type "img" must be followed by either attribute specifications, ">" or "/>".
SunggyuWednesday, 28 December, 2011
thanx ya..kerana kamu telah tunjuk ajr untuk kta semua...so sy ada bertanyaan...
bagaimana cara meletakkan Diary di blog????
Computer TriksFriday, 30 December, 2011
keren gan info nya :)
Alfian Dwi AntonoThursday, 05 January, 2012
Keren gan infonya ..
Langsung saya coba :-)

Mampir di blog saya juga ya :

fianblog
gusseWednesday, 18 January, 2012
sudah saya masukkan semuanya dan saya pastikan tidak ada yang terlewat. masih belum bisa tuh.

Harap perbaiki kesalahan di bawah, dan kirimkan template Anda lagi.
Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
Pesan error XML: Element type "img" must be followed by either attribute specifications, ">" or "/>".
royansablengSaturday, 21 January, 2012
kalo diletakkan diwah footer gmana gan..pake tulisan???
Cokers CodriSunday, 05 February, 2012
Harap perbaiki kesalahan di bawah, dan kirimkan template Anda lagi.
Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
Pesan error XML: Element type "img" must be followed by either attribute specifications, ">" or "/>".

Gak bisa mas, mohon pencerahannya.. :)
Blognya ReggyWednesday, 08 February, 2012
izin mencoba mas azmee :)
ChooelikNFSunday, 19 February, 2012
trims min
UnknownFriday, 24 February, 2012
saya tambahkan saja penjelasannya... yang '0' dengan src=' harus pake spasi... semoga berhasil ya...
UnknownMonday, 05 March, 2012
mas ijin gunakan gambar back to top nya mas, saya mohon, dan bagus sekali postingannya
antifieldWednesday, 28 March, 2012
wah, berhasil mas,, sudah saya terapkan di blog saya, tapi gimana caranya biar ada pergerakan animasi keatasnya ya? soalnya yg ini langsung tiba2 keatas.
blog saya http://www.antifield.com
UnknownThursday, 29 March, 2012
halo. yang animatif itu pasti menggunakan jquery. kapan2 akan saya share membuat back to top dengan jquery.
rico ade mandanaSaturday, 04 August, 2012
sudah saya terapkan di blog saya kak..makasi atas tutorialnya..
sukses selalu buat anda
GunayaSunday, 19 August, 2012
thank you gan !
ane copy ya url 'back to top' punya agan !
hehehehehhehehe ........
PIRA CHIBI 91Thursday, 04 October, 2012
tidak bisa :( katanya diending 'img' harus diikuti dengan > atau /> nah, aku kan pakai tanda /> , malah bukan gambar malah jadi link gitu :(
UnknownSunday, 07 April, 2013
malah bukan gambar malah jadi link gitu :(
MifthaFaridz BlogSaturday, 20 April, 2013
thanks admin, sangat bermanfaar :)
Pondok LengkapMonday, 29 September, 2014
info keren gan ...

Silahkan tinggalkan komentar untuk respon/pertanyaan. Jika ingin menuliskan kode di dalam komentar, convert dulu dengan HTML Encoder. Centang "Notify me" untuk mengetahui balasannya. Maaf apabila komentar dibalas dalam waktu lama atau tidak terbalas karena saya tidak online setiap hari. Atau biar lebih cepat dan enakan bisa kontak lewat Facebook. KOMENTAR BERISI LINK & tidak sesuai dengan Comment Policy akan langsung dihapus.Karena banyaknya spam, komentar sekarang di-moderasi sebelum diterbitkan. Thanks.