skip to main | skip to sidebar

quinta-feira, 18 de agosto de 2011

Como colocar Botão de Ir ao Topo no Blog?


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 , coloque os scripts:


2- Coloque no CSS* do template o seguinte trecho:
#back-top {
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;}

*CSS: pode ser logo após do trecho:
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

0 comentários:

Postar um comentário