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.
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 "]]>".
#BackToTop {background:transparent url("http://3.bp.blogspot.com/-5zJJBEXUywY/VLgmSo-cTyI/AAAAAAAAOuw/wnjKJsve5Bk/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 "http://3.bp.blogspot.com/-5zJJBEXUywY/VLgmSo-cTyI/AAAAAAAAOuw/wnjKJsve5Bk/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 "
".
//
eval(function(p,a,c,k,e,r){e=function(c){return(c35?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=$(\'\',{L:\'3\',M:\'#b\',j:\'\'+1.g+\' \'}).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
});
//]]>
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):
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 "".
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 "
