Sabtu, 29 Juni 2013

Cara membuat tombol back to top dengan javascript


Assalamualaikaum Wr.Wb, kali ini saya akan berbagi tutorial blogger tentang cara membuat tombol back to top dengan javascript di blog. Kali ini saya menambahkan sentuhan Jquery / javascript yang membuat gulungan keatas menjadi lebih halus dan elegan.
Back to top mungkin sangatlah berguna bagi blog yang mempunyai 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 Berhasil dan Bermanfaat

About the Author

yoga hadi

Author & Editor

Has laoreet percipitur ad. Vide interesset in mei, no his legimus verterem. Et nostrum imperdiet appellantur usu, mnesarchum referrentur id vim.

Posting Komentar

 
CTR(Computer Tips & Trik © 2015 - Blogger Templates Designed by Templateism.com