Cara Membuat Tombol Back To Top Sederhana

Tombol kembali ke atas - Kecil sih bentuknya, tapi bisa memberikan manfaat yang luar biasa. Khususnya bagi blog yang sudah mempunyai peringkat atas. Karena jika kita berkunjung ke blog orang lain dan ternyata blog tersebut sudah punya nama, otomatis artikel-artikel yang di tulis sudah barang tentu bagus. Dan dapat dipastikan pula jumlah komentar akan membludak, bisa-bisa scroll bar di bagian kanan kelihatan kecil.

Mungkin bagi sebagian orang tombol kembali ke atas tidak terlalu penting, namun bagi saya pribadi itu merupakan sesuatu yang penting. Kenapa saya bilang penting ? Coba anda bayangkan jika kita sudah sampai pada kolom komentar paling bawah, lalu kita pengen kembali membaca artikel atau mencari artikel lain harus menggeser scroll bar itu sampai atas. Mungkin yang ada kita malah pergi dari blog tersebut.

• Membuat ALT Tag Manual

Disinilah fungsi utama tombol back to top (kembali ke atas). Apa kita mau para pengunjung kabur gara-gara capek menggeser scroll bar hanya untuk menuju ke atas ? Saya rasa tidak. Tombol back to top sendiri ada beberapa macam model dan jenisnya maupun cara membuatnya (html atau widget). Dan pada kesempatan ini saya akan berbagi cara membuat tombol back to top yang sangat sederhana menggunakan edit html.

Membuat Tombol Back To Top Sederhana

1. Login ke akun blog anda

2. Pilih Template lalu EDIT HTML

3. Cari kode </body> (gunakan CTRL+F). Lalu letakkan kode di bawah ini tepat di atas </body>

<!-- kios-tutorial back to top start -->
<a href='#' style='position: fixed;bottom:5px;right:5px;' title='Back to Top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoZk2hyphenhyphenVK5HAUY97iYs4xUERlgvxJo-H4uAYIDy6GJVCUE_NmxIYJisK0gwGsQBFnQWcixqd976VUd0_fMz5zMtS8rmOs6ynKsyYk9_mwLxEa-iHVEge5wAZGKRwSQysFn57mxvMuI3Iw/s1600/kios+top+12.png? attredirects=0' style='border: none;'/></a>
<!-- kios-tutorial back to top end -->

4. Pratinjau dulu template anda, jika sudah yakin silahkan SAVE.

