Botão “Voltar Ao Topo do Blog” Com CSS3 E Jquery

Botão voltar para o Topo muito usado em blogs, essa ferramenta facilita muito o tempo do usuário na hora de voltar para o topo da página e sem precisar de rolar o "mouse", bem prático isso né! O legal também é que, no Botão, nele é utilizado estilo CSS3 e JQuery que no qual da o efeito no botão de aparecer e desaparecer suavemente, muito legal. Então, vamos aprender a colocar no Blog...





Para colocar no Blog a gente irá precisar inserir alguns códigos no HTML do Blog, é bem fácil de fazer e não é complicado para quem é iniciante, vamos lá então.

Como colocar Botão Voltar ao Topo do Blog

1º Passo: Acesse o painel de edição do seu Blog e clique na opção MODELO >> depois em EDITAR HTML.

2º Passo: Agora, no HTML do Blog clique em qualquer parte do código e pressione as teclas de atalho "Ctrl+F" do seu teclado para pesquisar e encontrar esta seguinte Tag:

]]></b:skin>

3º Passo: Após ter encontrado a Tag, logo acima dela acrescente este seguinte código:

/* Botão voltar ao Top */

#toTop {

width:50px; 

background: #1E90FF; 

border:1px solid #000; 

text-align:center; 

padding:5px; 

position:fixed; 

bottom:5px;

right:5px;

cursor:pointer;

color: #eee;

text-decoration:none;

font-weight: 700;  

-moz-border-radius:5px; 

-khtml-border-radius:5px;

-webkit-border-radius:5px;

border-radius:5px; 

} 

4º Passo: Agora, utilize novamente as teclas de atalho "Ctrl+F" e encontre esta segunda Tag:

</body>

5º Passo: Quando encontrar a segunda Tag, logo acima da mesma acrescente esse outro código:

<a href='#' id='toTop'>&#9650;Topo</a>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'> 

/*----------------------- 

* jQuery Plugin: Scroll to Top 

* by Craig Wilson, Ph.Creative (http://www.ph-creative.com) 

* 

* Copyright (c) 2009 Ph.Creative Ltd. 

* Description: Adds an unobtrusive &quot;Scroll to Top&quot; link to your page with smooth scrolling. 

* For usage instructions and version updates to go http://blog.ph-creative.com/post/jquery-plugin-scroll-to-top.aspx 

* 

* Version: 1.0, 12/03/2009 

-----------------------*/

$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr(&quot;href&quot;);if($(window).scrollTop()!=&quot;0&quot;){$(this).fadeIn(&quot;slow&quot;)}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()==&quot;0&quot;){$(scrollDiv).fadeOut(&quot;slow&quot;)}else{$(scrollDiv).fadeIn(&quot;slow&quot;)}});$(this).click(function(){$(&quot;html, body&quot;).animate({scrollTop:0},&quot;slow&quot;)})}});

  $(function() { 

                $(&quot;#toTop&quot;).scrollToTop(); 

            }); 

        </script>

Pronto, depois é só clicar em Visualizar Modelo e verificar se tudo ocorreu tudo bem, e em seguida Salvar modelo.

Editando o Botão 

Se você preferir mudar as cores do botão, basta você alterar as seguintes partes:

• Alterar a cor de Fundo: Basta substituir a parte destacada em em vermelho "#1E90FF" por uma outra cor em HTML. (Para escolher uma cor em HTML clique aqui)
• Cor da borda:  Substitua a parte destacada em cor azul " #000" por uma outra cor em HTML.
• Cor da Letra: Substitua a parte destacada em cor de Rosa "#eee" por uma outra cor em HTML.
• Tamanho do Botão: Altere o valor destacado em Negrito "700".

Imagem no lugar do Botão

Agora se você tiver a intenção de colocar uma imagem no lugar do botão, basta você substituir a seguinte parte destacada em cor verde "&#9650;Topo", por este trecho mostrado logo abaixo: 

<img src="URL da sua imagem"> </img>

E na parte destacada em cor Azul, você vai substituir pelo endereço URL da imagem.

URL da sua imagem 

Prontinho, só visualizar o modelo e depois salvar.