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

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

Read More

Membuat Tombol Back to Top Menggunakan Jquery 1.4.3

Tombol Back to Top berfungsi untuk memudahkan pengunjung untuk kembali ke bagian atas dari suatu halaman. Tombol Back to Top nantinya akan terlihat di pojok kanan bawah apabila pengunjung mengarahkan scrollnya ke halaman bawah pada Blog Anda. Untuk yang ingin membuat tombol back to top atau tombol kembali ke atas menggunakan Jquery versi 1.4.3, silahkan ikuti langkah berikut ini.

hasilnya akan seperti gambar ini

1. Login ke Blogger > Edit HTML
2. Cari kode ]]></b:skin>
3. Letakkan kode berikut ini di atas kode ]]></b:skin>

#toTop {
    width:70px;
        border:1px solid #ccc;
        background:#f7f7f7;
        opacity:0.8;
        text-align:center;
        padding:5px;
        position:fixed;
        bottom:10px;
        right:10px;
        cursor:pointer;
        display:none;
        color:#333;
        font-family:verdana;
        font-size:11px;
}

4. Kemudian cari kode penutup </head> lalu pasang kode berikut di atas kode </head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
    $(window).scroll(function() {
        if($(this).scrollTop() != 0) {
            $('#toTop').fadeIn();   
        } else {
            $('#toTop').fadeOut();
        }
    });

    $('#toTop').click(function() {
        $('body,html').animate({scrollTop:0},800);
    });   
});
</script>

5. Setelah itu cari lagi kode </body> dan pasang kode berikut di atas </body>

<div id="toTop">^ Back to Top</div>

6. Save template dan lihat hasilnya.

Read More