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.
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:
1 2 3 4 5 6 7 8 9 10 11 12 | /* 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:
1 2 3 4 5 6 7 8 9 | <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("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!.