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“:

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:

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

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

$(function() {

$("#toTop").scrollToTop();

});

</script>

Ficando dessa forma:

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

Espaço Blog

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

Botão voltar o topo

Relacionados

One thought on “Botão voltar ao topo da página para Blogger”

Cleiton Lobato

Deixe uma resposta Cancelar resposta