Assine nosso Feed


Melhores Dicas para Blogueiros

Passe o mouse e veja qual o assunto do tutorial de cada imagem

Código para Voltar ao Topo da Página

Algum tempo atrás publicamos um texto falando sobre criar um link para voltar ao inicio da página, isso é útil no caso de páginas longas e o visitante pode voltar para o topo apenas num clique.
Com este código você pode fazer isso usando texto ou imagem (pode ser parecida com um botão), neste exemplo usamos uma imagem, porém se quiser apenas texto é só apagar o código da imagem <img src="URL DA IMAGEM" border="0"> e escrever o que desejar (voltar ao topo, inicio...).

<div style="position:fixed; bottom:0px; right:0px;"><a href="#" title="topo da pagina"><img src="URL DA IMAGEM" border="0"></a></div>

Esse link ou botão para voltar ao topo ficará sempre visível na parte inferior direita do seu site, mesmo rolando a página, ele não sairá de lá, ou seja, fica sempre fixo no mesmo lugar.


Uma alteração que podemos fazer é trocar o canto que ele vai aparecer, se em vez de aparecer embaixo você quiser que apareça no canto superior, apague bottom:0px; e coloque top:0px; isso faz aparecer no alto da página, ou se quiser trocar de lado tire right:0px; e coloque left:0px; mudará para o lado esquerdo. Ainda podemos escolher se ficará encostado nas margens da página ou deixaremos uma pequena distancia caso queira deixar alguma distancia da margem é só alterar os valores 0px para o numero que desejar.


Para colocar esse acessório no seu blog, entre na página layout, adicionar gadget, html/javascript e cole o código, não se preocupe em qual parte ou coluna vai colocar porque isso não importa, pois sempre aparecerá fixo no lugar definido no código(canto da página). Related Posts with Thumbnails
Link desta página
Comentários
107 Comentários

107 Comentários:

Thellyn Metal disse...

Valeu Fabiano,esse ícone fica muito mais doido!!!Parabéns e até mais.

crazyangel disse...

Era isso que eu estava precisando, obrigada!
Já vou adicionar :o)
Beijos e bom final de semana!

João Henrique disse...

Perguntinhas OFF :)

Gostei do Template novo Como faz ?

Coloca ele pra Download ?

Sei que não e´Agradavel ver mais de uma pessoa com o mesmo Template .

Ou Coloca o Antigo para Baixar ?

Como Faz Este Nome do Blog que fica para cima e para Baixo ?

Ufaaa so isso rsrsrs

Te Mais Sucesso :)

Fabiano Roberto disse...

João Henrique

aqui tem um template pra download e mostra como editar as cores e larguras
http://cidadeweb.110mb.com/template/download.html

vou preparar outros modelos e colocar para download.

sobre o titulo desse blog que fica se movendo é feito em Flash, não é um código, se quiser posso fazer um para você escreva para nosso email fabiano1404@yahoo.com.br

Vento Carioca disse...

O que seria de nós blogueiros novatos sem a ajuda de vocês?
Estou com um problema, a maioria das coisas q vocês colocam aqui eu aplico no meu blog, umas eu mantenho e outras não. Fazendo o teste com aquela postagem maravilhosa de vocês sobre O que você não gosta em um blog?Coloquei no meu só para ver como ficava e agora não consigo tirar de lá. Consegui apagar as perguntas mas a enquete continua , você pode me ensinar como fazer para retirar a enquete do blog?
Obrigada

César Tarifa disse...

Fabiano, tudo bem?
Como faço para aumentar o espaço da barra de canto do blog?
Valeu!
César

Fabiano Roberto disse...

qual barra?

se está falando sobre o código dessa postagem é só mudar os valores 0px, o numero é a distancia.

Vagner disse...

Ô Fabiano, eu coloquei este código no meu gadget, mas o quadradinho (sem imagem), não sai do lugar, como link ele funciona, mas não se mexe. Me ajuda aí, cara, você é o máximo, obrigado.

Fabiano Roberto disse...

Vagner

entrei no seu blog agora, vi que você colocou o código mas com a palavra inicio, se no lugar da palavra colocar uma imagem ela aparecerá no canto da tela do mesmo jeito que a palavra

