Translator
Google-Translate-ChineseGoogle-Translate-Portuguese to FrenchGoogle-Translate-Portuguese to GermanGoogle-Translate-Portuguese to ItalianGoogle-Translate-Portuguese to JapaneseGoogle-Translate-Portuguese to EnglishGoogle-Translate-Portuguese to RussianGoogle-Translate-Portuguese to Spanish

Pesquise no Google

sábado, 28 de maio de 2011

Link para retornar ao topo da Página


Bom hoje  nesse artigo vou mostrar como adicionar um link em movimento no seu blog que dá a opção ao visitante de retornar ao inicio da página.  É "Super fácil" confira!


O Processo para adicionar o link no seu blog requer dois (2) simples passos:

Primeiramente escolha a imagem/ícone que vai utilizar e copie a URL dela.Essa do globo e da setinha roxa foi a que utilizei no meu blog Beat Acelerado.

1- Adicionar  link: vá em DESIGN , clique para adicionar um gadget, escolha a opção HTML/JavaScript, e coloque esse código:

  • Para imagem/link->


<div style="position:fixed; bottom:0px; right:0px;"><a href="#"><img src="URL DA IMAGEM"title="Início da Página" border="0"></a></div>

  • Somente Texto->


<a href="#topo">TEXTO</a>



2-Adicionar Marcador HTML: vá em DESIGN na opção  ditar HTML, Selecione expandir HTML , dê F3, aparecerá uma janelinha no topo da pagina digite <body>, irá aparecer ela destacada no HTML. copie esse código : 
                                                     <a name="topo"></a>

OBS: coloque  logo após a Tang <body>


FICARÁ ASSIM  NA SUA PÁGINA NO CANTO DIREITO EM BAIXO,MAS SEMPRE ACOMPANHADO.











AO CLICAR NA NO LINK ELE RÁPIDAMENTE FARÁ QUE A PÁGINA SUBA RETORNANDO AO TOPO.




Podemos modificar sim o lado do link, basta trocar essas partes marcadas:


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


DIREITO-> right:0px 
ESQUERDO->left:0px;
EM BAIXO->bottom:0px;
EM CIMA->top:0px;

OBS: Além disso podemos escolher se ficará encostado nas margens da página ou deixaremos uma pequena distância  só alterar os valores 0px para o número que desejar.

Podemos também utilizar esse link para direcionar para outros partes da blog, não apenas o topo.

Você escolhe, como post mais visitados, parcerias, seus links para contato.Basta, apenas , ao invés de inseri no HTML diretamente, inseri  o mesmo marcador-> código: <a name="topo"></a> junto  ao Gadget que você quer direcionado . 
Só lembre-se de  modificar  o name-> <a name="topo"></a> quando for inserir mais de duas vezes .para não haver problemas no direcionamento. pode ser modificado para qualquer nome
.
 EX¹:<a name="parcerias"></a>

EX²: <a name="meus links"></a>


Bom espero que tenha ajudado! qualquer dúvida entre contato conosco, deixe um comentário. Fiquem com Deus

Um comentário:

  1. Eu não consegui colocar o topo na página, a imagem foi, mas qdo clica na imagem, não sobe ao topo, aparece a caixa html...

    ResponderExcluir

Poderá Gostar Também

2leep.com

Mercado Livre