Tutorial: Colocando botão "Seta para Cima" no blog

segunda-feira, abril 01, 2013




Olá minhas amoras e meus caramelos...Hoje estarei dando continuidade com os tutoriais pedidos nesta semana e ainda com os pedidos da semana passada...

No tutorial de hoje vocês poderão conferir o pedido dos leitores abaixo :









Foram dois comentários, porém com o mesmo pedido... Então eu ficarei muito feliz em poder ajudar ambos... O tutorial de hoje é muito fácil, e explicará como inserir no seu blog esse “botão” que leva a pessoa para o topo da página de duas formas, ou seja ensinarei dois modelos para “subir ao topo” da página.

Para continuar lendo click em MAIS INFORMAÇÕES!




É um tutorial muito útil, principalmente para aqueles bloggers que escrevem muitas postagens todos os dias, os leitores vão lendo e lendo daí chegam no final da página e ficam achando meio “chato” ficar usando a barra de rolagem ou ate mesmo o Scroll Whell do mouse para subir a página...Então é bem mais prático apenas clicar sobre o botão e ir direto para o topo da página.

Os dois modelos que mostrarei a vocês são :

  • SUBIR AO TOPO DE FORMA DIRETA
  • SUBIR AO TOPO DE FORMA DESLIZANTE



þ  SUBIR AO TOPO DE FORMA DIRETA:

Essa forma é bem prática, pois apenas leva ao topo de forma direta como o próprio nome diz, basta clicar e você estará no topo do blogger.

Para isso basta seguir as regras abaixo:

ü     1º) Vá para o seu blog na parte de “LAYOUT”

ü     2º) Clique em “ADICIONAR UM GADGET”

ü     3º) Escolha a opção “HTML/ JAVASCRIPT” e cole o seguinte código:






ü      4º) Após colocar o código você observa que tem escrito no código “LINK DA SUA IMAGEM AQUI” basta apenas trocar isso pelo link da imagem que você quer.


ü     5º) Salve e pronto, estará lá.




þ  SUBIR AO TOPO DE FORMA DESLIZANTE:

Já nesta forma é a que vocês acompanham aqui no blog, ou seja, quando você clica tem um efeito deslizante, e você pode conferir os posts a medida que vai subindo de forma rápida.

Para isso basta seguir as regras abaixo:


ü     1º) Vá para o seu blog na parte de “LAYOUT”

ü     2º) Clique em “ADICIONAR UM GADGET”

ü     3º) Escolha a opção “HTML/ JAVASCRIPT” e cole o seguinte código:





ü     4º) Após colocar o código você observa que tem escrito no código “LINK DA SUA IMAGEM AQUI” basta apenas trocar isso pelo link da imagem que você quer.



ü     5º) Salve e pronto, estará lá.




v                EXTRA: MODELOS DE BOTÕES:


Hey galera, agora como colher de chá eu preparei algumas setinhas e desenhos para que vocês usem em seus bloggers, são cerca de 26 modelos que eu fiz para que vocês possam colocar nos seus respectivos bloggers...

Espero que gostem...Olhem abaixo:




       



        







Ÿ    *  Para usar a imagem basta apenas clicar com o botão direito do mouse sobre a imagem escolhida e clicar em “ABRIR IMAGEM EM UMA NOVA GUIA” quando abrir a imagem em uma nova guia copie o link e insira esse link onde tem “LINK DA SUA IMAGEM AQUI” nos códigos.



 E aí gostaram? Se você pegar algum modelo desses botões deixe um comentário *u* espero que tenham gostado me digam o que acharam do tutorial e dos modelos que eu fiz com carinho :) Beijinhos de Morango!!!


  

OBS: Ambos os códigos eu peguei há algum tempo em alguns bloggers porém como não me lembro se você criou o tutorial é só alertar-me e eu colocarei os respectivos créditos.



You Might Also Like

