Rabu, 05 Oktober 2011

Membuat Back To Top dengan Efek JQuery

Dengan Back To Top engunjung akan lebih mudah untuk kembali ke halaman paling atas tanpa menggerakan scroll mereka..



1. Login ke blogger.
2. Pilih Tata Letak dan Klik Edit HTML
3. Masukan script jquery berikut ini diatas </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>
4. Masukan kode javascript ini setelah script jquery tadi:

<script type='text/javascript'>
//<![CDATA[
$(function(){
$('a[href*=#top]').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
if ($target.length) {
var targetOffset = $target.offset().top;
$('html,body').animate({scrollTop: targetOffset}, 1000);
return false;
}
}
});
});
//]]>
</script>
<!-- end scro
5. Cari kode <body> dan ubah menjadi <body id='top'>
6. Masukkan kode html berikut sebelum </body>
<div id='goingtop'>
<a href='#top' title='Top'><img src='http://i627.photobucket.com/albums/tt351/testemplates/goto_top.gif' style='right:20px; bottom:20px; position: fixed;'/></a></div>
7. Simpan template anda dan lihat hasilnya.



Selamat mencoba (:

Tidak ada komentar:

Posting Komentar

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
| |