0 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...

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQuSyTXhWEsoG20QVSp2jtc2A4cDwXVzn6uCAD0nu8rGV7W6SUtc3PAqH8tDM1CUMLjkU2-rmqtPqtmKwHtSaoPS0UJEWyIlfVm8laBzeGzSvRnKk-DhoVwiJGpbGGnenNhvvNiVzHmQQQ/s1600/return_top.png) no-repeat left top; }
a:hover#scroll-to-top{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQuSyTXhWEsoG20QVSp2jtc2A4cDwXVzn6uCAD0nu8rGV7W6SUtc3PAqH8tDM1CUMLjkU2-rmqtPqtmKwHtSaoPS0UJEWyIlfVm8laBzeGzSvRnKk-DhoVwiJGpbGGnenNhvvNiVzHmQQQ/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.

Note :

* Ganti Url Yang Berwarna Hijau Dengan Alamat Photo Yang Anda Inginkan ^_^

Artikel Terkait :