Botão Subir/Descer com efeito deslizante (e mais brindes para seu blog!)

em 4 de dezembro de 2014

Não é de hoje que me pedem pra ensinar esse botão Subir/Descer que uso no blog há tempos.
Não é simples, mas com um pouco de atenção e paciência todo mundo vai conseguir fazer.
Vamos lá?

Para começar você precisa editar as imagens de Subir e Descer.
Sim, trata-se de uma imagem, não de texto.
As medidas das minhas são 50px de largura por 22px de altura. Mas isso pode variar dependendo de suas imagens.
O importante é alterar no código essas medidas caso sejam diferentes do meu exemplo.
Também pode retirar a borda caso use a imagem do círculo rosa que disponibilizo abaixo, por exemplo.
Pode mudar a cor da borda, pode tirar, pode trocar a cor de background que está em transparent  pelo código da cor que desejar, sempre precedido do sinal #.
Use a imaginação, faça testes, divirta-se!


Com suas imagens prontas hospede-as para conseguir o endereço http delas.
Clique aqui e aprenda como hospedar imagens usando o próprio Blogger

Colocando os botões Subir e Descer no blog

Agora chegou a parte legal, vamos colocar no blog.
Sugiro que faça antes em um blog de testes, para "pegar o jeito", tá?

Clique na aba Modelo de seu blog.
Depois clique em Editar HTML e dentro da caixa de código tecle Ctrl+F.
Na barra de busca que abrir digite ]]></b:skin> e tecle Enter para localizar.
ACIMA dessa tag de fechamento cole este 1º código:

Copiar o 1º código

Preste atenção!
Deixei marcado no código as partes que podem ser editadas, sendo que a essencial é colocar o endereço das imagens nos lugares determinados.

Agora, dentro da barra de busca digite </body> e novamente tecle Enter pra localizar.
Acima da tag encontrada cole este 2º código:

Copiar o 2º código

Neste segundo código você não deve mexer em nada, tá? É o script que faz o recurso funcionar.
Salve as alterações e voilà! Está prontinho.


Brindes para você

Quer presente?
Sim, tem!
Fiz alguns modelos de imagens Subir/Descer para você. Estão com fundo transparente.
Salve em seu pc e use à vontade, tá?
Só não pode postar as imagens em seu blog dizendo ou dando a entender que foram feitas por você.















Caso prefira usar ícones diferentes veja esses, gratuitos, do site Flaticon.
Se gostou do tutorial recomende-o no Google+, no Facebook ou em outra rede social que preferir.
Isso ajuda o blog a crescer e ser cada vez mais útil e bom para você, querido leitor!


Alguém que escreve. Especialista em si mesma. Leitora que lê muito menos do que gostaria. Blogueira por paixão e profissão. Propriedade da Princesa e da Menininha, e de um cachorrinho muito levado chamado Bloguinho. Tentando viver. Sempre.

