| |

Membuat Back To Top Dengan jQuery

Setelah hampir seminggu absen membuat postingan di blog ini karena harus mempersiapkan diri untuk menyambut tahun ajaran baru 2009-2010, akhirnya hari ini saya sempat juga untuk dapat mengisi blog ini dengan postingan yang berjudul Membuat Back To Top Dengan jQuery. Maklum namanya juga baru mendapatkan kepercayaan dari SMK Bonavita untuk menjadi Guru Agama Kristen, jadi mau tidak mau hari-hari ini adalah hari yang sangat menyibukkan buat saya? hehehe...

Sebagian dari anda mungkin belum mengerti dengan judul yang dimaksud? Back To Top adalah suatu fitur yang berguna untuk membantu kita untuk kembali ke posisi teratas dalam suatu halaman yang memuat artikel. Biasanya setelah membaca maupun melihat artikel web/ blog dan untuk kembali kebagian atas kita harus memutar scroll pada mouse. Dengan Fitur Back To Top kita cukup menekan tombol bertanda panah yang sudah disediakan, maka halaman tersebut akan bergerak keatas. Biasanya fitur ini berupa tombol bertanda panah yang diletakkan dibagian kiri maupun kanan bawah, contohnya di blog ini [lihat tombol bertanda panah dibagian kanan bawah]

Jika anda tertarik, silahkan ikuti tutorial dibawah ini:

1. Silakan login ke account blogger anda.
2. Menuju ke edit HTML
3. Masukkan script jQuery di bawah ini diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>

4. Masukan juga kode javascript berikut dibawah script jQuery tadi:




<script type='text/javascript'>
//<![CDATA[

$(function(){

$('a[href*=#]').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 scrolltop -->

5. Cari kode <body> lalu ubah menjadi <body id='top'>
6. Masukkan kode berikut di atas </body>

<div id='goingtop'>
<a href='#top' title='Top'><img src='http://1.bp.blogspot.com/_Sm72vI4EkZ4/SumSf4LqtLI/AAAAAAAAAnA/eIPAunSuPdw/S250/goto_top.gif' style='right:20px; bottom:20px; position: fixed;'/></a></div>

Anda juga dapat merubah gambar/ image dan posisinya sesuai selera anda.

7. Klik save tamplate, selesai.
&. Selamat mencoba dan salam blogging..!!!

Thx to: deconstructioncode.blogspot.com

internet marketing
Bagi anda yang ingin belajar PHP / HTML / MySQL dengan sangat mudah sambil langsung praktek, saya sarankan untuk anda bisa belajar di sini

0 komentar:

Posting Komentar

Silahkan tinggalkan pesan dan komentar anda di kolom bawah ini. Segala komentar yang mengandung unsur SARA akan kami hapus.