Kamis, 20 Januari 2011 di Kamis, Januari 20, 2011 | By: Faris Setiawan Bastomi

Membuat Back to Top



Kadang setelah membaca sebuah artikel, kadang kita ingin kembali ke bagian atas suatu blog, males juga kan kalo harus scroll ke atas beberapa kilometer gitu (majas hiperbola)?
Nah, karena saya orang baik hati yang akan membantu teman-teman semua biar gag perlu scroll berkilo-kilo ke puncak suatu blog, , ,
kini saya akan memberi tutorial tentang icon back to top yang fungsinya membawa kita kembali ke bagian atas blog,,,,

  1. masuk ke edit HTML
  2. letakkan kode berikut 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(){
    $(&#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>
  3. ganti kode <body> dengan <body id='top'>
  4. kemudian letakkan 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/AVvXsEhKvxfPlMQqIhZ7PQdnwXDRbkOF0knOi9YPfmlHdhmS-u9jxfvAqc98HFVWr_20GPkxd9DM1wtfHPPqzUQ92ZHl9ArCY7BxAzMFIyA2yhOyZq3nTBCkY82Ya3DQELc-r-fOoYkd3PQoCP5I/s768/top.gif' style='right:20px;bottom:20px;position:fixed'/>
    </a>
    </div>
  5. simpan template
  • kode berwarna merah di atas bisa kamu ganti dengan gambar kamu sendiri
Lihatlah, pada blog kamu sekarang, ada ikon baru, Seperti yang ada di blog saya di bagian bawah kanan, terdapat ikon yang berfungsi mengembalikan pada bagian atas,kliklah dan,,,
Voila!!!
berjalan ke atas!!!
Enjoy,,,
(^_^)



Artikel Terkait:

>

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)