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.

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 24 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

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

royansableng said...

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

Cokers Codri 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

Unknown said...

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

Unknown 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

Unknown said...

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

Unknown said...

ty...

rico ade mandana said...

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

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 :(

Unknown said...

malah bukan gambar malah jadi link gitu :(

MifthaFaridz Blog said...

thanks admin, sangat bermanfaar :)

Pondok Lengkap said...

info keren gan ...

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

  • Menulis Artikel Blog

    Tips dan panduan menulis artikel blog berkualitas dan menarik (dalam beberapa seri).

  • Template Blog Terbaik

    Review dan daftar situs pembuat dan penyedia template blogger berkualitas dan tentunya terbaik.

  • Strategi SEO 2015

    Hal apa saja yang wajib menjadi bagian dari strategi SEO di tahun ini? Simak ulasan lengkapnya di sini.

  • Artikel SEO Friendly

    Tips membuat artikel yang memenuhi syarat SEO sekaligus tetap menjaga kualitasnya.

  • Belajar HTML & CSS

    5 situs rekomendasi untuk mempelajari HTML dan CSS dari tingkat dasar.

© 2010-2015 Buka Rahasia Blogspot | Template by Dicas Blogger | Modified & Enhanced by Ahmad Khoirul Azmi

 ContactPrivacy PolicyComment PolicySitemap