41 comentários , comente também!

  1. Mais uma dica boa!!! E com presente! Você é o máximo, amiga!
    Obrigada por dividir.
    Beijocas,
    Cris

    ResponderExcluir
  2. Este comentário foi removido pelo autor.

    ResponderExcluir
    Respostas
    1. Diego, desculpe, foi erro meu, barrinha demais...
      Já corrigi.

      Excluir
  3. Seus posts sempre nos ensinam muito, acho que vou criar um blog e usar todas as dicas que ja deu e er como me saio rsrs

    Os seguidores do Café entre amigos elegeram os melhores blogs de 2014, parabéns o seu está entre os vencedores. Convido com muito carinho para vi conferir o post e receber o selo especialmente criado para os eleitos.
    http://www.cafeentreamigos.com/2014/12/seguidores-do-cafe-entre-amigos-elegem.html

    ResponderExcluir
  4. Elaine voce como sempre, sempre nos ajudar a melhorar o nosso blog.
    Obrigada pelas dicas.. sempre estou aqui lendo e aprendendo com voce!

    Um forte abraço, Srta Paloma.

    http://blogdasrtapaloma.blogspot.com.br/

    ResponderExcluir
  5. Olha consegui colocar os dois só que não aparece escrito o botão descer.

    ResponderExcluir
    Respostas
    1. Paloma, apague no primeiro código o trecho que está sobrando, background-color: white
      Acho que pode ser isso...

      Excluir
    2. Para aparecer a palavra "descer" só apague o jogo da velha da linha>> background: # transparent url que está antes do url da imagem descer, para ficar igual o da imagem subir>> background: transparent url

      Excluir
    3. Obrigada, Silvana!

      http://imperfeitaselindas.blogspot.com.br/

      Excluir
    4. Obrigada Elaine pelo código! Coloquei ele em 2014 no blog, porém hoje percebi que o botão descer desapareceu.
      Encontrei a dica da Silvana e solucionei o problema.
      Obrigada!!

      Excluir
  6. Sempre ensinando coisinhas bacanas para nossos blogs.
    Parabéns pelo Troféu Xícara de Ouro!
    joturquezzamundial
    Beijos.

    ResponderExcluir
  7. Olá Elaine! Sempre com dicas maravilhosas! Fico com vontade de por tudo em pratica no blog. ;p
    Beijos.

    http://maisquerimel.blogspot.pt/

    ResponderExcluir
  8. Oi Elaine! adorei a dica... tenho medo de fazer as coisas no blog e fazer coisa errada rsrsrs como faço para desfazer isso caso eu não goste? beijos!

    ResponderExcluir
    Respostas
    1. giovanna, antes de aplicar clique em visualizar.
      se você não gostar é só voltar. Beijos :)

      Excluir
  9. Tentei e tentei varias vezes, mas nao deu certo.....serà que tem algum codigo errado, Elaine?

    ResponderExcluir
    Respostas
    1. Adriana, tem certeza?
      É o mesmo código que uso... talvez haja algum script em seu template que esteja causando conflito...

      Excluir
    2. Adriana, eu tbm tentei tentei no meu e não deu certoo. :(

      Excluir
  10. Oi Elaine, passei para agradecer por todas as dicas que você disponibiliza. Já me ajudou tanto... Parabéns pelo Blog. Suas explicações são claras e objetivas, isso facilita muito. Sucesso.

    ResponderExcluir
  11. Elaine, eu fiz tudo o que você mandou mais o meu botão para baixo não aparece. O que eu faco?
    http://nicoleregiane.blogspot.ca/

    ResponderExcluir
  12. Opaaa!! Deixa para la, olhei o comentário acima e consegui. Muito obrigada do mesmo jeito :)

    http://nicoleregiane.blogspot.ca/

    ResponderExcluir
  13. HELP ME :'( Estou muito triste, a palavra DESCER e SUBIR não aparece e já salvei....
    SOCORROOOOOOOOOOOOOOOOOOO

    ResponderExcluir
    Respostas
    1. Patrícia, não são palavras, são imagens.
      Você criou, hospedou e inseriu os endereços das imagens no lugar correto?
      beijosss

      Excluir
  14. Olá Eliane!

    Coloquei os botões SUBIR E DESCER (usei esse rosinha do seu modelo), mas não funcionou!
    Pode me ajudar? :(

    ResponderExcluir
    Respostas
    1. Olá!
      Se você seguiu o tutorial e não conseguiu visite minha loja, este é um dos serviços adicionais que ofereço no catálogo de serviços da loja.
      Aqui:
      http://loja.elainegaspareto.com/2015/03/botao-subirdescer.html

      beijos

      Excluir
  15. Oie!! rsrsrs
    Mto obrigada por dividir. Fiz, deu super certo. Usei uma de suas imagens. Vou agora mesmo colocar nos créditos.

    Beijos

    ResponderExcluir
  16. Oie flor,
    no meu não deu certoo. :/ :(
    fica dizendo que deu erro quando coloco o ultimo codigo.
    como faço?
    Desde já agradeço. beijoss

    ResponderExcluir
    Respostas
    1. Olá!
      Se você seguiu o tutorial e não conseguiu visite minha loja, este é um dos serviços adicionais que ofereço no catálogo de serviços da loja.
      Aqui:

      http://loja.elainegaspareto.com/2015/03/botao-subirdescer.html
      beijos

      Excluir
    2. Elaine, você arrasa demais, mulher! Obrigada <3

      http://imperfeitaselindas.blogspot.com.br/

      Excluir
  17. Oie!
    Muuuito obrigada!
    Como sempre seus tutoriais sempre me ajudam!!

    ResponderExcluir
  18. Oiie! Muuitíssmo obrigada pelo tutorial ^^
    Mas há algo ainda de errado :\
    Os arquivos PNG ficam com borda, alguns até saem recortados :\

    ResponderExcluir
  19. Olá ! Gostaria de colocar apenas o botão de Subir em meu blog, tem alguma forma de inserir apenas ele??

    ResponderExcluir
  20. Fiz tudo certinho e as imagens não aparecem :/

    ResponderExcluir
  21. newsvolleyballbyworld.blogspot.com.br
    obrigado!

    ResponderExcluir
  22. Oi, amo seu blog. Já passei aqui antes e hoje tive tempo de ler com calma. Agradeço a ajuda, mas fiquei com medo de testar..kkkkk. Sou nova nesse meio.... Mas vou tentar em breve. Meu blog é...http://eupensoq.blogspot.com.br/ . beijos e abraços. Voltarei.

    ResponderExcluir
  23. Fiz todo o processo mas as imagens do botão não aparecem...

    ResponderExcluir
  24. coloquei assim...

    .button_up{
    padding:7px; /* posicionamento interno da imagem */
    border:1px solid #fff; /* cor da borda, troque ou exclua se desejar */
    position:fixed;
    background: #transparent urlhttps://4.bp.blogspot.com/-CaDtjKoEsqw/WALG07WuM6I/AAAAAAAAA9k/g1HBrzHR-T0UtUJSD0qln5wckhcK1HW4gCLcB/s1600/seta%2Bpara%2Bcima%2Bblog.png no-repeat top left; /*troque transparent pelo código da cor, caso queira*/
    background-position:50% 50%;
    width:64px; /* largura do botão */
    height:64px; /*altura do botão */
    bottom:125px; /* distância em relação à base */
    right:5px; /* distância da direita */
    white-space:nowrap;
    cursor: pointer;
    border-radius: 3px 3px 3px 3px;
    opacity:0.7;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
    }
    ...mas nada de imagem...se puder ajudar seria ótimo! muito obrigado

    ResponderExcluir
    Respostas
    1. Hum, tem certeza?
      Eu olhei hoje e vi que está funcionando normal, as setas vermelhas.
      Confere?
      bjssss

      Excluir
  25. o meu só fica transparente e não quer entra a imagem que vc recomendou :/

    ResponderExcluir

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…