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).
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).
Valeu Fabiano,esse ícone fica muito mais doido!!!Parabéns e até mais.
ResponderExcluirEra isso que eu estava precisando, obrigada!
ResponderExcluirJá vou adicionar :o)
Beijos e bom final de semana!
Perguntinhas OFF :)
ResponderExcluirGostei 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 :)
João Henrique
ResponderExcluiraqui 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
O que seria de nós blogueiros novatos sem a ajuda de vocês?
ResponderExcluirEstou 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
Fabiano, tudo bem?
ResponderExcluirComo faço para aumentar o espaço da barra de canto do blog?
Valeu!
César
qual barra?
ResponderExcluirse está falando sobre o código dessa postagem é só mudar os valores 0px, o numero é a distancia.
Ô 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.
ResponderExcluirVagner
ResponderExcluirentrei 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
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?
ResponderExcluirUm abraço!
César
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?
ResponderExcluirO seu blog é maravilhoso com dicas e explicações objetivas e de fácil compreensão.Parabens!
Sonia Domingues
ResponderExcluirtente 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
Adoro sue blog,tudo que eu preciso esta aqui. Faça uma visitinha nele e deixe seu recado.
ResponderExcluirhttp://wwwaielkblog.blogspot.com
Ow cara brigadão me ajudo demais isso ja ta no meu blog brigadaço.
ResponderExcluirQue legallll Adorei esse botão Voltar! obrigada! Liza
ResponderExcluirmuito bom
ResponderExcluirde uma visita no blog
cópias da web - dicas-tutorais
Olá Fabiano!
ResponderExcluirA 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!
tente colocar novamente o código, pois a ultima vez que testei funcionou normalmente
ResponderExcluirOk! Com imagem funciona bem em todos os navegadores! ;)
ResponderExcluirGrato.
É uma ótima dica o/
ResponderExcluirPrincipalmente se o blog for muito longo.
Vlw! Até mais :D
Primeiro coloquei com imagem, depois quis mudar para texto. Achei que anularia o primeiro, mas esta sobreposto! Como tirar?
ResponderExcluirpelo que diz o melhor jeito é excluir e colocar novamente a imagem como fez da primeira vez
ResponderExcluirOpa!eu gostei muito dessa postagem xD
ResponderExcluireu 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
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!
ResponderExcluirT Free'S
ResponderExcluirum player é um sistema muito diferente de uma imagem, acho que não dá pra fazer ele seguir o mouse
Msmo assim cara... Vlw ae! Seu blog é o melho para ajudar em dúvidas sobre blog!
ResponderExcluirOpa, blz? eu mudei um pouquinho o codigo deixei transparente o fundo.... mas eu queria tirar a borda vc sabe como?
ResponderExcluirsymbiannanet.blogspot.com
se quiser ver
envia a resposta pra:
aarthur.ffelipe@gmail.com
vlw
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
ResponderExcluirmas se não tiver certeza qual é o melhor jeito é apagar e visualizar o blog até achar a certa.
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.
ResponderExcluirParabéns pelo trampo!
Abraços!
Valeu muito fabiano,consegui fazer isso,é bem facil !
ResponderExcluirOlá amigo suas dicas são otimas, tem um banner seu la no meu site, vc merece, forte abraço
ResponderExcluirFabiano, boa tarde
ResponderExcluirSeu 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
val
ResponderExcluirprovavelmente está usando o endereço errado da imagem, por isso aparece o X
Nao consigo usar, eu coloquei certo mas nao vai!
ResponderExcluirTem 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?
ResponderExcluirPaulo, veja aqui como fixar o botão no canto da pagina
ResponderExcluirhttp://www.dicasparablogs.com.br/2009/07/fixar-botoes-no-canto-da-pagina.html
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
ResponderExcluirCaio
ResponderExcluirveja aqui
http://www.dicasparablogs.com.br/2009/07/fixar-botoes-no-canto-da-pagina.html
Dá pra colocar a imagem e o texto juntos?
ResponderExcluirClara TMJ, é só colocar a imagem e o texto no lugar do link "ir para o topo da pagina"
ResponderExcluirbom dmais....
ResponderExcluirele 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
infelizmente o flash não se comporta como outros arquivos publicado na internet, ainda não achei como corrigir isso.
ResponderExcluirOi, 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!
ResponderExcluirAproveito pra te desejar uma Feliz Páscoa pra você e sua família.
Um abraço,
Amanda Fonseca
nossa é o melhor blog do mudo vc esplica direitinho brigadu
ResponderExcluirVcs fazm um otimo trabalho...
ResponderExcluirPasso por aq, muitas vezes...E nunca me arrependo...Consigo tdo q preciso.
Vlw...
Parabéns.
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.
ResponderExcluirTUDO SOBRE FARMVILLE
ResponderExcluiro mais certo seria fazer uma imagem, mas pode pesquisar no google por icone seta ou algo parecido, vai achar.
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...
ResponderExcluirpode ser em qualquer parte da pagina, é só adicionar como um gadget de html/javascript
ResponderExcluirPoxa, consegui! kkkkk Eita fiquei contente demais, a setinha verde, lindíssima! rsrs
ResponderExcluirAh agora to animadaaa
Obrigada, as informações sao todas muito úteis!
Mais uma dica simples e imperdível! Deu certíssimo!Obrigado!
ResponderExcluiro meu voltar ao topo não esta fazendo voltar ao topo o que eu faço?
ResponderExcluirOla 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.
ResponderExcluirAte+
infelizmente em alguns tipos de conteudo e navegadores o código apresenta um problema
ResponderExcluirFabiano, tem como fazer o botão aparecer só depois que a pessoa rolar um pouco a barra da página?
ResponderExcluirObrigada.
Juju Barros
http://belejura.blogspot.com/
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
ResponderExcluirAhh sim....então acho que ficaria ruim! acho que desse jeito ficou ótimo! você viu?
ResponderExcluirObrigada.
Juju Barros
http://belejura.blogspot.com/
Valeuou!
ResponderExcluirOi .queria saber como faz para tirar um topo da pagina pois coloquei e nao consigo retira-lo!!! espero que me ajudem.até +.
ResponderExcluircontato:brunostautcaetano@hotmail.com
o unicio jeito de retirar é achar onde colocou o código e apagar... não tem outra maneira
ResponderExcluirmuito legal ja coloquei no meu blog
ResponderExcluirTem 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/
ResponderExcluirtem 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
ResponderExcluirobrigado pelo voltar ao topo eu ainda estou aprendendo a mecher o blog e isso foi de grande ajuda...
ResponderExcluirv0cê esta de parabéns
ResponderExcluir.. e como faz para descer ate o fim da pagina com um click?
ResponderExcluiroie tentei colocar mais nao vai para o topo o que faço ele redimenciona para aquela pagina de colocar o codigo.
ResponderExcluirMarcos
ResponderExcluirveja 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
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
ResponderExcluirmeu 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
Dany
ResponderExcluirnão fazemos edições de template... pois são muitos os pedidos e não poderiamos atender a todos
Cara meu blog só é bom por causa desse site!!!!!
ResponderExcluirmuito bom.. ajudou muito
ResponderExcluirEstou com o mesmo problema da Danny, porque será que o blog redireciona para a pagina de HTML/JavaScript?
ResponderExcluirSe puder me dar um auxílio, agradeço! :D
Psic. Aline
ResponderExcluirtente 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
existe um link para ir para o fim (rodapé) da página?? qual?
ResponderExcluirveja aqui sobre Navegar Dentro da Página - Criar links na mesma pagina
ResponderExcluirSempre me ajudando, muito obrigado mesmo!
ResponderExcluirmuito ultio obrgado
ResponderExcluirNossaaaa funciona mesmo adorei!!!!!! Você está de Parabéns vou postar várias imagens de voltar ao topo igual esse no meu blog
ResponderExcluirO 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.
ResponderExcluirhttp://pontosdeinteresse2011.blogspot.com
essa não é a que eu to procurando, a que eu quero vai subindo e essa aparece de uma vez no topo, ajuda ae
ResponderExcluiradicione a caixa de comentario disqus.
ResponderExcluirsei qual é que está falando, mas no momento não tenho esse outro código que desliza a pagina
ResponderExcluirOlá..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..
ResponderExcluirObrigada
@Lu... você precisa fazer uma imagem no tamanho certo e hospedar em algum site
ResponderExcluirdepois é só colocar no código no lugar indicado
mg src="URL DA IMAGEM" border="0"
Olá,eu adorei a dica mais ao inves de imagem no meu blog fica uma carinha de quando da erro,oque faço?
ResponderExcluir@Bela441 deve ser o endereço da imagem errado
ResponderExcluirA muito obrigada,coloquei outro URL e deu certo !!
ResponderExcluircara 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?
ResponderExcluirveja que no código é para colocar href="#"
ResponderExcluirnão é para usar o endereço do seu blog aqui
Muito bom esse código. Só faltou acrescentar após a URL da img: title="Ir para o topo"
ResponderExcluir@Natan C. Bezerra você tem razão, vou alterar no tutorial e colocar o title
ResponderExcluirNossa!Que fácil,consegui de 1ª,muito bom Fabiano
ResponderExcluirOi, quando eu coloco tudo e tal, aparece aquele símbolo cinza de imagem não identificada, o que é isso?? :(
ResponderExcluir@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
ResponderExcluirOi 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
ResponderExcluirmas usou o código como está no tutorial?
ResponderExcluir< 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
Tô amando essas dicas .......e reaproveitando para melhorar meu blog acesse http://carolmazi.blogspot.com bjos
ResponderExcluirobrigado cara! Procurei de todo jeito um que não interferisse no html do meu template! Valeu msm!
ResponderExcluircara n funcionou muito bem pq a foto não apareceu
ResponderExcluirveja se utilizou o endereço correto da imagem
ResponderExcluirMto obg mesmo, mto bom !! *-* Mas eu queria saber se tem jeito de deixar a imagem transparente no fundo... Obg bjs
ResponderExcluirimagem com fundo transparente tem que ser no formato .gif ou .png
ResponderExcluirGostaria de saber se e possivel colocar esse codigo em outra pagina do blog sem que ele volte para pagina inicial Obrigado.
ResponderExcluirAnônimo mas esse código não volta para a pagina inicial ele pernamece na mesma pagina
ResponderExcluirAqui 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
ResponderExcluircomo colocou o código no seu blog.
ResponderExcluirele deve ter algum erro
kkkk
ResponderExcluirÓtima Dica Adorei!
ResponderExcluirMeu blog só possui a opção adicionar gadget por URL não por HTML, como faço?
ResponderExcluirObrigada
entre na pagina layout > adicionar gadget e procure por html/javascript
ResponderExcluiré neste gadget que pode colocar o código
tem como fazer com que um post não tenha como cometar.fazer para que não apareça a caixa de cometarios em um certo post somente em um post especifico
ResponderExcluirAnônimo só precisa editar as opções da postagem que deseja retirar os comentários, veja na ultima imagem deste tutorial:
ResponderExcluirConfigurações e Ferramentas do Blog para Fazer Novas Postagens
Esqueci de perguntar uma coisa como coloca para cometarios de tipos de forma anônimo ter minha autorização.e aprendi a minha duvida anterior.
ResponderExcluirisso acontece muito comigo também ... procurar uma coisa e achar outro que nem esperava
ResponderExcluirnão e colocar para quando uma pessoa comentar no meu blog de forma anonima precise que eu o administrador autorize o comentario como faz?
ResponderExcluirisso é moderação de comentários, naquela mesma pagina você deve ativar a moderação, mas isso vale para todos os comentários.
ResponderExcluirGostaria de saber se funciona também com gifs??
ResponderExcluirJhéssica Alessandra funciona da mesma forma com gifs.
ResponderExcluirsó precisa hospedar as imagens e colocar o endereço da imagem no código
Não é isso que quero Fabiano...
ResponderExcluirQuero colocar uma imagem com o link da página inicial no lugar que está "início" /entende?
veja aqui como trocar o texto por imagens
ResponderExcluirAlterar texto postagens mais antigas e mais recentes
Fabiano.. me diz .. como eu faço pra trocar a imagem do botão por outra a minha escolha.. já até montei uma imagem e salvei no ImageShack... mas não deu certo...
ResponderExcluirtente salvar a imagem no próprio blogger enviando a imagem para uma postagem ou criar um pagina estática só para imagens
ResponderExcluirFabiano
ResponderExcluiro botão funciona perfeitamente em meu blog, gostaria de saber como colocar o botão pra subir ao TOPO após o usuário descer até a metade da página por exemplo, o botão ficaria oculto e só depois de descer até a metade da página ele apareceria, tem como ?
Carlos
Anonimo
ResponderExcluirfaça um teste com o código que está no link abaixo:
Navegar Dentro da Página - Criar links na mesma pagina
Valeu meu caro, procurei o código mais simples, é só consegui
ResponderExcluirencontra-lo no seu Blog.
muito obrigado!!
Eu coloquei so que ele manda pra pagina inicial...tem com so mandar ao topo?
ResponderExcluirhttp://kitudo8.webnode.com/#
isso aqui e muito bom.
mas você colocou só o sinal # no lugar do link?
ResponderExcluirMuito bom amigo gostei....
ResponderExcluirOlá. Muito bom seu blog. Adoro.
ResponderExcluirSerá que tem como mudar este código para fazer ele descer até o final da página.
Estou tentando, mas ainda não consegui e talvez nem consiga sem sua ajuda.
Grata
Bjs
veja aqui:
Excluirhttp://www.dicasparablogs.com.br/2009/01/navegar-dentro-da-pagina.html
acho que esse é o jeito mais fácil.
você coloca o num gadget no final da pagina o código:
< a name="final" >< /a >
aparecerá um gadget vazio pois este código não é visivel
depois é só colocar o link para descer ao final da pagina deste jeito:
descer
e já está pronto.
no link que postei tem a explicação mais detalhada e também como usar esse código para linkar qualquer parte da sua pagina