Tombol back to top ini sangat penting untuk di pasang pada blog sobat tujunya agar pengunjung blog sobat tidak perlu bersush payah menggulirkan mouse untuk kembali ke bagian header blog,Ini sangat di perlukan apa lagi jika isi dari konten blog sobat memakan lahan yang cukup luas dari header ke bgian fotter.
Caranya sebagi berikut ;
1."Login ke akun blogger" > "Edit HTML" > " Cari code ]]></b:skin>" > "Jika sudah ketemu simpan Css di bawah ini tepat di atas code "]]></b:skin>"
.kembali-ke-atas {2.Selanjutnya masih di bagian "Edit HTML" cari code "</body>" jika sudah ketemu simpan code di bawah ini tepat di atas code "</body>"
position:fixed;
bottom:20px;
right:20px;
background: url("http://sepatutrends.com/catalog/view/theme/sepatutrends/image/top_scroller.png") left top no-repeat; <-ganti url gambar ini sesuai keinginan anda->
width:19px;
height:20px;
}
.kembali-ke-atas :hover {
background: url("http://sepatutrends.com/catalog/view/theme/sepatutrends/image/top_scroller.png") left -30px no-repeat; <-ganti url gambar ini sesuai keinginan->
}
.kembali-ke-atas a {
padding:20px ;
display:block;
}
<div class='kembali-ke-atas' id='kembali'><a class='kembalikeatas' href='javascript:void(0)' title=''></a></div>3.Periksa kembali semuanya jika sudah benar "Save Template" sobat.selesai
<script type='text/javascript'>
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#kembali').fadeIn();
} else {
$('#kembali').fadeOut();
}
});
});
jQuery('.kembalikeatas').click(function(){
jQuery('html, body').animate({scrollTop:0}, 'slow');
});
</script>
Itulah 3 langkah cara pasang tombol back to top,Dan silahkan baca juga arikel lainya terkait tutorial blogspot,Selanjutnya...
Advertisement