Membuat Tombol Back to Top JavaScript

Membuat Tombol Back to Top JavaScript


File Share 23 - Hai gan, kali ini saya akan berbagi tutorial blogger tentang cara Membuat Tombo Back to Top. Kali ini saya menambahkan sentuhan Jquery / javascript yang membuat gulungan keatas menjadi lebih halus dan elegan.




Back to top mungkin sangatlah berguna bagi blog dengan tampilan artikel dan komentar yang sangat banyak. Dengan tombol ini, pengunjung hanya butuh 1x klik untuk dapat mencapai header blog anda kembali.



Okelah , mari kita bahas tutorial membuat tombol back to top dengan javascript yang satu ini

1.) Masuk Dashboard Blogger > Template > Edit Html

 2.) Cari kode ]]></b:skin>

 3.) Letakkan kode dibawah ini diatas kode ]]></b:skin>
Kode 
#top-arrow{position:fixed;bottom:0;right:0;z-index:100;width:30px;height:37px;clear:both;overflow:hidden;margin:0}

#top-arrow a{float:right;margin:0;padding:0}

#top-arrow a.first{float:right}
4.) Lalu cari kode <body>

 5.) Letakkan kode dibawah ini dibawah kode <body>
Kode 
<div id=top-arrow style=display: none>

<a class=go-top first href=#top><img alt=go top src=http://1.bp.blogspot.com/-eSNb-VmydLM/UcurmKjovaI/AAAAAAAAEoI/NFiQrwxTm10/s1600/top-arrow.png/></a>

</div>

<script>$(#top-arrow).hide();$(function(){$(window).scroll(function(){if($(this).scrollTop()>500){$(#top-arrow).slideDown(200)}else{$(#top-arrow).slideUp(200)}});$(.go-top).click(function(){$(html,body).animate({scrollTop:0},1000);return false})});</script>
6.) Langkah terakhir tinggal klik Simpan Template

Semoga Bermanfaat
^_^

Facebook Comments


visit link download