Cara Membuat Tombol Back To Top Atau Kembali Keatas Di Blog

Tombol Back To Top ini Sangat dibutuhkan oleh si pengunjung. Apa lagi jika anda menulis Posting yang sangat panjang. Dengan Tombol Back To Top ini pengunjung blog anda tidak perlu klik scrol pada blog anda untuk kembali keatas. Jika Tombol ini di klik otomatis akan kembali ke atas.

Tombol ini tidak perlu dicari ke bawah, melainkan tombol ini melayang di samping dan akan mengikuti dimana scrol berada. Tombol ini juga mempunyai 19 style Tombol. Anda juga bisa memilih Sytle yang anda mau.

Tujuan Dipasangnya style ini agar pengunjung lebih tertarik dengan tombol ini. Di posting kali ini saya akan menjelaskan Cara Untuk Membuat Tombol Back to Top Di Blog. saya akan menjelaskan secara mendetail cara untuk membuatnya. Jika, Anda ingin membuatnya anda perlu mengedit HTML template anda.

Seperti Berikut caranya:

• Silahkan Login Ke Blogger Anda.
• Setelah itu, Klik Menu Template --> Klik Tombol Edit HTML untuk mengedit HTML template anda.
• Lalu, Cari kode  ]]></b:skin> dengan menekan CTRL+F atau dengan F3.
• Setelah menemukan, Masukan kode berikut ini diatas kode ]]></b:skin> :

#backtotop { padding:5px; position:fixed; bottom:10px;right:10px; cursor:pointer; }

• Setelah itu, Cari Kode </body> dengan menekan CTRL+F atau dengan F3.
• Masukan Kode Berikut ini diatas kode </body> :

<a href="#" id="backtotop"><img src="URL Gambar Disini" alt="back to top" /></a>

