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