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!
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.
76 comentários
Oi amiga, vc é d+.
ResponderExcluirAdorei 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/
hahahaha Obrigada Gil *-* sei porque você gostou da de vermelho...hihihihi
ExcluirBeijocas linda!!!
Este comentário foi removido pelo autor.
Excluiradorei o tutorial...achei bem legall
ResponderExcluirvou tentar no meu
bju
http://aieuvivantagem.blogspot.com.br/
Que maravilha que gostou flor *-* fico muito feli...Obrigada pela visita ...
ExcluirBeijocas e volte sempre!!!
Amei o tutorial... você me salvou :)
ResponderExcluirhttp://segredosdacahlima.blogspot.com.br/
Beijos :)
hahahahha fico muito feliz querida que tenha lhe sido útil *u*
ExcluirBeijocas e volte sempre!!!
O tutorial é bem legal e as imagens que você disponibilizou são lindas!
ResponderExcluirhttp://kelly-club.blogspot.com.br/
Obrigada flor *-* fico muito feliz que tenha gostado...
ExcluirVolte sempre és muito bem vinda.
Beijocas!!!
Oi, muito obrigado pelo tutorial. Adorei eajudou bastante no meu blog! =)
ResponderExcluirFico feliz que tenha gostado querido *u*
ExcluirObrigada pela visita...
Beijocas e volte sempre!!!
Bem bacana o tutorial, amei as fotinhos paara por na seta!
ResponderExcluirAmigas!
Beijos!
Que bom flor que gostou *u*
ExcluirBeijocas!!!
Obrigada pela visita ^^ Beijos!!
ResponderExcluirBOA TARDE - SIGO E PARTICIPO DO SITE DE TODOS OS BLOG
ResponderExcluirO 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
Boa Tarde, e obrigada pela visita e comentário!
ExcluirBeijos!!!
Arrasando em todos os tutoriais Hilda!!! Sugestão: tutorial de como linkar a fanpage do blog no blog!!!
ResponderExcluirBeijos e continue o trabalho, muito show :D
Oi Leninha querida obrigada *-* claro farei sim :3
ExcluirBeijocas e volte sempre!
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
Excluirhttp://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
ResponderExcluirhahaha 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...
ExcluirBeijocas volte sempre!
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 :(
ResponderExcluirAhh 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.
ExcluirSobre 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!
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
ResponderExcluirOi querida fico muito feliz que tenha gostado do tutorial ...
Excluiro 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!
Ah! Agora sim eu achei! Muito obrigada! Eu vou continuar tentando aqui!
Excluirhttp://garotasdistraidaas.blogspot.com.br/
Que bom querida *--* fico feliz de ter ajudado hihihih
ExcluirBeijocas e volte sempre!
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
ResponderExcluirOlá 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!
ExcluirBeijocas e volte sempre :3
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! :/
ResponderExcluirbeeijo e parabéns pelo blog e pela iniciativa de ajuda á quem não sabe como deixar o blog assim! *-*
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 :/
ExcluirBeijocas e volte sempre!
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
ResponderExcluirOhh querida continue tentando :) vai dar certo :3 Obrigada por sua visita e fico feliz que esteja aprendendo coisas aqui...Volte sempre.
ExcluirOBS: Qualquer pedido de tutorial não exite em fazer :3
Beijocas!
Tuto legal,me ajudou muito obg ♥
ResponderExcluirSegue meu blog ? http://princesofnoiseof.blogspot.com.br/
Que bom Larissa :D fico realmente feliz *---*
ExcluirObrigada por sua visita querida ...Beijocas e volte sempre !
como cria as imagens queria criar uma é que meu blog é de um desenho e eu queria colocar o mesmo desenho que do meu blog
ResponderExcluirOlá 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 :
Excluirhttp://sorriso-jovem.blogspot.com.br/2013/05/tutorial-aprenda-fazer-seus-brushes-e.html
Obrigada por sua visita querida.
Beijocas e volte sempre!
Usei um dos seus modelos, ficou super fofo *-*
ResponderExcluirQue bom Cíntia *---* fico bastante feliz que tenha gostado!
ExcluirObrigada por sua visita querida.
Beijocas e volte sempre que puder ^^
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!
ResponderExcluirInfelizmente não tem como mudar a posição do botão Cíntia :(
ExcluirObrigada por sua visita...Beijocas e volte sempre que puder!
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!!
ResponderExcluirOlá Cíntia seu comentário apareceu sim :) Infelizmente não tem como mudar a posição do Botão em seu blog :(
ExcluirObrigada por seu comentário e visita...Beijocas e volte sempre que puder!
Obrigada estava precisando aqui o que eu usei http://3.bp.blogspot.com/-owQsbxkKzM0/UVoDdC5aEkI/AAAAAAAABC4/Y1hl1HyEoFc/s1600/sorrisojovem09.png
ResponderExcluirOi 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
ExcluirFicou lindo mas como vc personalizou a barra de rolagem
ResponderExcluirhttp://decorandocomcriatividade.blogspot.com.br/
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:
Excluirhttp://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
Ownt amei os botões...peguei o azulzinho de cupcake...
ResponderExcluirhttp://lovelyyoudreams.blogspot.com.br/
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
ExcluirAdorei o Tuto Hilda!
ResponderExcluirEu 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!
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 :)
ExcluirAdorei, 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
ResponderExcluirOi 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
Excluirnão estou conseguindo :c a imagem que eu escolhi não aparece, eu fiz os passos certinhos mas não aparece :(
ResponderExcluirOlá 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
ExcluirOi amore, gostaria de saber como você colocou esse enfeite onde esta escrito "Postado Por:"
ResponderExcluirSe poder me ajudar :)
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
ExcluirMuito bom, vc explica bem direitinho adorei *-* http://musicaselooks.blogspot.com.br/
ResponderExcluirOlá 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
Excluirpeguei, obrigada :3
ResponderExcluirhttp://onedirectionhotfics.blogspot.pt/
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.
ExcluirNao consegui :(
ResponderExcluirDesculpe 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
ExcluirPeguei a do Pikachú <3
ResponderExcluirDesculpe 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.
Excluiradorei a dica mais a setinha não está aparecendo você poderia me ajudar ?
ResponderExcluiroi de novo então eu consegui mais a seta está aparecendo no topo logo no início poderia me ajudar ?
ResponderExcluirOieh 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
ExcluirOii :) Adorei mesmo esse tuto!!! Ajuda muito e foi o melhor q eu já vi sobre isso!
ResponderExcluirSó que no meu blog a imagem fica mas não sobe, só fica mesmo :\ Me ajude por favor!!!
Blog: http://tmalikfoureverdirection.blogspot.com.br/#
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
ExcluirOi, eu amei, muito bonitinha as imagens para o botão subir!
ResponderExcluirOlá 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*u* Oi tudo bem ? amei seu blog bjs
ResponderExcluirOi 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
ExcluirOlá , 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?
ResponderExcluirOlá 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.