César Tarifa disse...

Fabiano, na verdade estou me referindo àquela parte do meu blog onde ficam os endereços dos blogs amigos, da rádio, etc. É aquilo que você escreveu mesmo?
Um abraço!
César

Sonia Domingues disse...

Depois de uma semana de tentativas (sou completamente analfabeta nesse assunto)consegui instalar a seta para o topo da página.Funciona perfeito no Firefox mas no IE fica fixa onde salvei o gadget.Como soluciono isso?
O seu blog é maravilhoso com dicas e explicações objetivas e de fácil compreensão.Parabens!

Fabiano Roberto disse...

Sonia Domingues

tente colocar o código novamente, veja se não faltou nenhum detalhe, aspas, ponto e virgula pois foi esse código que coloque neste blog e funcionar normalmente no Internet Explorer, Firefox e Opera.

se não der certo, clique em falo conosco e mande um email(mande também o endereço da imagem que vai usar) que enviaremos o código pra você, as vezes dá alguma falha em copiar o código da internet

AIELK disse...

Adoro sue blog,tudo que eu preciso esta aqui. Faça uma visitinha nele e deixe seu recado.
http://wwwaielkblog.blogspot.com

lucp2 disse...

Ow cara brigadão me ajudo demais isso ja ta no meu blog brigadaço.

Liza disse...

Que legallll Adorei esse botão Voltar! obrigada! Liza

yury disse...

muito bom
de uma visita no blog

cópias da web - dicas-tutorais

Arierom Salik disse...

Olá Fabiano!

A dica funciona belezinha entre 4 de 5 navegadores... Não funciona no IE =(

Algo que posso fazer para ajeitar esta facilidade?

E posso colocar outra que leve ao fim da página?

Obrigado e Parabéns!

Fabiano Roberto disse...

tente colocar novamente o código, pois a ultima vez que testei funcionou normalmente

Arierom Salik disse...

Ok! Com imagem funciona bem em todos os navegadores! ;)

Grato.

Giselα Cαrdelli disse...

É uma ótima dica o/
Principalmente se o blog for muito longo.

Vlw! Até mais :D

Ricardi disse...

Primeiro coloquei com imagem, depois quis mudar para texto. Achei que anularia o primeiro, mas esta sobreposto! Como tirar?

Fabiano Roberto disse...

pelo que diz o melhor jeito é excluir e colocar novamente a imagem como fez da primeira vez

Biel disse...

Opa!eu gostei muito dessa postagem xD

eu qria saber como eu faço para ficar igual aqui no Dicas...tipo
deixar outros icones para outras coisas...vlw!!!

se possivel vc poderia mandar um e-mail para mim com a resposta?

livrodacomedia@yahoo.com.br

e visite meu blog:
livrodacomedia.blogspot.com

obrigado

T Free'S disse...

Cara! Curti muito isso! Me ajudou muitas vezes mas eu gostaria de saber como fazer para um player seguir a tela...se souber me mande um e-mail que eu te devulgo até em troca! Vlw!

Fabiano Roberto disse...

T Free'S

um player é um sistema muito diferente de uma imagem, acho que não dá pra fazer ele seguir o mouse

T Free'S disse...

Msmo assim cara... Vlw ae! Seu blog é o melho para ajudar em dúvidas sobre blog!

Symbian Na Net disse...

Opa, blz? eu mudei um pouquinho o codigo deixei transparente o fundo.... mas eu queria tirar a borda vc sabe como?

symbiannanet.blogspot.com

se quiser ver
envia a resposta pra:
aarthur.ffelipe@gmail.com

vlw

Fabiano Roberto disse...

procure no html do seu blog por border:...... isso faz bordas, mas precisa localizar aquela que deseja tirar deve estar perto de #main ou #sidebar

mas se não tiver certeza qual é o melhor jeito é apagar e visualizar o blog até achar a certa.

Sérgio Miranda disse...

Fabiano, valeu pela dica, muito útil e faz um tempo que procuro para o novo template que estou tentando montar, pegando um pouco aqui e ali.

Parabéns pelo trampo!

Abraços!

