Código para criar um botão voltar ao topo no Blogger

O botão voltar ao topo gerado por este código javascript, será ativado quando o usuário rolar a página do seu blog. Esse modelo é muito melhor, do que os botões que só aparecem quando o usuário chega no rodapé da página! Através do CSS, você poderá controlar onde o botão irá aparecer na página do seu blog. Não há necessidade de fazer nenhuma alteração neste código, basta seguir as instruções para instalar no seu blog.


Imagem: www.spaceanswers.com
Mas, antes instalar o código, não esqueça de fazer backup do template do seu blog (painel de controle ==> modelo ==> Fazer backup/Restaurar ==> Fazer download do modelo completo)! Depois, clique em "Editar HTML".

Este é o código CSS. Adicione este código, acima de "]]></b:skin>".

#BackToTop {background:transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-NAC2jLmqjgnRzKbCbjTMveUlNsnMAhPk5CDhQQcdBJXEIJB18xG2Y9vQB2xVEpMT0-pJiJraqKnqIv2rk4HPPXnhLDz6DoWxX_-pmlNQqKzETMdJp-LaiBqvxdwxW3wQQtIXthxfskY/s1600/up.png") no-repeat scroll top;opacity: 0.5;bottom: 2%;display: none;height: 35px;overflow: hidden;position: fixed;right: 5%;text-indent: -800px;width: 35px;z-index: 9999;}#BackToTop:hover {opacity: 0.8;}

Caso você desejar trocar a imagem, basta substituir "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-NAC2jLmqjgnRzKbCbjTMveUlNsnMAhPk5CDhQQcdBJXEIJB18xG2Y9vQB2xVEpMT0-pJiJraqKnqIv2rk4HPPXnhLDz6DoWxX_-pmlNQqKzETMdJp-LaiBqvxdwxW3wQQtIXthxfskY/s1600/up.png", pelo link de outra imagem. Essa imagem não deverá ter mair do que 35x35 pixels.

Para controlar a altura que o botão aparecerá na página do seu blog, personalize isto: "bottom: 2%", troque o "2%" por outro valor - ex: "15%".
Para controlar distância do botão, em relação ao lado direito, personalize isto: "right: 5%", substitua este valor por outro qualquer.

Agora, adicione o código javascript no final da página, logo acima de "</body>".

<script type='text/javascript'>

      //<![CDATA[

eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('(4($){$.3={l:{g:\'N J I\',f:G,n:A,r:\'z\',d:\'9\'},i:4(5){1=$.x({},$.3.l,5),$.3.m();c(1.f)$(w).F(4(){c($(u).q()!=0){k(1.d){8\'p\':2.v(\'7\');6;8\'9\':2.y(\'7\');6;s:2.o()}}B{k(1.d){8\'p\':2.C(\'7\');6;8\'9\':2.D(\'7\');6;s:2.E()}}});$(\'#3\').t(4(e){e.H();$(\'b,j\').K({q:0},1.n,1.r)})},m:4(){2=$(\'<a />\',{L:\'3\',M:\'#b\',j:\'<h>\'+1.g+\'</h>\'}).O(\'b\');c(!1.f)2.o()}};3=4(5){$.3.i(5)}})(P);',52,52,'|opts|divBack|BackToTop|function|options|break|fast|case|slide||body|if|appearMethod||autoShow|text|span|init|html|switch|defaults|_constructLink|timeEffect|show|fade|scrollTop|effectScroll|default|click|this|fadeIn|window|extend|slideDown|linear|500|else|fadeOut|slideUp|hide|scroll|true|preventDefault|top|to|animate|id|href|Back|prependTo|jQuery'.split('|'),0,{}))



jQuery(document).ready(function($){

 BackToTop({

  autoShow : true,

  text : '.',

  timeEffect : 600

 });

});



(function(c){c.fn.scrollTo=function(b){var a={offset:0,speed:"slow",override:null,easing:null};if(b){if(b.override)b.override=-1!=override("#")?b.override:"#"+b.override;c.extend(a,b)}return this.each(function(b,e){c(e).click(function(b){b.preventDefault();var d=a.override?a.override:c(e).attr("href");history.pushState?(history.pushState(null,null,d),console.log(a.easing),c("html,body").stop().animate({scrollTop:c(d).offset().top+a.offset},a.speed,a.easing)):c("html,body").stop().animate({scrollTop:c(d).offset().top+

a.offset},a.speed,a.easing,function(){window.location.hash=d})})})}})(jQuery);



$('#scrollTo').scrollTo({

    speed: 2000

});



$('#scrollToComment').scrollTo({

    speed: 2000

});

//]]>

    </script>

Para o botão funcionar, é necessário que o template do seu blog tenha esta linha de código (caso não tenha esta versão, pode ser outra versão):

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"/>

Vou facilitar as coisas - não precisa ficar procurando essa linha de código! Primeiro você adiciona o CSS e o código javascript, no local indicado, dentro do código fonte do template do seu blog. Salve o template.

Caso o botão não aparecer, adicione este código, logo acima de "</head>".

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"/>

Salve o template ==> visualize o seu blog.

É 99,9% certeza que o botão irá aparecer na página do seu blog. Se mesmo assim, o botão não aparecer, mude o código javascript do botão, adicione o código logo acima de "<body>". Salve o template.