Tutorial seterusnya ialah cara nak buat button back to top. Widget ini amat sesuai bagi blogger yang mempunyai artikel yang panjang. Ia membantu memudahkan pelawat blog anda. Jom ikuti tutorial ini.
Step :1
Pergi ke Dashboard > Design > Edit HTML > Klik Expand Widget Templates,
Step 2:
Tekan ctrl+F pada keyboard anda dan paste kod dibawah ke dalam kotak find.
</body>
Step 3
Copy code ni dan paste di atas kod </body> .
<style type="text/css">
#amazi {-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; width:100px;background-color: #cococo;background-color: rgba(238, 238, 238, 0.6);filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#99EEEEEE',EndColorStr='#99EEEEEE');text-align:center;padding:5px;position:fixed;bottom:10px;right:700px;cursor:pointer;color:#444;text-decoration:none;border:1px solid #C9C9C9;}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<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() {
$("#amazi").scrollToTop();
});
</script>
<a href='#' id='amazi' style='display:none;'>Back to Top </a>
Step 4:
Save !
Selamat berblogging. Tinggalkan link anda di bawah.
