Home » » Tips Cara Membuat Tombol Kembali Keatas Pada Blog

Tips Cara Membuat Tombol Kembali Keatas Pada Blog

Ditulis Oleh Beny Setiawan pada Minggu, 10 Juni 2012

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.

DiPosting Oleh : Beny Setiawan ~ Pakbendot.com

Artikel Tips Cara Membuat Tombol Kembali Keatas Pada Blog ini diposting oleh Beny Setiawan pada hari Minggu, 10 Juni 2012. Terimakasih atas kunjungan Anda, serta kesediaan Anda membaca artikel ini. Kritik dan saran dapat anda sampaikan melalui kotak komentar.Wassalam..

:: HOME::

Share this article :
Comments
0 Comments

0 komentar:

Poskan Komentar

Silahkan Komentar dengan Baik Dan benar