Bagaimana Cara Memasang Tombol "Back to Top"
1. masuk ke blogger dan pilih Tempate - Edit HTML2. Copas kode CSS berikut ini di atas kode ]]</b:skin>
#MD-StoTop {padding:12px;position:fixed;bottom:5px;right:3px;cursor:pointer;z-index:999}
3. Pasang kode Javascript yang berwarna biru di bawah ini lalu tekkan kodenya di atas kode </head>
<script type='text/javascript'>
$(function() {
$.fn.scrollToTop = function() {
$(this).hide().removeAttr("href");
if ($(window).scrollTop() != "0") {
$(this).fadeIn("slow")
}
var scrollDiv = $(this);
$(window).scroll(function() {
if ($(window).scrollTop() == "0") {
$(scrollDiv).fadeOut("slow")
} else {
$(scrollDiv).fadeIn("slow")
}
});
$(this).click(function() {
$("html, body").animate({
scrollTop: 0
}, "slow")
})
}
});
$(function() {
$("#MD-StoTop").scrollToTop();
});
</script>
$(function() {
$.fn.scrollToTop = function() {
$(this).hide().removeAttr("href");
if ($(window).scrollTop() != "0") {
$(this).fadeIn("slow")
}
var scrollDiv = $(this);
$(window).scroll(function() {
if ($(window).scrollTop() == "0") {
$(scrollDiv).fadeOut("slow")
} else {
$(scrollDiv).fadeIn("slow")
}
});
$(this).click(function() {
$("html, body").animate({
scrollTop: 0
}, "slow")
})
}
});
$(function() {
$("#MD-StoTop").scrollToTop();
});
</script>
4. Pasang kode HTML berikut ini di atas kode </body>
<a href='#' id='MD-StoTop'><img alt='back to top' src='http://2.bp.blogspot.com/-USm_7qiKVXc/UxUYG09tz_I/AAAAAAAACTA/6BRDkVAwLek/s1600/backtotop.PNG'/></a>
5. yang berwarna merah di atas adalah gambar yang bisa anda rubah dengan gambar anda sendiri lalu jika sudah klik Save Template!
silahka di lihat hasilnya, ya.. terima kasih dan selamat mencoba.
0 comments:
Post a Comment