pengui321 disse...

Valeu muito fabiano,consegui fazer isso,é bem facil !

Nossos olhares disse...

Olá amigo suas dicas são otimas, tem um banner seu la no meu site, vc merece, forte abraço

val disse...

Fabiano, boa tarde
Seu site é muito bom, muito explicativo.Eu é que estou aprendendo a caminhar ainda.
Coloquei este código do topo da página
só troquei o lado de right p/left
deu certo , só que aparece somente um "xizinho" e eu queria que aparecesse "volte ao início", já escrevi no título mais sai na coluna do meio , me ajude.
E você é meu convidado de honra a fazer uma visitinha, envia resposta para spval30@Yahoo.com.br

Fabiano Roberto disse...

val
provavelmente está usando o endereço errado da imagem, por isso aparece o X

Felipe Miranda disse...

Nao consigo usar, eu coloquei certo mas nao vai!

paulo disse...

Tem como fazer com q fique fixo no canto da pagina sem q ele siga quando a pessoa esta rolando a pagina, só fique fixo la em baixo, tipo to no topo da pagina só q não quero esse java fique mostrando mesmo estando no topo, quero q so mostre na hora q a pessoa chegar no fim da pagina, tem como?

Fabiano Roberto disse...

Paulo, veja aqui como fixar o botão no canto da pagina

http://www.dicasparablogs.com.br/2009/07/fixar-botoes-no-canto-da-pagina.html

Caio disse...

Fabiano gostaria q essa imagem ou nome ficasse no canto da pagina sem q no momento em a pessoa esta rolando a pagina ele fique seguindo, quero q fique só no fundo da pagina, tem como fazer isso? se tiver me responde porfavor!agradeço. vlw

Fabiano Roberto disse...

Caio

veja aqui
http://www.dicasparablogs.com.br/2009/07/fixar-botoes-no-canto-da-pagina.html

Clara TMJ disse...

Dá pra colocar a imagem e o texto juntos?

Fabiano Roberto disse...

Clara TMJ, é só colocar a imagem e o texto no lugar do link "ir para o topo da pagina"

tatiter disse...

bom dmais....
ele fica na frente de tudo nao é?

mas to com probleminha,
qndo coloco arquivos em flash no site ele tomam a frente do arquivo do topo

podem me ajudar alguem?
Railton

Fabiano Roberto disse...

infelizmente o flash não se comporta como outros arquivos publicado na internet, ainda não achei como corrigir isso.

amandalayouts disse...

Oi, Fabiano! Tô passando pra pegar mais um dica. rsrsrs Adoro vir aqui no seu cantinho. Já fazia tempo que eu estava querendo aprender a colocar a imagem pra voltar ao topo do blog, mas com o código anterior não dava certo pra mim. Com esse código novo ficou muito mais fácil e rápido. Valeu a dica!
Aproveito pra te desejar uma Feliz Páscoa pra você e sua família.
Um abraço,
Amanda Fonseca

Anônimo disse...

nossa é o melhor blog do mudo vc esplica direitinho brigadu

¨¨JCarlos Maia disse...

Vcs fazm um otimo trabalho...
Passo por aq, muitas vezes...E nunca me arrependo...Consigo tdo q preciso.
Vlw...
Parabéns.

TUDO SOBRE FARMVILLE disse...

Ola Fabiano,não consegui achar uma imagem de botão de flecha para cima.Você pode me falar se vc conhece uma?Seu blog é muuito 1 cara!Se você quiser,dá uma passasadinha no eu.

Fabiano Roberto disse...

TUDO SOBRE FARMVILLE
o mais certo seria fazer uma imagem, mas pode pesquisar no google por icone seta ou algo parecido, vai achar.

Anne disse...

Fabiano, eu tô engatinhando ainda... Eu entrei na parte de editar HTML, e colei lá o código, mas nao funciona. Aliás, em que parte exatamente devemos colocar?? Nossa, eu nao consigo...

Fabiano Roberto disse...

pode ser em qualquer parte da pagina, é só adicionar como um gadget de html/javascript

Anne disse...

