Esta eu vi no WebDesignerWall e achei o efeito bacana. Um botão de 'ir ao topo da página' (Animated Scroll to Top) com JQuery. Para ver como fica, aqui o Demo (role a página para baixo). Vou ensinar a colocar este botão no blogger .
1- Vá em Editar HTML e antes da tag </head>, coloque os scripts:
body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
$(body.background.override)
}
3- No HTML, antes de <footer><div class='footer-outer'>, coloque:
1- Vá em Editar HTML e antes da tag </head>, coloque os scripts:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js' type='text/javascript'/>
<script>
$(document).ready(function(){
// hide #back-top first
$("#back-top").hide();
// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
});
</script>
2- Coloque no CSS* do template o seguinte trecho:
#back-top {*CSS: pode ser logo após do trecho:
position: fixed;
bottom: 30px;
margin-left: -150px;
}
#back-top a {
width: 108px;
display: block;
text-align: center;
font: 11px/100% Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #bbb;
/* transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;}
#back-top a:hover {color: #000;}
/* arrow icon (span tag) */
#back-top span {
width: 108px;
height: 108px;
display: block;
margin-bottom: 7px;
background: #ddd url(http://1.bp.blogspot.com/-sC3qXtoirKo/TdEO99T9TWI/AAAAAAAATbY/e8zExwrL3yM/s1600/up-arrow.png) no-repeat center center;
/* rounded corners */
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
/* transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;}
#back-top a:hover span { background-color: #777;}
body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
$(body.background.override)
}
3- No HTML, antes de <footer><div class='footer-outer'>, coloque:
<div id='back-top'>E pronto. veja como ficou em um dos novos modelos do Blogger.
<a href='#top'><span/>Back to Top</a>
</div>
