-->

Situs Multi Pengetahuan Meliputi Pendidikan, Informasi Teknologi, Tutorial, Serta Pengetahuan Penting Lainya

Cara Membuat Tombol Back To Top Dengan Efek Keren

Membuat tombol kembali keatas bagian blog anda memang ini sangat unik dan banyak juga dipakai para blogger-blogger, bahkan banyak juga situs-situs besar memasang tombol back to top ini, agar dapat mempermudah pembaca kembali keatas tanpa harus menggunakan scroll.

Mungkin anda sudah biasa melihat tombol kembali keatas atau Back to top yang hanya scroll keatas dengan mulus. Nah, kali ini saya akan memberikan tutorial efek bounce yaitu efek yang jika telah sampai keatas maka dia akan memantul-mantul.

Tombol back To Top

Bagi anda yang ingin memasang tombol yang saya maksud tersebut, baiklah langsung saja disimak tutorial sederhana saya tentang cara penerapannya, oh iya, untuk contoh tombolnya bisa anda lihat pada gambar diatas, mungkin begitulah kira-kira tampilannya.

1. Langsung kemenu Edit Html
2. Cari kode </head>  kemudian simpan kode dibawah ini tepat diatas kode tadi
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>
Jika pada template blog anda sudah terdapat kode tersebut, silahkan lewati saja.
3. Kemudian simpan kode dibawah ini tepat sebelum atau diatas kode </head> 
<script type='text/javascript'>
$(function() { $(window).scroll(function() { if($(this).scrollTop()>100) { $('#BounceToTop').fadeIn(); } else { $('#BounceToTop').fadeOut(); } });
$('#BounceToTop').click(function() { $('body,html').animate({scrollTop:0},800) .animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:10},100) .animate({scrollTop:0},50); }); });
</script> 
 4. Setelah itu cari kode </body> dibawah sekali, masukkan kode dibawah ini
<style type='text/css' scoped='scoped'>
#BounceToTop{position:fixed; bottom:0px; right:3px; cursor:pointer;display:none}
</style>
<div id='BounceToTop'><img alt='Back to top' src='http://2.bp.blogspot.com/-MFhU3vLp5ho/UiaBZeA1McI/AAAAAAAAAQs/MrzW2ljP5mA/s1600/arrow-up_basic_blue.png'/></div>
5. Simpan Template, dan lihat hasilnya.

Nah, begitulah kiranya cara memasang tombol back to top, semoga tutorial ini bisa membantu dan mudah dipahami. Terima kasih telah berkunjung...

Previous
Next Post »

2 komentar

Heri Assidiqi delete February 1, 2015 at 3:28 PM

Demo mana demo :)
Sepertinya oke nich, Back to top di blog saya blm punya fitur effect sperti ini :)

Raja Online delete February 1, 2015 at 3:45 PM

Hehe... oke mas, akan saya update Demonya :)
Silahkan dicoba ya mas herii

Apa tanggapan anda tentang artikel diatas?

 

Contact Form

Name

Email *

Message *