Poxa, consegui! kkkkk Eita fiquei contente demais, a setinha verde, lindíssima! rsrs
Ah agora to animadaaa
Obrigada, as informações sao todas muito úteis!

ઇઉ Mel ☆ mendes♫ ♪ ♫ disse...

Mais uma dica simples e imperdível! Deu certíssimo!Obrigado!

Cherifo_hot disse...

o meu voltar ao topo não esta fazendo voltar ao topo o que eu faço?

MRV Administrador disse...

Ola a todos, eu coloquei o código, funcionou corretamente, mas a imagem quando passa pelos menus no canto direito, a imagem fica coberta pelos menus, não da pra ver a imagem, alguém ajuda aew.

Ate+

Fabiano Roberto disse...

infelizmente em alguns tipos de conteudo e navegadores o código apresenta um problema

JuJu Barros disse...

Fabiano, tem como fazer o botão aparecer só depois que a pessoa rolar um pouco a barra da página?
Obrigada.
Juju Barros
http://belejura.blogspot.com/

Fabiano Roberto disse...

se tirar o trecho <div style="position:fixed; bottom:0px; right:0px;"> e </div> pode escolher onde o botão aparece, mas ele ficará fixo no lugar que colocar o gadget

JuJu Barros disse...

Ahh sim....então acho que ficaria ruim! acho que desse jeito ficou ótimo! você viu?
Obrigada.
Juju Barros
http://belejura.blogspot.com/

Kinha disse...

Valeuou!

Bruno disse...

Oi .queria saber como faz para tirar um topo da pagina pois coloquei e nao consigo retira-lo!!! espero que me ajudem.até +.

contato:brunostautcaetano@hotmail.com

Fabiano Roberto disse...

o unicio jeito de retirar é achar onde colocou o código e apagar... não tem outra maneira

Gabriel disse...

muito legal ja coloquei no meu blog

Karoline disse...

Tem alguns blogs que sobem mais devagar, não na mesma velocidade do normal tem como me explicar como faz isso? ex: http://garradownload.blogspot.com/

Fabiano Roberto disse...

tem um outro código que faz subir a pagina de maneira mais lenta... mas deixa o blog mais pesado um pouco... vou pesquisar sobre esse script e fazer um tutorial

Carlos Ajala disse...

obrigado pelo voltar ao topo eu ainda estou aprendendo a mecher o blog e isso foi de grande ajuda...

Paulinho disse...

v0cê esta de parabéns

marcos disse...

.. e como faz para descer ate o fim da pagina com um click?

Dany disse...

oie tentei colocar mais nao vai para o topo o que faço ele redimenciona para aquela pagina de colocar o codigo.

Fabiano Roberto disse...

Marcos
veja aqui: Navegar Dentro da Página - Criar links na mesma pagina

Dany
tente fazer com o código que está no link acima, e coloque uma ancora no inicio da pagina... deve funcionar no seu template

Dany disse...

nao consegui mesmo,sera que tem como fazer para mim e me passar o codigo por email ai eu so copio e colo tentei o dia todo mais nada
meu e email e danyarasilva@gmail.com
a imagem que quero esta no meu blog e a bonequinha
www.danyarasilva@blogspot.com.aguardo resposta,pelo amor de Deus me ajude

Fabiano Roberto disse...

Dany
não fazemos edições de template... pois são muitos os pedidos e não poderiamos atender a todos

Brasileirope disse...

Cara meu blog só é bom por causa desse site!!!!!

Anônimo disse...

muito bom.. ajudou muito

Psic. Aline disse...

Estou com o mesmo problema da Danny, porque será que o blog redireciona para a pagina de HTML/JavaScript?
Se puder me dar um auxílio, agradeço! :D

Fabiano Roberto disse...

Psic. Aline
tente excluir o historico pode ser erro de carregamento de pagina.

pode tentar olhar o blog dela e procure algo em comum: algum gadget ou código(numeração de pagina, efeitos) que ambas usem e pode achar o problema

Wagner disse...

existe um link para ir para o fim (rodapé) da página?? qual?

Fabiano Roberto disse...

veja aqui sobre Navegar Dentro da Página - Criar links na mesma pagina

Pedro Antonio disse...

