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

 membuat tombol/fitur back to top/kembali ke atas 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='http://4.bp.blogspot.com/-1nZ4LliLzoQ/TaPbb2zX10I/AAAAAAAAAaw/MuAwSt41YAQ/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.
google

Catatan:
Jika anda menemui tutorial lama, maka perhatikan bahwa untuk masuk ke Edit HTML template tidak lagi melalui halaman "design/rancangan", melainkan dari dashboard > template > klik edit HTML. Masih bingung mencari dan edit kode di Edit HTML Blogger baru? Simak tips trik berikut:
1. Cara Mencari Kode di HTML Editor Blog
2. Fitur di HTML Editor Baru
3. Tips Edit HTML Blogger (artikel lama)
Cara Membuat Fitur/Tombol Back To Top di Blogger-Blogspot
Written by: Ahmad Khoirul Azmi
Thanks for reading! Suka dengan artikel ini? Please link back artikel ini dengan codedi bawah atau share dengan sharing buttons di atas. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.

add a comment 23 Comment(s):

Horier said...

oke deh sob, dicoba nih ^^

Anonymous said...

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

Ahmad Khoirul Azmee said...

sudah. thanks sudah mengingatkan. itu karena Blogger selalu mengubah menjadi default link ketika "#" di preview di rich text.

Puji hardiyanti hastuti said...

Thanks admin :) Join in my blog http://www.pujielectrontik.blogspot.com/

trik blogger said...

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 "/>".

Sunggyu said...

thanx ya..kerana kamu telah tunjuk ajr untuk kta semua...so sy ada bertanyaan...
bagaimana cara meletakkan Diary di blog????

Computer Triks said...

keren gan info nya :)

Alfian Dwi Antono said...

Keren gan infonya ..
Langsung saya coba :-)

Mampir di blog saya juga ya :

fianblog

gusse said...

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 "/>".

Royan Sableng said...

kalo diletakkan diwah footer gmana gan..pake tulisan???

CokersCodri said...

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 Reggy said...

izin mencoba mas azmee :)

ChooelikNF said...

trims min

Denddy Gustiana said...

saya tambahkan saja penjelasannya... yang '0' dengan src=' harus pake spasi... semoga berhasil ya...

Dhafin Fuad Mahathir said...

mas ijin gunakan gambar back to top nya mas, saya mohon, dan bagus sekali postingannya

antifield said...

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

Ahmad Khoirul Azmi said...

halo. yang animatif itu pasti menggunakan jquery. kapan2 akan saya share membuat back to top dengan jquery.

Download Dan Baca Novel Gratis said...

ty...

rico ade mandana said...

sudah saya terapkan di blog saya kak..makasi atas tutorialnya..
sukses selalu buat anda

gunaya reborn ( I Wayan Gunaya ) said...

thank you gan !
ane copy ya url 'back to top' punya agan !
hehehehehhehehe ........

PIRA CHIBI 91 said...

tidak bisa :( katanya diending 'img' harus diikuti dengan > atau /> nah, aku kan pakai tanda /> , malah bukan gambar malah jadi link gitu :(

wahid fathul said...

malah bukan gambar malah jadi link gitu :(

MifthaFaridz Blog said...

thanks admin, sangat bermanfaar :)

Post a Comment

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.
Smashed Spams: 11362

Recent Comments

Tautweb.com

Join Our Team!

© 2013 Buka Rahasia Blogspot | Template by Dicas Blogger | Modified & Enhanced by Ahmad Khoirul Azmi

 ContactPrivacy PolicyComment PolicySitemap