MEMBUAT TOMBOL BACK TO TOP

MEMBUAT TOMBOL BACK TO TOP

Untuk mempermudah pengunjung Blog anda dalam mengekplor artikel anda dapat menambahkan tombol Back to Top pada Blog anda.

Cara Pertama: 

Silahkan Copy CSS berikut dan tambahkan Widget pada Tata Letak Blog anda

<style type='text/css' scoped='scoped'>
#BounceToTop{position:fixed; bottom:30px; right:55px; cursor:pointer;display:none}
</style>
<div id='BounceToTop'><img alt='Back to top' src='http://lh4.googleusercontent.com/-cxLItc2inZg/VnpIg_C7N1I/AAAAAAAAO0I/K1ulHLgoxgE/w380-h533-no/RIAU%2BSPIRIT.gif'style="width: 100px; height: 200px;" /></div>

Cara Ke-Dua: 
1. Masuk ke-Template > Edit HTML

2. Cari kode </head> 

3. Copy kode CSS berikut dan taruh diatas diatas kode  </head> :

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>

<script type='text/javascript'>

$(function() { $(window).scroll(function() { if($(this).scrollTop()>100) { $('#BounceToTop').slideDown(200); } else { $('#BounceToTop').slideUp(300); } });

$('#BounceToTop').click(function() { $('body,html').animate({scrollTop:0},800) .animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:10},100) .animate({scrollTop:0},50); }); });

</script>

4.  Widget pada Tata Letak Blog 

<style type='text/css' scoped='scoped'>
#BounceToTop{position:fixed; bottom:30px; right:55px; cursor:pointer;display:none}
</style>
<div id='BounceToTop'><img alt='Back to top' src='http://lh4.googleusercontent.com/-cxLItc2inZg/VnpIg_C7N1I/AAAAAAAAO0I/K1ulHLgoxgE/w380-h533-no/RIAU%2BSPIRIT.gif'style="width: 100px; height: 200px;" /></div>

Jika anda mengalami kesulitan mempraktekkan langkah-langkah diatas, silahkan hubungi saya di Contact.

RELATED POST

Cara Membuat Tulisan Bergerak Mengikuti Kursor di Blog

Merubah Lebar Header Border dan Menu Page Tabs

Cara Mudah Menampilkan Judul Post Saja di Homepage Blog