Sempre me ajudando, muito obrigado mesmo!

Cupcake Twister disse...

muito ultio obrgado

Escolha de visual disse...

Nossaaaa funciona mesmo adorei!!!!!! Você está de Parabéns vou postar várias imagens de voltar ao topo igual esse no meu blog

lena disse...

O seu blog é muito bom. Já segui algumas sugestões e acabei de aplicar este botão, só o personalizei para o meu blog. Se puder faça uma visita para ver como ficou. Obrigado.
http://pontosdeinteresse2011.blogspot.com

Clederson Bispo disse...

essa não é a que eu to procurando, a que eu quero vai subindo e essa aparece de uma vez no topo, ajuda ae

Clederson Bispo disse...

adicione a caixa de comentario disqus.

Fabiano Roberto disse...

sei qual é que está falando, mas no momento não tenho esse outro código que desliza a pagina

Lu... disse...

Olá..gostaria de saber como faço para colocar volta ao topo com a boneca da minha logomarca.. preciso gerar algum código.. e como faço isso..
Obrigada

Fabiano Roberto disse...

@Lu... você precisa fazer uma imagem no tamanho certo e hospedar em algum site

depois é só colocar no código no lugar indicado

mg src="URL DA IMAGEM" border="0"

Bela441 disse...

Olá,eu adorei a dica mais ao inves de imagem no meu blog fica uma carinha de quando da erro,oque faço?

Fabiano Roberto disse...

@Bela441 deve ser o endereço da imagem errado

Bela441 disse...

A muito obrigada,coloquei outro URL e deu certo !!

Kirk2 disse...

cara estou no meu blog na pagina inicial, mas quando entro em outra pagina do meu blog e clico em voltar ao topo volta pra página inicial oq eu faço?

Fabiano Roberto disse...

veja que no código é para colocar href="#"

não é para usar o endereço do seu blog aqui

Natan C. Bezerra disse...

Muito bom esse código. Só faltou acrescentar após a URL da img: title="Ir para o topo"

Fabiano Roberto disse...

@Natan C. Bezerra você tem razão, vou alterar no tutorial e colocar o title

Pedro disse...

Nossa!Que fácil,consegui de 1ª,muito bom Fabiano

Bernardo disse...

Oi, quando eu coloco tudo e tal, aparece aquele símbolo cinza de imagem não identificada, o que é isso?? :(

Fabiano Roberto disse...

@Bernardo então está usando o endereço errado da imagem. precisa pegar o direct link, veja aqui: Imagem não aparece no Blog ou Site

Bernardo disse...

Oi Fabiano, mudei o site que estava usando e agora apareceu a imagem, mas não volta ao topo. E desculpa encher o seu saco :X

Fabiano Roberto disse...

mas usou o código como está no tutorial?

< a href="#" title="topo da pagina" >< img src="URL DA IMAGEM" border="0" >< / a >

só altere o endereço da imagem o # faz parte do código

carol disse...

Tô amando essas dicas .......e reaproveitando para melhorar meu blog acesse http://carolmazi.blogspot.com bjos

Z Shooter disse...

obrigado cara! Procurei de todo jeito um que não interferisse no html do meu template! Valeu msm!

Luca disse...

cara n funcionou muito bem pq a foto não apareceu

Fabiano Roberto disse...

veja se utilizou o endereço correto da imagem

Luh disse...

Mto obg mesmo, mto bom !! *-* Mas eu queria saber se tem jeito de deixar a imagem transparente no fundo... Obg bjs

Fabiano Roberto disse...

imagem com fundo transparente tem que ser no formato .gif ou .png

Anônimo disse...

Gostaria de saber se e possivel colocar esse codigo em outra pagina do blog sem que ele volte para pagina inicial Obrigado.

Fabiano Roberto disse...

Anônimo mas esse código não volta para a pagina inicial ele pernamece na mesma pagina

Anderson disse...

Aqui n deu certo ele fik aparecendo a janela de editar o gadget ai invez de voltar ao topo por que ? avise pelo meu e-mail dynho.fs@live.com

Fabiano Roberto disse...

como colocou o código no seu blog.

ele deve ter algum erro

Postar um comentário