Minggu, 06 Februari 2011

Membuat Back To Top

16.59    No comments

"Back to Top" adalah salah satu fasilitas yang dapat digunakan pada blog untuk memudahkan pengunjung menavigasi halaman pada blog anda. Fungsi dari Back To Top yaitu mengantarkan kembali pengujung anda ke halaman paling atas,seperti yang terdapat pada bagian kanan bawah  blog ini. Penggunaan JQuery dengan fungsi ini dapat memberikan hasil scroll yang lebih baik....dalam hal ini scroll menjadi lebih smooth atau halus...Jika anda udah gak sabaran pengen membuatnya langsung aja dipraktekin...

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='urlgambaranda' style='right:20px; bottom:20px; position: fixed;'/></a></div>
Catatan:
Ganti Huruf berwarna merah dengan alamat url gambar anda.
 Angka berwarna Hijau adalah Jarak dari kanan Bisa anda sesuaikan dengan ke inginan anda.
Angka berwarna Hijau adalah Jarak dari bawah Bisa anda sesuaikan dengan ke inginan anda.


7. Simpan template anda dan lihat hasilnya.

0 komentar:

Posting Komentar

Kontes SEO