Hari ini saya sudah posting 4 new post sekaligus. salah satunya ini juga. saya juga sudah lelah ngetik, jadi langsung saja Step By Step
1. Silahkan login ke blogger
2. Kemudian tujulah bagian Racangan
3. Dan pilih yang Edit HTML
4. masukan kode di jquery ini, di atas kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <!-- jika di template anda sudah terdapat script jQuery 1.3.2, maka anda tidak perlu lagi 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 Ganti kode <body> dengan kode <body id='top'>
6. letakan kode di bawah ini, di atas kode </body>
<div id='gotop'>
<a href='#top' title='Go to Top'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1DV9qlocE82ONEljdfNfrs6ygjBDlKr0ItlzMi_XeapLISUo-MGvjz2EPsXuQnBirJDRaxj1XjdQ0DN-1X84OMgXI8sAyU6ffhE0PYdfb1IQGHi_uep2o2dFFVKIwdWWWMezilxBQvdog/s768/top.gif' style='right:20px;bottom:20px;position:fixed'/>
</a>
</div>
7. Selesai, dan silahkan menikmati back to top jquery
Yang berwarna biru bisa diganti dengan gambar milik anda sendiri
2. Kemudian tujulah bagian Racangan
3. Dan pilih yang Edit HTML
4. masukan kode di jquery ini, di atas kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <!-- jika di template anda sudah terdapat script jQuery 1.3.2, maka anda tidak perlu lagi 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 Ganti kode <body> dengan kode <body id='top'>
6. letakan kode di bawah ini, di atas kode </body>
<div id='gotop'>
<a href='#top' title='Go to Top'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1DV9qlocE82ONEljdfNfrs6ygjBDlKr0ItlzMi_XeapLISUo-MGvjz2EPsXuQnBirJDRaxj1XjdQ0DN-1X84OMgXI8sAyU6ffhE0PYdfb1IQGHi_uep2o2dFFVKIwdWWWMezilxBQvdog/s768/top.gif' style='right:20px;bottom:20px;position:fixed'/>
</a>
</div>
7. Selesai, dan silahkan menikmati back to top jquery
Yang berwarna biru bisa diganti dengan gambar milik anda sendiri
5 komentar:
tipsnya mudah dan bermanfaat sob, dicoba neyh
@Asrizal Wahdan Wilsaoke makasih commentnya
Wah,ganti template...mantap...
gimana caranya agar icon top tersebut tetap berada di pojok bawah?nampak terus walapun discroll halamannya.
@Suparyanto jika menggunakan efek jquery memang sepeti itu, jdi saat posisi berada benar2 di atas back to top tidak akan ada, namu ketika bergeser ke bawah sedikit saja maka back to top akan muncul. itu yg saya tau
nice post mas.....
salam knl ya.......
jika berkenan silahkan mmapir balik
Post a Comment
Kotak Komentar Klasik Klik Di sini