Apa kabar sobat ? lama blog ini tidak di update karena kesibukan sehari hari tapi sore ini saya coba memposting seputar tutorial blog yaitu bagaimna Cara Membuat tombol Back To Top Pada Blog.sebenarnya materi ini boleh dibilang sudah lawas karena hampir semua bloger sudah pernah membahas tentang materi ini.tapi sekedar melengkapi isi artikel di blog ini tidak ada salahnya saya coba menuliskannya kembali buat sobat sekalian.
Menu Back To Top berfungsi untuk menggeser halaman blog dari bawah ke posisi atas halaman blog dengan sekali klik dimana fungsi ini sangat membantu ketika kita sudah berada jauh dibawah halaman blog dan ingin kembali ke halaman atas.menu back to top ini akan kelihatan lebih halus pergerakannya karena menggunakan bantuan jquery.
Baik langsung saja kita mulai bagaimana cara membuat tombol Back To Top Pada Halaman Blog.
1. Silahkan sobat login ke blogger
2. Kemudian pilih bagian Racangan
3. Dan pilih yang Edit HTML
4. Pada menu Edit HTML cari kode </head> ( untuk mempermudah pencarian sobat bisa tekan Ctrl+F pada keyboard)
5. Setelah ketemu masukan kode dibawah ini tepat diatas kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <!-- jika di template sobat sudah terdapat script jQuery 1.3.2, maka sobat tidak perlu menambahkan kode ini -->
<script type='text/javascript'>
$(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>
5. Kemudian cari kode <body> dan ganti dengan kode <body id='top'>
6. Cari lagi kode </body> dan letakkan kode dibawah ini debawah kode </body>
<div id='gotop'>
<a href='#top' title='Go to Top'>
<img src='http://i760.photobucket.com/albums/xx247/abila_photo/ Back_to_Top.png' style='right:20px;bottom:20px;position:fixed'/></a></div>
7. Terakhir kilk simpan dan Selesai.
Keterangan : Silahkan ganti kode berwarna biru dengan URL gambar sobat
Demikian Cara Membuat Tombol Back To Top dengan Jquery semoga bermanfaat.
0 komentar:
Post a Comment