Cara Membuat Fitur/Tombol Back To Top di Blogger-Blogspot
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.
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.
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.
Author:
oke deh sob, dicoba nih ^^
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
sudah. thanks sudah mengingatkan. itu karena Blogger selalu mengubah menjadi default link ketika "#" di preview di rich text.
Thanks admin :) Join in my blog http://www.pujielectrontik.blogspot.com/
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 "/>".
thanx ya..kerana kamu telah tunjuk ajr untuk kta semua...so sy ada bertanyaan...
bagaimana cara meletakkan Diary di blog????
keren gan info nya :)
Keren gan infonya ..
Langsung saya coba :-)
Mampir di blog saya juga ya :
fianblog
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 "/>".
kalo diletakkan diwah footer gmana gan..pake tulisan???
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.. :)
izin mencoba mas azmee :)
trims min
saya tambahkan saja penjelasannya... yang '0' dengan src=' harus pake spasi... semoga berhasil ya...
mas ijin gunakan gambar back to top nya mas, saya mohon, dan bagus sekali postingannya
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
halo. yang animatif itu pasti menggunakan jquery. kapan2 akan saya share membuat back to top dengan jquery.
sudah saya terapkan di blog saya kak..makasi atas tutorialnya..
sukses selalu buat anda
thank you gan !
ane copy ya url 'back to top' punya agan !
hehehehehhehehe ........
tidak bisa :( katanya diending 'img' harus diikuti dengan > atau /> nah, aku kan pakai tanda /> , malah bukan gambar malah jadi link gitu :(
malah bukan gambar malah jadi link gitu :(
thanks admin, sangat bermanfaar :)
info keren gan ...
Post a Comment