Xceria Blogger Indonesia

Cara Mudah Membuat Tombol Back to Top Keren

Buat Tombol Back to Top
Hari-hari ini semakin banyak yang menambahkan tombol back to top pada blog atau websitenya.

Tombol ini biasanya diletakkan di bagian bawah sebelah kanan dan juga diberi efek fadein - fadeout.

Tombol ini dibuat tidak terlihat dan baru akan muncul ketika halaman di-scroll ke bawah. Tapi semuanya bisa diubah sesuai selera masing-masing.

Nah, jika sebelumnya Xceria menulis tutorial singkat mengenai cara menghapus blog blogspot, kali ini Xceria akan menulis tutorial mengenai cara membuat tombol back to top.

Sekilas Tentang Tombol Back to Top

Tombol ini berguna bagi pengunjung untuk dapat pindah ke bagian paling atas dengan cepat dan smooth atau lembut. Dengan menampilkan tombol ini, pengunjung akan lebih mudah dalam menavigasi halaman blog Anda.

Selain itu blog atau website akan terlihat lebih profesional di mata pengunjung. Langsung saja simak langkah-langkah berikut jika ingin memasangnya.

Memasang Script "Back to Top Button"

Cari kode </head>, letakkan kode berikut di atasnya.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() { $(window).scroll(function() { if($(this).scrollTop()&gt;100) { $(&#39;#ScrollToTop&#39;).fadeIn()} else { $(&#39;#ScrollToTop&#39;).fadeOut();}});
$(&#39;#ScrollToTop&#39;).click(function(){$(&#39;html,body&#39;).animate({scrollTop:0},1000);return false})});
</script>

Anda bisa mengubah angka (100) berwarna merah di atas untuk menentukan kapan tombol akan muncul. Misalnya diubah menjadi 1000, maka halaman harus di-scroll lebih ke bawah agar tombol muncul.

Menambahkan Kode CSS dan HTML "Scroll to Top"

Tambahkan kode berikut di atas kode </body>
<style type='text/css' scoped='scoped'>
#ScrollToTop {z-index: 10; text-align: center; position: fixed; bottom: 20px; right: 20px; cursor: pointer; display: none;}
</style>
<div id='ScrollToTop'><img alt='Back to top' src='https://1.bp.blogspot.com/-QAx3uYARMng/Vza4JKD4F4I/AAAAAAAAEx4/yT4BE_4e5mAuASZArDXpUDsvjU459GMnQCLcB/s1600/tombol-back-to-top-1.png'/></div>

Posisi Tombol Back to Top

Ubah angka (20px) berwarna merah untuk mengatur posisi tombol.

Gambar Tombol Back to Top

Untuk mengganti gambar tombol, ubah tulisan warna biru di atas dengan url tombol yang Anda inginkan.

Di bawah ini ada 6 pilihan tombol kembali ke atas yang bisa digunakan dengan gratis.

Tombol Back to Top 2

Tombol Back to Top 3

Tombol Back to Top 4

Tombol Back to Top 5


Tombol Back to Top 5


Tombol Back to Top 5


Anda juga bisa menambahkan efek transparan pada scroll to top button saat hovering. Untuk melakukannya, pertama cari kode </b:skin>, lalu tambahkan kode CSS berikut di atasnya.

#ScrollToTop img {filter: alpha(50); opacity: 0.50;}
#ScrollToTop img:hover {filter: alpha(100); opacity: 1.00;}

Untuk membuat tombol dengan kreasi Anda sendiri lihat artikel tentang cara membuat kreasi tombol back to top dengan CSS.

Sekian tutorial tentang cara memasang tombol sroll to top. Semoga berguna.

41 comments

ini yang saya cari. ijin copy scriptnya ya min. sama ijin bokmark jg buat di kunjungin lg klo kurang jelas.

balas

Kaya nya gampang juga nih gan..
ane coba dulu ahhh...

balas

makasih tutorialnya kang, bisa langsung praktek nih

balas

kapan kapan tak coba kalo butuh thanks ya gan

balas

Tombol backnya sudah berhasil terpasang di blog saya, tapi image arrownya dimodifikasi dikit. Makasih banyak atas scriptnya gan..

balas

tombol back to top kayak agan kok gk ada ya?

balas

Mungkin di posting selanjutnya akan saya buatkan tutorialnya... :d

balas

trims gan.... mudah dimengerti tutorialnya..

balas

makasih gan atas tips and trick nya.... sangat membantu, and mudah dipraktekkan dan dimengerti...

balas

makasih sob tutorialnya, saya jadi bisa sekarang...

balas

mantap bgt, makasih gan tips nya

balas

wah, pake jquery ya..
keren juga tuh buat navigasi

balas

Ini yang saya cari, ijin kopas scriptnya ya gan, untuk mempercantik web ane ;)

balas

mantap gan ...

balas

Terimakasih banyak mas, sangat membantu sekali artiklnya... keep posting mas..

balas

makasih telah berbagi ilmunya

balas

Thanks banget gan, nyari-nyari gak ketemu, akhirnya ketemu di sini.

balas

keren dengan tombol kembali ke atasnya, harusnya ada juga nih tombol buat ke bawah biar juga cepet langsung menuju kolom komentar

balas

Makasih Infonya Gan, Sangat Membantu Sekali Artikel Nya

balas

thanks tutorialnya mau di coba ni :)

balas

udah ane coba gan
makasih tutorialnya :)

balas

tutorial ini sangat berguna..terima kasih kerana sudi share..

balas

mantap.. thanks atas sharingnya ya.. jadi bisa saya tambahkan di blog saya

balas

sudah saya buat, cek:
http://xceria.blogspot.com/2015/04/kreasikan-tombol-back-to-top-dengan-css.html

balas

Wah langsung Bookmark nih

Makasih gan ;)

balas

nice tutorial nya gan,sangat membantu

balas

wah ini yang ane cari gan
ngomong warna nya bs di ganti gak gan???
www.pojokshare.com

balas

bisa, coba lihat ini:
http://xceria.blogspot.com/2015/04/kreasikan-tombol-back-to-top-dengan-css.html

balas

Bisa untuk menambah variasi di dalam blog gan, sekalian tambah manfaat dan mempermudah pengunjung. Keren

balas

lama sekali tak mengaturcara coding blog ni

balas

Nah ini ni yang saya cari cari. Ijin copy scripnya ya gan

balas

Keren emang keren gan

balas

keren sob artikelnya, sangat bermanfaat sekali artikelnya
izin nyimak gan :)
http://goo.gl/Glo59G

balas

kalau tombol ini biasa uda lansung ada dapat sama template nya nih

balas

Thanks banget artikel yang sangat bangus sekali, mungkin bisa ane langsung coba aja dech gan, kalau cma baca ane gak paham gan hahahah,,,salam sukses gan mantaapppp,,,

balas

Artikel yang bagus gan
Terima kasih gan :)

www.sastraciang.com

balas

Kalau tombolnya format GIF bisa gak gan?

balas

kalau punya saya sudah bawaan dari template jadi tidak usah pusing bikin script lagi -)

balas

wah di blog saya blom ada yang macam ini. bisa saya coba tuh.

balas

Keren, makasih buat infonya di tunggu update selanjutnya

balas

Iya sih, ini ngebantu banget saat artikel panjang banget. :p

balas
:) :( ;) :D =D :w :c :d -) -| :v =( ^: :o :C :-

Silahkan berkomentar sesuai dengan artikel. Dilarang berkomentar spam dan menulis iklan!

« »
 
Back to top