Simpan » Diposting oleh Unknown » Rabu, 27 Juni 2012 »
permalink

Rabu, 27 Juni 2012
Unknown
No comments

Membuat 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglXs5sHx-XpFe0XwvQVliioCzhLJOAq1sB6rzUIFEGkg3Rg6Tq4XptZ1OogCXLtkoGoG_CiqVcctNIq_zN8EG4mYnA6o4aIbZPHc2leeGGLGF7iTUCsLi8vKwpRyC5KiI3F6aNWo8BbEfZ/s1600/return_top.png) no-repeat left top; }

a:hover#scroll-to-top{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglXs5sHx-XpFe0XwvQVliioCzhLJOAq1sB6rzUIFEGkg3Rg6Tq4XptZ1OogCXLtkoGoG_CiqVcctNIq_zN8EG4mYnA6o4aIbZPHc2leeGGLGF7iTUCsLi8vKwpRyC5KiI3F6aNWo8BbEfZ/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.


Reaksi:

0 komentar:

Ayo komentar kamu yang pertamax wa di Membuat Tombol Back To Top

 
powered by blogger.com 4sek4w4n mobile template

Ads