CPT - Centro de Produções Técnicas

Como colocar botão “Voltar ao Topo do Blog”


"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.
Se seu blog tem a página grande é chato pra quem visita, ter que subir tudo de novo, e sabendo que tem um botão o visitante se anima em passear pelo site, e com isso, quem sabe gerar mais visitas nas páginas.

O botão é feito no estilo CSS3 e JQuery que dá o efeito no botão de aparecer e desaparecer suavemente.
Para colocar no Blog vamos precisar inserir alguns códigos no HTML 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.  

Fonte: vdb.2cmultimidia.com