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='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
Published by: Ahmad Khoirul Azmi
Rating: 5 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.

<a href="http://buka-rahasia.blogspot.com/2011/04/fitur-back-to-top-blogger-blogspot.html">Cara Membuat Fitur/Tombol Back To Top di Blogger-Blogspot</a>

24 Comment(s):

Horier said...: oke deh sob, dicoba nih ^^; April 25, 2011 at 1:45 PM
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; November 5, 2011 at 7:13 PM
Ahmad Khoirul Azmee said...: sudah. thanks sudah mengingatkan. itu karena Blogger selalu mengubah menjadi default link ketika "#" di preview di rich text.; November 5, 2011 at 7:40 PM
Puji hardiyanti hastuti said...: Thanks admin :) Join in my blog http://www.pujielectrontik.blogspot.com/; December 8, 2011 at 3:50 PM
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 "/>".; December 8, 2011 at 5:50 PM
Sunggyu said...: thanx ya..kerana kamu telah tunjuk ajr untuk kta semua...so sy ada bertanyaan...
bagaimana cara meletakkan Diary di blog????; December 28, 2011 at 12:48 PM
Computer Triks said...: keren gan info nya :); December 30, 2011 at 2:05 PM
Alfian Dwi Antono said...: Keren gan infonya ..
Langsung saya coba :-)

Mampir di blog saya juga ya :

fianblog; January 5, 2012 at 10:21 PM
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 "/>".; January 18, 2012 at 8:15 AM
Royan Sableng said...: kalo diletakkan diwah footer gmana gan..pake tulisan???; January 21, 2012 at 1:38 PM
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.. :); February 5, 2012 at 4:47 PM
Blognya Reggy said...: izin mencoba mas azmee :); February 8, 2012 at 1:07 PM
ChooelikNF said...: trims min; February 19, 2012 at 4:29 PM
Denddy Gustiana said...: saya tambahkan saja penjelasannya... yang '0' dengan src=' harus pake spasi... semoga berhasil ya...; February 24, 2012 at 1:49 PM
Dhafin Fuad Mahathir said...: mas ijin gunakan gambar back to top nya mas, saya mohon, dan bagus sekali postingannya; March 5, 2012 at 8:10 PM
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; March 28, 2012 at 6:21 AM
Ahmad Khoirul Azmi said...: halo. yang animatif itu pasti menggunakan jquery. kapan2 akan saya share membuat back to top dengan jquery.; March 29, 2012 at 1:30 AM
Download Dan Baca Novel Gratis said...: ty...; April 4, 2012 at 1:38 PM
Gurwinder Singh said...: InfozGuide found this one of the best article !! Thanks for sharing :); August 1, 2012 at 2:18 AM
rico ade mandana said...: sudah saya terapkan di blog saya kak..makasi atas tutorialnya..
sukses selalu buat anda; August 4, 2012 at 11:27 AM
gunaya reborn ( I Wayan Gunaya ) said...: thank you gan !
ane copy ya url 'back to top' punya agan !
hehehehehhehehe ........; August 19, 2012 at 1:10 PM
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 :(; October 4, 2012 at 6:03 PM
wahid fathul said...: malah bukan gambar malah jadi link gitu :(; April 7, 2013 at 9:13 PM
MifthaFaridz Blog said...: thanks admin, sangat bermanfaar :); April 20, 2013 at 8:06 PM