Selamat datang di Kios-Tutorial

Cara Membuat Tombol Back To Top Sederhana

Tuesday, May 19, 20150 komentar

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.
Cara Membuat Tombol Back To Top SederhanaDisinilah 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='http://1.bp.blogspot.com/-_HrZIlTyDX8/VVtLclMi3cI/AAAAAAAAASI/lafhtFf4K9s/s1600/kios%2Btop%2B12.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.

Cara Membuat Tombol Back To Top Sederhana
http://3.bp.blogspot.com/-x2pIG3_q3CU/VVtXGxhrXCI/AAAAAAAAASc/_39tVqGUzaY/s1600/kios%2Btop%2B1.png

Cara Membuat Tombol Back To Top Sederhana
http://3.bp.blogspot.com/-2Hcg-ZZGVig/VVtXyz1OLEI/AAAAAAAAASk/Pz40ZCLlN1k/s1600/kios%2Btop%2B2.png

Cara Membuat Tombol Back To Top Sederhana
http://1.bp.blogspot.com/-iLbec7n_I2E/VVtY1ZVHBII/AAAAAAAAAS0/xEOtWALxzrA/s1600/kios%2Btop%2B3.png

Cara Membuat Tombol Back To Top Sederhana
http://3.bp.blogspot.com/-BU4tQikPWRQ/VVtZFa4pg4I/AAAAAAAAAS8/vfXLrYMnRYI/s1600/kios%2Btop%2B4.png

Cara Membuat Tombol Back To Top Sederhana
http://2.bp.blogspot.com/-j8Yx1avDPrE/VVtaAHM1xCI/AAAAAAAAATE/Qpet2gSv_Io/s1600/kios%2Btop%2B5.png

Cara Membuat Tombol Back To Top Sederhana
http://2.bp.blogspot.com/-tV2stL0DqE0/VVtal9EO2xI/AAAAAAAAATM/HIk_-XL91Yw/s1600/kios%2Btop%2B6.png

Cara Membuat Tombol Back To Top Sederhana
http://1.bp.blogspot.com/-SA2V-cLrZ9A/VVtbIUYwl4I/AAAAAAAAATU/O2Kcq2wPfQc/s1600/kios%2Btop%2B7.png

Cara Membuat Tombol Back To Top Sederhana
http://3.bp.blogspot.com/-IA00mZRIepo/VVtbipkRlmI/AAAAAAAAATc/lx33DPHb31A/s1600/kios%2Btop%2B8.png

Cara Membuat Tombol Back To Top Sederhana
http://4.bp.blogspot.com/-8_ff5ybk6eg/VVtb5BOUhkI/AAAAAAAAATk/KiY5T2sq2UU/s1600/kios%2Btop%2B9.png

Cara Membuat Tombol Back To Top Sederhana
http://1.bp.blogspot.com/-st9dhdIy0hU/VVtcaNGeiWI/AAAAAAAAATs/V2ukPhsOes0/s1600/kios%2Btop%2B10.png

Cara Membuat Tombol Back To Top Sederhana
http://1.bp.blogspot.com/-Pof6IcqIBJE/VVtcjchhqNI/AAAAAAAAAT0/LCQMHRwPFp0/s1600/kios%2Btop%2B11.png

Cara Membuat Tombol Back To Top Sederhana
http://2.bp.blogspot.com/-_wU17t1C1yM/VVtcrVkT9gI/AAAAAAAAAT8/kvCCicYRTjg/s1600/kios%2Btop%2B12.png

Cara Membuat Tombol Back To Top Sederhana
http://4.bp.blogspot.com/-xbGFvkDSHo4/VVtc-jdYpZI/AAAAAAAAAUE/MmsO2tNQMlk/s1600/kios%2Btop%2B13.png

Cara Membuat Tombol Back To Top Sederhana
http://1.bp.blogspot.com/-6pgGJ6nFGG8/VVtdLpC1BlI/AAAAAAAAAUM/MxEG815-v1s/s1600/kios%2Btop%2B14.png

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

Post a Comment

- Maaf, komentar LINK AKTIV / IKLAN akan saya HAPUS
- Komentar sara / spam akan saya hapus
- Jika ada link gambar yang mati laporkan disini
- Berkomentarlah dengan bijak sesuai dengan artikel
- Komentar anda merupakan undangan buat saya

 
Support : Cara Gampang | Creating Website | Johny Template | Mas Templatea | Pusat Promosi
Copyright © 2013. Tutorial Tips & Trik - All Rights Reserved
Template Created by Creating Website Re-Design by Kios
Proudly powered by Blogger