Silahkan mengganti tulisan warna merah di atas dengan disain sendiri atau bisa diganti dengan model tombol yang saya sediakan di bawah ini.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn3l54JEeY2hcyildDFzLyv_1R5Cori3XOXckDORYpv8gA8xv_DDzXv4heNROmsfcRreJXO2AiVrHT2jOVC720SMUSdEqDcH22Tz8w6tVoa4rAwI67wnNOHzirN8PAWxg8jd-v73YvyRbj/s1600/kios+top+1.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSUldcluxSEwIiHpn383ZhPwfyhzctY2jj2QcRQ9pB6RcpkQTNAMq0ABbZCNgOCre7dGtbjgdiu9s-qZTPcjPj_013jnpDRpaR8ApLGAMZkVhE2ccOkErdeu5-zUVBLM4CRvgNLMR0OIRT/s1600/kios+top+2.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD_i6E1RF97rrgE0QbUMNZTooxcxa-7bnhTMe3HjqZqoLqXrPBQH1V3xn-CqknkwBmha3Mdo8K_xbzHot-7PeuQsnjJtVllpPXN9L_L935DY3pEpixgrb9Cq4VftHuMsP_pxhu784Ca-Ug/s1600/kios+top+3.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXr-v4em74POHDQzcW6hcsAdNfZwh07EPzMRxccAFpMNUMolxv8fWSLh_CG29eCeCIUStQH8fcylhosM9pdMLxR8TQn4IyBA6ZEEy9eFQERT3I2qMlz2X4pQAsI9Cc1asnSXQ4nlEO-nj5/s1600/kios+top+4.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW7AIMBsvhv2zLiIkd1W32pfc-uSrsHoA2zIjikCyPdPeTSU4OAULy_PpPBrVihbzQeyGGf_M9hbTeDmRfbCYvjiefKXoMTTw7Zm97wm-Rw33buGAlSwvjqDy7Pbn3_txXvLXO3AjHUDr7/s1600/kios+top+5.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijGG8vMt0-vh1KPN49OYXzyj6iUBEJQBtxem19SMCzBHr994pmj28RZkZDglE-c0U57FXNwN681PQpjpoHh-r5qBp-nhup1KZRuuK37c5-It58W7c4alTycKLw57aVxbga0YFTXSWTygWj/s1600/kios+top+6.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1EhV6_bGFKpZVj2EkQtJk6p0NACkjdAWRIIailh4dEsTBsu5-fBC9WP21CL5ojoX51rVL0QHKxqemVmklIYZQ6LOr2Qw6NLwI59m3Bv0W3JZlPGRQBwlKx0Px43ehTt3mIQi6vYzDl4Ix/s1600/kios+top+7.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpZiRt_ila74hFl5A-EnF57W2ke6n3VwHLEPDJcoiJXSGKkBy6q5aNTjvpnhyphenhyphen6uxazgXHiSmV_vTibPW3WYdx7Pxn8qZwbI28wdK14_6DDnVU55xQeTX-7FBviCx8J4i1_dPQvyV4XjKYM/s1600/kios+top+8.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMntCuv-_GcpMgE93oPLEUSsUbmhCbSHFoROnW7waH_WNF5pq5zW_Ggkn30_nHnP9zB4hMtW2EqyWbdXXSlkH9uIdjCGr1F_zuXl1LuIR05khAIvUviAupB9aujUqMcBfvNuySFsY_uh8R/s1600/kios+top+9.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVciN3vGCPHDwO6j0_ZlyjPKI19kpWE4UyMEJm1RsA1niqg6BlX8JRN2DzVwX7hVDegKCvk4USGsl9JrPN_sB0rdK6ErUrOCc3BxjvJIBTlCBff-ZTedSZNYB_LA49uN1XyVDZFPLdemPe/s1600/kios+top+10.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzCkm0jQpPh2Ah_9bZ7DsnTuvWHuRmhWSbduMyAA1NvJgWK1jGgQ-eyauutlVaSryLXrfcDmnAzYT7NV9u4xt5-HKmjlGvvOJQf4ezZSo-sXyQEjMgfHrCxpnt8mNijC84_NdCNjXFJYfm/s1600/kios+top+11.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuCZgLgZegkpzlj5M-3BSEeMCV04nQzFnd-ILIwyb5pVXkqLKd3szNyIr5PfES1Emz6P4wi0miyFGl7YXZ2mxjqDwM9AxKuVXxJkprmwI6zb6Pye-flh2VuOj-vYTVOA4VuAJfM6tIbEgN/s1600/kios+top+12.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD9DTYYXAWwU4PCVzQ4MLU5ZqyD9WEWP4fMktior9Hebkk7pn5lyXbb01EOtz00XGX7HQJCCDfm5ru6qoof8Mo9bxesWsNw9MrTwL9nTLAC9ugg4lNw9Q4DMt8wENEDB7BrKYF8XQ7rlBj/s1600/kios+top+13.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN74X29KDm-BHXRKZsWkkgehdsFvpGHZJUGFtXWLqoHRQhoS0rVtZZuvM65fKzq0U1o59FRYGIKEX5bo7Xt_pvyoig5eozoz1TjLF1RCfUh_q4K2hdxgNzyrvn5EaV0FhNqm8_pkMYFSYY/s1600/kios+top+14.png

Untuk membuat tombol back to top menggunakan widget atau yang ada efeknya, akan saya ulas pada artikel berikutnya. Selamat berkreasi.