Breaking

Friday, July 12, 2013

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
Comments
0 Comments
Adbox