Keterangan:
Ganti Tulisan URL Gambar Disini dengan URL Tombol To Top yang anda mau.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQUtNozkiV3H52VOy7iukJlW1Rt0A_l9ZZJIRJMxAd0osXA-Kp_MovKJc0nlo7sH5By90lrHwT4PKmokDygB6O9B8KD26YJ-UQxKv9_JaHg-cPAkOBUxtlgQQdDezD_2o0tDKtqS6Sw3Y/s1600/Top+Biru.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDlG1o-vPJGm8SyMw6uohAkEnAQ-snluKyWCKRN2NhjZlmUs3nQLDZZxfmG-BD1n0T05ht_KnH_Hy7zoGDRzC28GzZbmVIUYMK-_1LCQcwT3bn8ye5g14lR-hA0IZVIogcOpOV3nLYCSk/s1600/Top+Hijau.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1S6AKEnKL3ZYmFQroid6RbkTfMHNz-VsQUG-eeV-qJpFod70vJh-AyInDhU9PtiWwiVfJeSfT27m_8s1_q1Ys7L66ptzAv6uujepuQD1jxFDdjBJK_ppQifYtab424h55jHP8hyphenhyphen4lruE/s1600/Top+Kuning.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn7KtGsgPLvW_RU98mXG-WCEvfgHyIMf_jMJjcRg83du66L8tJJDTShDvR9L1a8ePV6s9KF_2YJATEolOjblumWljhpiHAvnIjPT0T-RKsPAfQeZI6bYORUH0d0pvaXCdHNi6xLsvhz6A/s1600/Top+Merah.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8YxmMJnkLFClu1E_etJi2vIV4GeHDXPpZsTvUtshpsOOCttyjXcbZ7OuypP4WvZeR0Fe80Ym-JbyfuSF0bOOwaJOqzQVzuuO_OlsiE8TLhM8Vo9joR-pZz3JehsaRWi8Fqv6F-MjWriQ/s1600/Top+Purple.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_WbBnHIty46dIbo4ch1ZebzLvuI3Smw992ybsuRVitKaVZHnwOMzSrWJVjYammfqD0N3tZ836I5q7udIcJ_fxHV_axkT7CxdFAax4wFwHBKROkeYclbqS9kKo2dAxvq0kkJazNjRu7gU/s1600/bttp-10.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF0SHSyqQampBGykxFEk4xnJlhpdG0uf8BF50sQttlHPPcQmo2Q3-PUV11Osu03YfVXj72M-HfaUUTeY7kQkF3GfTQWTuQ9EMWT5lcd40OPoRXBT1ej3ncwGqT2o_gpFuGh_Xz5tBBL2M/s1600/bttp-11.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1Qadg7s7DgL47a4eMp6Y802IaveFQoPWrau-TwuJwrFijwkn7TJba5bKeSEXKFDgqz3DmhPcTy20NDO8sW4mkBTMGcmz0k_P1ZifBKB92H-Ubpk-StE-0FgnZS7LVqtZBqZDI8chOqZc/s1600/bttp-12.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGfImV9mE1IdpckdCXqeCXwxs5GkZewqpuPd4q_SdMd1xarvVBM19j6UsqD-k9umWUXTOEymFjeneyPXe7QAtTXk4yqCgK4SAszfEHFGMJKGS2321hGNxGNqZ3cXqgpuk3MyxmK80nkks/s1600/bttp-9.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG5iL1lH6zLvg4GodfaSu51ySLeQ7yuXbk0BkiT2RBb3RHMDi7ea8y5g_R7AEkujEN2dwqR8JhmUrvbeonWuAxAR8mtdQx1HXh703y9kVa5J8lFSWGquiJ937Ge7u2-v7zUWbFqzg95hJ3/s400/bttp-8.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbjVyARUXkxidJgCDZUL41UeNo_fsS1aeJRk57-GkZZ4usDXsTS-F41uZcCN90Bver2M5P6ho1tGHOoUJQFKt4CuP912hflV1Pqin6zLGjU7wcunxlqd2eVXm4rSJoHhJ7l_Txo347wDJf/

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnUSLhkKw8jEtLjrzr98pA6es_a0dS8rl5pqWelDRyMnP6lWqle5QSQsfrkU_hIzkgnRJf9fV8f12Lepx2_8lAZ6VR3X3yMFwkNTogFoThFLK-MkuxNkqr_4biu5C0pn0ldRRZbDIYMv7r/s400/bttp-13.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkY7r1ZHkRZB5q_YuhR1mPpvb_irCIxIzA4xOVsXpBkQbwzdkH6BzcbXLL7B-EvQkjsvpPI-wYowdQesOfEaJ40M9vn-ymsME8H0VY6SzHWvrigcwOgherFsy_WdVy_pDOFvKcFXEFL0iK/s400/bttp-14.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrbYSrT1FATHlPwrmUoxVp3Od5eiv11rhunJjav6E80GDKNUmb4LGOkrWTDNJJVe6UXvjk6KfXPBlQjB_rokCy2Ofy6ubumUULS2Hl0jhDX2AXxp4HyIWq_L9vGXy3X5MkTox-ScGjPatM/s400/bttp-15.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjULGCt7qecwWFT0SAiMbwt35gzTgnZiFjEZeEAeb2L2mgZtZDysNmzS_Qp7KF4XFrYCC2X8i9sImIAwTuIkzs9ixtRXZHAuACRGGB9LXrfu1YBFzJTx15zYlura6-Q1dr2bEixh5cqGgo/s1600/bttp-16.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8b-1onhiYN-gNaSBjaJ6k9dkfieqk56Eui1FAMjypPl1HNSgGpzKv_eLYmCpY1WaAxZkUdNCIFImYNODNXOuESFUHKq30T3uAq0a1nWrV1fzn9lbm2rVMLqIhs0Eakwb_2N3FcfBcoIVM/s400/bttp-17.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsRPX-Xiiuq8R5GFZWgPvgpYTtKjPdLp20Bl_mhjTLdF5YiLqIqoON7IrA06lx7_8JJoYhSWATuwKFq9A60JHJZrCZNCArzZwT4uv4RQ2MCnaemKvfiXcf8ZHcpG4L-yTV-owAF9CLwmKY/s400/bttp-19.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl08a_DuAP0F9yJ-7qfnmisFGG_19YuQgmuyefeUlZzy1WlTW_poVohR9M3ezQC_TVIjGwlzuYlbyPD78J-4d9RbJyfByx-l84wqUlYbvfU43kYreS_acYsngwXjH6Otw_sPrepdaLZWCU/s400/20.png

• Setelah itu, Cari Kode <head> dengan menekan CTRL+F atau dengan F3.
• Paste Kode Berikut ini di bawah kode <head> :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'></script> <script language="javascript"> $(window).ready(function(){ $('#backtotop').click(function(e){ e.preventDefault(); $('html, body').animate({scrollTop:0}, 'slow'); }); }); </script>

• Lalu, Klik Tombol Simpan Template.

Selamat Mencoba,
Salam Sukses.



Your-BelajarBLOG