76 comentários

  1. Oi amiga, vc é d+.
    Adorei a postagem, é muito útil.
    Os modelos são lindos. Principalmente a bonequinha de roupa vermelha. kkkkkkkkkkkkkkkkk
    Brincadeira amei todas.
    Parabéns pelo seu blog.
    Beijocas!

    http://ocantinhodeartesanato.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. hahahaha Obrigada Gil *-* sei porque você gostou da de vermelho...hihihihi

      Beijocas linda!!!

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

      Excluir
  2. adorei o tutorial...achei bem legall
    vou tentar no meu
    bju

    http://aieuvivantagem.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Que maravilha que gostou flor *-* fico muito feli...Obrigada pela visita ...

      Beijocas e volte sempre!!!

      Excluir
  3. Amei o tutorial... você me salvou :)
    http://segredosdacahlima.blogspot.com.br/
    Beijos :)

    ResponderExcluir
    Respostas
    1. hahahahha fico muito feliz querida que tenha lhe sido útil *u*

      Beijocas e volte sempre!!!

      Excluir
  4. O tutorial é bem legal e as imagens que você disponibilizou são lindas!

    http://kelly-club.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Obrigada flor *-* fico muito feliz que tenha gostado...

      Volte sempre és muito bem vinda.

      Beijocas!!!

      Excluir
  5. Oi, muito obrigado pelo tutorial. Adorei eajudou bastante no meu blog! =)

    ResponderExcluir
    Respostas
    1. Fico feliz que tenha gostado querido *u*

      Obrigada pela visita...

      Beijocas e volte sempre!!!

      Excluir
  6. Bem bacana o tutorial, amei as fotinhos paara por na seta!

    Amigas!
    Beijos!

    ResponderExcluir
  7. BOA TARDE - SIGO E PARTICIPO DO SITE DE TODOS OS BLOG
    O seu blog é diversificado sucesso amei, se você puder der uma passadinha no meu blog, por favor retribui a inscrição. Agradeço a todos os blog pelos recados. instragam @nequerenreis
    http://arrasandonobatomvermelho.blogspot.com.br/
    https://www.facebook.com/pages/Batom-Vermelho/490453494347852?fref=ts

    ResponderExcluir
    Respostas
    1. Boa Tarde, e obrigada pela visita e comentário!

      Beijos!!!

      Excluir
  8. Arrasando em todos os tutoriais Hilda!!! Sugestão: tutorial de como linkar a fanpage do blog no blog!!!

    Beijos e continue o trabalho, muito show :D

    ResponderExcluir
    Respostas
    1. Oi Leninha querida obrigada *-* claro farei sim :3

      Beijocas e volte sempre!

      Excluir
    2. como eu pego o link da imagem??? eu aperto com o botão direito do mause e aperto em copiar link e coloco lá no código mas não vai , séra q é pq estou tirando as aspas??? me ajude por-favor estou disisperada pra colocar isso no meu blog

      Excluir
  9. http://potato-of-niall.blogspot.com.br/ é o meu blog e nao ficou o da boneca q eu coloquei e o Menu ali roxo ficou pequeno demais , queria aumentar , ajuda por favor ? e na real eu queria o menu em cima e nao do lado , me ajuda pffffffffffffffffff

    ResponderExcluir
    Respostas
    1. hahaha muitas perguntas num comentário só vamos por partes...Primeiramente não da para aumentar a imagem as que estão ai eu deixei em tamanho médio para que todos pudessem ver, o tamanho delas é razoável...Sobre o menu no site que eu indiquei tem a opção para colocar ele na horizontal e para colocar ele no seu blogger basta que você coloque ele em um gadget em baixo do seu banner com o nome do seu blogger...

      Beijocas volte sempre!

      Excluir
  10. Não , você não entendeu flor , tipo assim . eu não consegui colocar bonequinha , tipo eu fiz tudo oq você pediu aí mas não mudou nada , e quanto o tamanhho é o tamanho do menu ali, e eu não tenho banner , eu ja tentei mas não tem nad aali :(

    ResponderExcluir
    Respostas
    1. Ahh querida você fez tudo em relação ao código? tente fazer com calma passo a passo...Lembre-se de que se for usar uma imagem dessas acima clicar com o botão direito do mouse sobre a imagem e clicar na opção abrir imagem em uma nova guia ai pegar o link da guia e só então colocar no código.

      Sobre o menu no site informado tem as opções de aumentar e diminuir o menu que você deseja, também tem a opção de escolher alguns em formato horizontal porém aquele que vc optou não da para ficar na horizontal infelizmente...

      Beijocas guria ^^ Volte sempre!


      Excluir
  11. Oi, o tutorial foi muuuuito util e os modelos são pfts, mas eu n entendi onde entra esse HTML/ JAVASCRIPT, tem como me ajudar? obg

    ResponderExcluir
    Respostas
    1. Oi querida fico muito feliz que tenha gostado do tutorial ...

      o HTML/JAVASCRIPT aparece quando você clica pra adicionar um gadget no seu Layout do blogger tipo quando você vai no painel do seu blogger do lado esquerdo logo abaixo da opção GANHOS você encontra a opção LAYOUT essa opção é a que você sempre vai usar quando quiser colocar um código em seu blogger...Quando você clicar em Layout você verá a organização do seu blogger e verá "ADICIONAR UM GADGET" ai quando você clicar nisso você verá várias opções de coisas para colocar no seu blogger como opção de colocar +1 do google+, opção de colocar seguidores, opção de colocar tradutor etc....então você vai descer e procura por HTML/JAVASCRIPT fica logo abaixo da opção"CAIXA DE PESQUISA" então você clica no simbolo de + que fica do lado e pronto quando abrir você coloca aquele código lá com o link da sua imagem escolhida do seu botão no espaço em branco e seu botão ficará aqui :) Espero que tenha ajudado guria.

      Beijocas e volte sempre!

      Excluir
    2. Ah! Agora sim eu achei! Muito obrigada! Eu vou continuar tentando aqui!
      http://garotasdistraidaas.blogspot.com.br/

      Excluir
    3. Que bom querida *--* fico feliz de ter ajudado hihihih

      Beijocas e volte sempre!

      Excluir
  12. Oi, adorei seu blog. Muito lindo e estou tentando deixar o meu com um carinha boa ou lindo que nem o seu! Só que infelizmente a imagem de suba ao topo fica com um quadradinho de erro no meu blog. Saberia dizer o porq? E como posso arrumar? Obrigada! Beeeijos

    ResponderExcluir
    Respostas
    1. Olá querida fico muito feliz que esteja arrumando seu blog...A imagem pode estar dando erro devivo a imagem que você escolheu..Tente fazer outra vez os procedimentos acima citados e tente mudar a imagem!

      Beijocas e volte sempre :3

      Excluir
  13. Olá, vim novamente te incomodar.. hahaha A imagem que escolhi foi uma das que você postou, não dando com uma tentei com outras duas e não deu também! E segui passo a passo como nas outras tantas que aprendi aqui no seu blog, só que, essa não deu certo! Tentei as duas: de forma deslizante e de subida direta! :/
    beeijo e parabéns pelo blog e pela iniciativa de ajuda á quem não sabe como deixar o blog assim! *-*

    ResponderExcluir
    Respostas
    1. Oi flor deve ser algum problema então no seu template :( fiz o teste outra vez em um blog de teste que tenho e os códigos ainda se encontram em perfeito estado :/

      Beijocas e volte sempre!

      Excluir
  14. Ah... querida muito obrigada vou tentar muda-lo para ver se corrige esse erro. Não entendo muito sobre blog, tudo que aprendo agora é aqui. Obrigada mesmo pela ajuda e atenção! beeeeijo

    ResponderExcluir
    Respostas
    1. Ohh querida continue tentando :) vai dar certo :3 Obrigada por sua visita e fico feliz que esteja aprendendo coisas aqui...Volte sempre.

      OBS: Qualquer pedido de tutorial não exite em fazer :3

      Beijocas!

      Excluir
  15. Tuto legal,me ajudou muito obg ♥
    Segue meu blog ? http://princesofnoiseof.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Que bom Larissa :D fico realmente feliz *---*

      Obrigada por sua visita querida ...Beijocas e volte sempre !

      Excluir
  16. como cria as imagens queria criar uma é que meu blog é de um desenho e eu queria colocar o mesmo desenho que do meu blog

    ResponderExcluir
    Respostas
    1. Olá Laura, é bom te ver aqui outra vez :) para este botão o mais aconselhável é colocar uma imagem de fundo transparente as famosas PNG, esse tipo de imagem também é chamada de BRUSHES e eu já fiz um tuto de como cria-los , você pode ver esse tutorial aqui :

      http://sorriso-jovem.blogspot.com.br/2013/05/tutorial-aprenda-fazer-seus-brushes-e.html


      Obrigada por sua visita querida.

      Beijocas e volte sempre!

      Excluir
  17. Usei um dos seus modelos, ficou super fofo *-*

    ResponderExcluir
    Respostas
    1. Que bom Cíntia *---* fico bastante feliz que tenha gostado!

      Obrigada por sua visita querida.

      Beijocas e volte sempre que puder ^^

      Excluir
  18. Tem como mudar a posição do botão? Queria que ficasse um pouco mais para dentro, não tão lá no canto. Obrigada!

    ResponderExcluir
    Respostas
    1. Infelizmente não tem como mudar a posição do botão Cíntia :(

      Obrigada por sua visita...Beijocas e volte sempre que puder!

      Excluir
  19. Não sei se o outro comentário foi, me perdoe caso tenha repetido. Tem como mudar a posição do botão? Queria que ficasse mais para dentro e não tão lá no canto. Obrigada!!

    ResponderExcluir
    Respostas
    1. Olá Cíntia seu comentário apareceu sim :) Infelizmente não tem como mudar a posição do Botão em seu blog :(

      Obrigada por seu comentário e visita...Beijocas e volte sempre que puder!

      Excluir
  20. Obrigada estava precisando aqui o que eu usei http://3.bp.blogspot.com/-owQsbxkKzM0/UVoDdC5aEkI/AAAAAAAABC4/Y1hl1HyEoFc/s1600/sorrisojovem09.png

    ResponderExcluir
    Respostas
    1. Oi Ana, fico muito feliz que tenha gostado e utilizado em seu blog *-* espero que possa me visitar mais vezes e deixar um comentário. Desculpe pela demora em te responder, o blog estava parado e somente agora retornou :3

      Excluir
  21. Ficou lindo mas como vc personalizou a barra de rolagem
    http://decorandocomcriatividade.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Oie Giovanna, obrigada por sua visita, desculpe pela demora em te responder, o blog deu uma longa pausa mas já está voltando, aos poucos. Sobre a sua pergunta , eu fiz um tutorial sobre isso:

      http://sorriso-jovem.blogspot.com.br/2013/10/tutorial-aprenda-fazer-uma-barra-de.html

      Espero ter ajudado! Que você possa vir mais vezes por aqui :3

      Excluir
  22. Ownt amei os botões...peguei o azulzinho de cupcake...

    http://lovelyyoudreams.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Oi flor, obrigada por sua visita, fico feliz que tenha gostado, fique a vontade :D Desculpe pela demora em te responder, o blog estava pausado mas já voltou a ativa, espero te ver mais vezes por aqui....Fui visitar o seu blog mas aparece como "não encontrado", espero que não tenha parado de postar :3

      Excluir
  23. Adorei o Tuto Hilda!
    Eu queria adicionar o deslizante, mas ele não funcionou.. então coloquei o que sobe direto e deu super certo!
    As imagens tbm são lindas, inclusive uma delas combinou perfeitamente com meu template, parece até que foi feito para ele.. haha!
    Vem ver... BLOG DOCII ENCANTO -> http://dociiencanto.blogspot.com.br/#

    Bjos!

    ResponderExcluir
    Respostas
    1. Olá Erica! fico feliz que tenha sido útil para você ^_^ desculpe pela demora em te responder, o blog estava parado a algum tempo mas já retornou. Darei uma passada no seu blog com prazer :3 Espero te ver por aqui mais vezes :)

      Excluir
  24. Adorei, mas to tendo um probleminha em acha o local da onde colocar o link da imagem que eu quero no: SUBIR AO TOPO DE FORMA DESLIZANTE, eu copiei o código vi e re vi varias vezes mas não achei..pf me ajuda bjs.. :3

    ResponderExcluir
    Respostas
    1. Oi Vih, desculpe pela demora em te responder, o blog estava pausado mas agora estou atualizando ele novamente. Sobre sua dúvida, as vezes a plataforma blogger apresenta alguns BUGS com certos códigos, caso não tenha funcionado de forma deslizante, tente a outra que provavelmente funcionará :D espero te ver mais vezes por aqui :3

      Excluir
  25. não estou conseguindo :c a imagem que eu escolhi não aparece, eu fiz os passos certinhos mas não aparece :(

    ResponderExcluir
    Respostas
    1. Olá Isabelle, sinto muito pela demora em responder o seu comentário, o blog estava em hiatus mas já está retornando as atividades normais. Sobre sua pergunta, as vezes pode ser um BUG da plataforma BLOGGER ou pode ser um bug do local onde a imagem foi hospedada. Tente salvar a imagem e hospeda-la em outro site de hospedagem, provavelmente o problema é esse. Espero ter te ajudado, que você venha e comente mais vezes por aqui, és bem vinda :3

      Excluir
  26. Oi amore, gostaria de saber como você colocou esse enfeite onde esta escrito "Postado Por:"
    Se poder me ajudar :)

    ResponderExcluir
    Respostas
    1. Oie Mich! Obrigada por comentar,desculpe a demora em te responder...O blog estava pausado mas já está voltando novamente. Sobre a sua dúvida, quando troquei o layout essa já era a formatação do modelo eu não precisei modificar isso. :) Espero te ver por aqui mais vezes :D

      Excluir
  27. Muito bom, vc explica bem direitinho adorei *-* http://musicaselooks.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Olá Dayse, obrigada por comentar em meu blog, desculpe pela demora em te responder, o blog estava passando por um hiatus mas já já ele estará voltando as atividades. Espero te ver mais por aqui, obrigada pelo carinho, és sempre muito bem vinda por aqui :3 Dei uma passada no seu blog, mas infelizmente ele aparece como "não encontrado"...Espero que não tenha deixado as atividades como blogueiras pra sempre, espero que tenha um novo blog e que me mande o novo link para que eu possa visitar :D

      Excluir
  28. peguei, obrigada :3

    http://onedirectionhotfics.blogspot.pt/

    ResponderExcluir
    Respostas
    1. Olá Ana, desculpe pela demora em responder o seu comentário, o blog estava em um período de hiatus, mas estamos voltando agora. Por nada ^_^ faça bom uso! Volte sempre que puder.

      Excluir
  29. Respostas
    1. Desculpe pela demora em responder Iandra, o blog estava em hiatus mas já está de volta :) creio que o tutorial ainda funciona porque ainda está funcionando aqui para mim. Se for o caso tente outra vez, as vezes é um bug da plataforma Blogger. Espero ter ajudado. Volte sempre que puder, és muito bem vinda.:3

      Excluir
  30. Respostas
    1. Desculpe pela demora em responder o seu comentário, o blog estava em um período de hiatus mas já está retornando as atividades. Faça bom uso ^_^, volte sempre que puder.

      Excluir
  31. adorei a dica mais a setinha não está aparecendo você poderia me ajudar ?

    ResponderExcluir
  32. oi de novo então eu consegui mais a seta está aparecendo no topo logo no início poderia me ajudar ?

    ResponderExcluir
    Respostas
    1. Oieh Deborah, desculpe pela demora em responder o seu comentário...O blog estava passando por um período de hiatus mas já está retornando as atividades. Sobre a sua dúvida, as vezes acontecem alguns bugs nos códigos da plataforma Blogger. Como ainda esta funcionando para mim os códigos, o tutorial ainda funciona, tente mais uma vez se for o caso, pode ser que ainda esteja acontecendo essa falha ;) espero ter te ajudado. Espero te ver mais por aqui, és muito bem vinda :3

      Excluir
  33. Oii :) Adorei mesmo esse tuto!!! Ajuda muito e foi o melhor q eu já vi sobre isso!
    Só que no meu blog a imagem fica mas não sobe, só fica mesmo :\ Me ajude por favor!!!
    Blog: http://tmalikfoureverdirection.blogspot.com.br/#

    ResponderExcluir
    Respostas
    1. Olá Thay! A imagem é estática, o que muda é a página que volta para a parte superior. Fico feliz que aprecie o blog, sinto muito pela demora em responder o seu comentário, o blog estava em pausa a um tempo e está passando por reforma, mas em breve voltará. Visitei o seu e que pena que você não o atualiza mais, espero que não tenha parado de blogar :3 volte sempre que puder :3

      Excluir
  34. Oi, eu amei, muito bonitinha as imagens para o botão subir!

    ResponderExcluir
    Respostas
    1. Olá Gabriela! Obrigada pelo carinho, que bom que gostou. Sinto muito pela demora em responder o seu comentário, o blog estava pausado, mas logo logo voltará a ativa. Espero te ver mais vezes por aqui. ^_^

      Excluir
  35. *u* Oi tudo bem ? amei seu blog bjs

    ResponderExcluir
    Respostas
    1. Oi Junior :) fico muito feliz querido! Desculpe por demorar tanto para responder o seu comentário, o blog passou por um período de hiatus, muitas mudanças estão por vir. Obrigada pelo carinho e espero que possa te ver mais vezes por aqui. :3

      Excluir
  36. Olá , tudo bem? Amora , eu tô precisando de ajuda para o meu blog e muita ajuda mesmo , tem algum lugar para q possamos falar melhor sobre o assunto?

    ResponderExcluir
    Respostas
    1. Olá Kaah ^_^, tudo bem sim e com você? Deixe sua mensagem na página do Facebook do blog, responderei assim que puder :) Desculpe a demora em responder o seu comentário, meu blog estava em hiatus, mas daqui a pouquinho estará atualizado novamente. Espero te ver mais vezes por aqui. bjs :3

      Excluir

~REGRAS PARA COMENTAR~

-Não desrespeite ninguém.
-Não xingue ou use palavras de baixo calão.
-Sempre que puder comente é uma forma de incentivar a trazer sempre novidades.

Related Posts Plugin for WordPress, Blogger...

Subscribe