Membuat Tombol Back to Top Part II

Sebelumnya saya telah membuat tutorial Tombol Back to Top, Nah kali ini akan melanjutkan tutorial membuat tombol back to top dengan versi yang berbeda. Script ini juga menggunakan jQuery 1.4.3 namun sedikit berbeda dengan postingan sebelumnya karena menggunakan sebuah gambar atraktif yang menurut saya sangat keren, hehehe...
Cara membuat tombol back to top
Untuk demo silahkan cek dimari

Langsung saja untuk cara membuat tombol back to top atau tombol kembali ke atas ikuti langkah berikut.
1. Login ke Blogger > Edit HTML
2. Sebaiknya backup dulu template anda
3. Cari kode ]]></b:skin>
4. Letakkan kode berikut ini di atas kode ]]></b:skin>
a#scroll-to-top{position:fixed; right:15px; bottom:15px; width:18px; height:99px;display:block; background:url(http://2.bp.blogspot.com/-X9jrJl51jLc/T7q8-_vABZI/AAAAAAAAA1g/gqyJ7WAflnU/s1600/return_top.png) no-repeat left top; }
a:hover#scroll-to-top{ background:url(http://2.bp.blogspot.com/-X9jrJl51jLc/T7q8-_vABZI/AAAAAAAAA1g/gqyJ7WAflnU/s1600/return_top.png) no-repeat right top; text-decoration:none; }
5.Lalu cari kode penutup </head> dan letakkan kode berikut ini di atasnya
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js'/>
<script type='text/javascript'>
jQuery.noConflict();
jQuery(function($) {
    var upperLimit = 100;
    var scrollElem = $('a#scroll-to-top');
    var scrollSpeed = 500;
    scrollElem.hide();
    $(window).scroll(function () {            
        var scrollTop = $(document).scrollTop();       
        if ( scrollTop > upperLimit ) {
            $(scrollElem).stop().fadeTo(300, 1);
        }else{       
            $(scrollElem).stop().fadeTo(300, 0);
        }
    });
    $(scrollElem).click(function(){
        $('html, body').animate({scrollTop:0}, scrollSpeed); return false;
    });
});
</script>
6. Kemudian yang terakhir cari kode </body> lalu pasang kode berikut tepat di atas </body>
<a id="scroll-to-top" title="Back to Top" href="#" style="display: block; opacity: 1;"></a>
7. Simpan template dan lihat hasilnya.

12 Responses to "Membuat Tombol Back to Top Part II"

  1. gan tolong ajarin.
    kan kemarin posting "cara pasang tombol share (twit.google+ n like)"
    nah itu bisa di tambahain follow twit gak?
    bls?

    BalasHapus
  2. cek disini http://pastebin.com/qtc5N2Ph

    Ganti username dgn username twitter kamu.

    BalasHapus
  3. tolong ajarin cara pasang page fans fb melayang di atas kiri blog ya sob...saya tunggu

    BalasHapus
  4. aq juga mau donk di "ajarin cara pasang page fans fb melayang di atas kiri blog"

    BalasHapus
  5. gan tanya. gimana ngatur tanggal & jam di postingan artikel. cz kmren saya posting jam 10 pagi kok do tampilan postingan jam 8 malam gmna tuh ada solusinya gak

    BalasHapus
    Balasan
    1. pergi ke setelan -> bahasa dan pemformatan -> atur di zona waktu, untuk jakarta GMT +07:00

      Hapus
    2. sep gan membantu. oh ya tanya lagi. gimana cara menampilkan tanggal postingan???

      Hapus
  6. mantap sob infonya,,, coba dulu ne. salam sukses selalu sob...

    BalasHapus
  7. makasih banyak buat infonya,, nice post

    http://goo.gl/ANZCYq

    BalasHapus