Rabu, 14 April 2010

cara membuat "back to top" di blogspot

bisa kamu lihat , pada blog ini terdapat panah kecil berwarna biru muda di sebelah kanan bawah yang selalu mengikuti bila mouse kamu discroll ke bawah .. coba di klik , pasti bakal keatas secara otomatis .. , yap .. itulah fungsi back to top . back to top adalah shortcut yang berfungsi untuk kembali keatas secara otomatis .. bila kamu mau , kamu bisa kok mengikuti tutor yang singkat ini .. , berikut langkah-langkah cara membuat "back to top" di blogspot :

1. sign in ke blogger

2. di dashboard klik tata letak

3. klik edit html

4. lalu centang kotak kecil yang bernama expand template widget

5. cari kode </head> lalu copy paste kode berikut diatasnya(gunakan fasilitas ctrl+f buat mencari)


<!-- SCROLLING BACK-TO-TOP -->
<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(){
$(&#39;a[href*=#top]&#39;).click(function() {
if (location.pathname.replace(/^\//,&#39;&#39;) == this.pathname.replace(/^\//,&#39;&#39;)
&amp;&amp; location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length &amp;&amp; $target || $(&#39;[name=&#39; + this.hash.slice(1) +&#39;]&#39;);
if ($target.length) {
var targetOffset = $target.offset().top;
$(&#39;html,body&#39;).animate({scrollTop: targetOffset}, 1000);
return false;
}
}
});
});
</script>
<!-- SCROLLING BACK-TO-TOP END -->


6. cari kode <body> lalu sisipkan atribut id='top' sehingga hasilnya menjadi seperti ini
<body id='top'>

7. cari kode </body> dan paste kode berikut diatasnya


<div id='gotop'>
<a href='#top' title='Go to Top'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi15lgUbOrsBceJVk38t50SlWWVQuUu9OQE-K731FzUstEI9OjInkGltEpaygie0BVgx6Tb5U6j-A1j7GG9eQY-_PmWxxL2a2S3xZBmUz4zOyOWvArMt5SyAph74Q57I6dxXQnw0e3OGKg/s400/arrow1-blue-32.png' style='right:20px;bottom:20px;position:fixed'/>
</a>
</div>


8. klik pratinjau untuk cek apakah ada atau tidak tanda panah kecilnya

9. kalo sudah ada klik simpan

nah .., sekarang fasilitas shortcut back to top sudah ada di blog kamu
selamat mencoba .. , dan semoga berhasil ^_^
Posted by rafli pratama at 07.22
Category:

0 comments:

Posting Komentar

Gimana pendapat kamu tentang artikel ini? Komentar aja disini, tapi yang sopan yah.. Jika sempat saya akan berikan komentar balik bagi kalian yang berkomentar di artikel ini.. Monggo bila berkenan di klik iklannya.. hehe