Botão voltar ao topo da página para Blogger

Olá galera, vou mostrar como colocar um botão (ou  imagem como queira) que aparece no final da página do seu blog permitindo ao leitor clicar e subir ao topo da página novamente, esse efeito é muito bonito e muito útil também.

Apesar de ser um efeito bem interessante ele é muito simples para ser implementado. E lembrando que essa dica é para o Blogger.

Você pode ver um exemplo do botão no blog abaixo do lado direito assim que você chega ao final da página.

Visualizar um exemplo!

Botão voltar o topo

1º Passo: Entre no painel do seu Blogger e clique em “Modelo” e depois em “Editar HTML“:

231978

2º Passo: Aperte as teclas Ctrl+ F e pesquise por: ]]></b:skin> e logo acima desse código cole o código abaixo:

/* to top */
#toTop {
width:50px;  /* Largura do botão*/
height:50px; /*Altura do botão*/
background: transparent; /*Cor do fundo do botão*/
padding:5px; /* Distancia entre texto e borda */
position:fixed; /* Posição que faz com que ele corra por toda a página*/
bottom:50px;  
right:50px;
cursor:pointer;
opacity:0.3; /*Definição para opacidade da imagem*/
}

Ficando dessa forma:

87454

3º Passo: Novamente aperte Ctrl + F e pesquise agora por: </body> e logo acima dele cole o código abaixo:

<a href='#' id='toTop'><img src='http://2.bp.blogspot.com/-w2qH1HmOp_c/ULAfRMigqBI/AAAAAAAAE3E/13iQMVeiyDc/s1600/icon+to+top.png'/></a>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(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>

Ficando dessa forma:

2178789

Clique em “Visualizar modelo” e caso esteja funcionando clique em “Salvar modelo” e pronto!.