Botões voltar, home, avançar, topo da página, atualizar, fechar página, imprimir, favoritos, indique aos amigos

16 11 2007


Nível: Iniciante

Updated: 10/04/2009

Um recurso muito útil e muito usado em sites é um menu com os botões voltar, home, avançar, topo da página, atualizar, fechar página, imprimir, favoritos, indique aos amigos. Estes botões facilitam a navegação do usuário, principalmente se a página foi construída dentro de uma janela popup, que não tem os botões padrão do navegador.

O botão Voltar [history.back( )] restaura a última página registrada no histórico, isto é, a última página visitada. É o mesmo que pressionar o botão Voltar [back( )] da barra de ferramentas do navegador. ( Compatível com qualquer navegador )

<a target=_self href=javascript:window.history.go(-1)>Voltar</a>
Voltar

<a target=_self href=javascript:window.history.go(-1)><img border=”0″ style=’border: 0px; padding: 1px’ src=”http://i254.photobucket.com/albums/hh120/ileitura/go-previous.png”></a>

<input type=”button” value=”voltar” onclick=javascript:window.history.back()>

O botão Home [home( )] abre na janela onde está o link a página definida como página inicial (homepage) do navegador. É o mesmo que pressionar o botão Página inicial [home( )] da barra de ferramentas do navegador.

<a href=”javascript:window.history.home()” target=”_self”>Home</a> Home

<a target=”_self” href=”#” onclick=”this.style.behavior=’url(#default#homepage)’; this.setHomePage(‘http://www.ileitura.com’);”>Home</a> Home

<a href=”javascript:window.history.home()” target=”_self”><img border=”0″ style=’border: 0px; padding: 1px’ src=”http://i254.photobucket.com/albums/hh120/ileitura/go-home.png”></a>

<input type=”button” value=”Home” onclick=javascript:window.history.home()>

O botão Avançar [history.forward( )] carrega a próxima página registrada no histórico, isto é, a próxima página visitada. É o mesmo que pressionar o botão Avançar [forward( )] da barra de ferramentas do navegador.

<a target=”_self” href=”javascript:window.history.go(1)”>Avançar</a> Avançar

<a target=”_self” href=”javascript:window.history.go(1)”><img border=”0″ style=’border: 0px; padding: 1px’ src=”http://i254.photobucket.com/albums/hh120/ileitura/go-next.png”></a>

<input type=”button” value=”Avançar” onclick=javascript:window.history.forward()>

O botão Topo leva o usuário ao início da página que ele está lendo.

<a target=”_self” href=”#top”>Topo</a> Topo

<a target=”_self” href=”#top”><img border=”0″ style=’border: 0px; padding: 1px’ src=”http://i254.photobucket.com/albums/hh120/ileitura/go-top.png”></a>

O botão Atualizar [history.go(0)] carrega a mesma página novamente atualizando as informações nela contidas.

<a target=”_self” href=”javascript:window.history.go(0)”>Atualizar</a>
Atualizar

<a target=”_self” href=”javascript:window.history.go(0)”><img border=”0″ style=’border: 0px; padding: 1px’ src=”http://i254.photobucket.com/albums/hh120/ileitura/view-refresh.png”></a>

<input type=”button” value=”Atualizar” onclick=javascript:window.history.go(0)>

O botão Fechar página [close( )] fecha a janela especificada e pode gerar uma mensagem de confimação de seu fechamento. (Compatível com IE, Netscape 4.45 e 6)

<a target=”_self” href=”javascript:window.close()”>Fechar</a> Fechar

<a target=”_self” href=”javascript:window.close()”><img border=”0″ style=’border: 0px; padding: 1px’ src=”http://i254.photobucket.com/albums/hh120/ileitura/emblem-unreadable-1.png”></a>

<input type=”button” value=”Fechar” onclick=javascript:window.history.close()>

O botão Imprimir [print( )] imprime o conteúdo da janela atual.

<a target=”_self” HREF=”JavaScript:window.print()”>Imprimir</a> Imprimir

<a target=”_self” HREF=”javaScript:window.print()”><img border=”0″ style=’border: 0px; padding: 1px’ src=”http://i254.photobucket.com/albums/hh120/ileitura/printer.png”></a>

<input type=”button” value=”Imprimir” onclick=javascript:window.print()>

O botão Favoritos abre uma caixa em que o usuário escolhe um nome de referência e o local em que a página atual será inserida nos favoritos do navegador Internet Explorer.

<a target=”_self” href=”#” onclick=”window.external.AddFavorite(‘http://www.ileitura.com’,'Seu site de leitura e cursos’);”>Favoritos</a> Favoritos

<a target=”_self” href=”#” onclick=”window.external.AddFavorite(‘http://www.ileitura.com’,'Seu site de leitura e cursos’);”><img border=”0″ style=’border: 0px; padding: 1px’ src=”http://i254.photobucket.com/albums/hh120/ileitura/emblem-favorite.png”></a>

<input type=”button” value=”Favoritos” onclick=window.external.AddFavorite(‘http://www.ileitura.com’,'Seu site de leitura e cursos’);>

O botão Indique aos amigos abre o editor de emails com o assunto e a mensagem já definidos anteriormente no próprio código do botão.

<a target=”_self” href=”mailto:?Subject=Um amigo(a) seu está indicando este site para você.&Body=Um amigo(a) seu visitou o site www.ileitura.com, gostou e está recomendando este site para você. Visite o site ileitura em www.ileitura.com”>
Indique</a> Indique

<a target=”_self” href=”mailto:?Subject=Um amigo(a) seu está indicando este site para você.&Body=Um amigo(a) seu visitou o site www.ileitura.com, gostou e está recomendando este site para você. Visite o site ileitura em www.ileitura.com”>
<img border=”0″ style=’border: 0px; padding: 1px’ alt=”Indique este blog para os seus amigos” src=”http://i254.photobucket.com/albums/hh120/ileitura/email_go.png”></a>

Estes botões podem ser aplicados com um javascript muito simples. Para inserí-los, copie os códigos acima e coloque-os entre as tags body <body></body> da sua página:
Veja o resultado:

Assine este feed de notícias.

Voltar Home Avançar Favoritos Indique Atualizar Topo Imprimir Fechar

Você pode colocar uma imagem no lugar do texto, como por exemplo um botão.

Compatível com o navegador Internet Explorer.


Acções

Informação

2 respostas

15 10 2010
Massagem Terapêutica Sei-Tai

Poxa. tão bom encontrar alguém que nos dê mimo :P . Seu mininu, tava catando esses botões prontos a horas, ficar fazendo dá medo ! :P Obrigada mesmo, ta?Sucesso aqui pra vc.Cristina

14 10 2010
jario

Kara valeu pel post. muito bommmmmvleu masmo

Deixar uma resposta

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Modificar )

Imagem do Twitter

You are commenting using your Twitter account. Log Out / Modificar )

Facebook photo

You are commenting using your Facebook account. Log Out / Modificar )

Connecting to %s




Seguir

Get every new post delivered to your Inbox.