Olá baixinhos! (Eita me baixou a Xuxa! Kkkkk!)
Introdução
Hoje trago um tutorial de como criar um botão de topo ou o famoso button top. Para quem não sabe, o botão de topo é útil para que no final de cada página da web tenha um link sóbrio ou um link estilizado com uma imagem, que ao clicarmos nele acabamos indo automaticamente ao topo da página, ou em detalhes, ao head de uma página web, sem se quer ter o trabalho de ficar gastando a "roda" de seu ratinho (hehe). Muitos dizem que isso é pura frescura, outros dizem que é pura preguiça! Eu acho que é pura economia, pois acabamos economizando o nosso tempo e a nossa "rodinha" do mouse (e eu não sou pão-duro!).
Mas o que muitos não sabem é que, esse link ou botão pode ficar fixo na tela, ou seja, não importa onde ele esteja, pois sempre ele estará coladinho com você (^^). Temos um exemplo deste botão aqui no Tuto de Tudo, é só você olhar ao seu lado direito do seu monitor, ou se seu monitor estiver de cabeça para baixo, olhe o seu lado esquerdo.
Ah! E antes de você começar a ler o tutorial abaixo fique sabendo que este não funciona corretamente no Internet Explorer.
Informações
Subcategoria: Botões/Links
Nível de dificuldade: Fácil
Exemplo: Aqui
Tutorial
1. Comece logando-se na sua conta do Blogger ou Wordpress, ou qualquer uma que você tiver usando que não é da minha conta (haha).
2. Vá no Editor HTML do seu blog e coloque o seguinte código CSS antes da tag </head>:
<style type='text/css'>
.topo a {
position: fixed;
bottom: 0px;
right: 0px;
background: url(URL da imagem) no-repeat;
width: 0px;
height: 0px;
}
</style>
Defina as configurações:
Topo: Pode ser alterado por "botao-top", button-top, "top" etc. Porém no "class" do HTML terá que mudar também. Aconselho não alterar, para não obter problemas posteriores.
Position: Está como fixo na página, mas se você souber algo sobre CSS, pode ser alterado por "absolute" ou "relative".
Bottom: Aqui é a posição da imagem ou do link na página desde o rodapé. Está no código como "0px", mas se você quiser "descolar" a imagem do lado direito da página basta alterar para qualquer outro número em pixels.
Right: Também é a posição do link ou da imagem, entretanto relativo ao lado direito da página. Pode ser também alterado.
Background: É nesta definição que será colada a URL da imagem do botão de topo. Pode ser alterado por um fundo sólido de cor hexadecimal. Exemplo: #000000 (preto), #ffffff (branco)... E também esta linha pode ser apagada do código, se caso você deseja somente um link sóbrio.
Width: Aqui você definirá corretamente o altura correta da imagem do botão. Por exemplo: Se a imagem do botão for 20x20 pixels, então coloque "width: 20px;".
Height: O mesmo que widht, porém aqui é definido a largura da imagem. Como no exemplo anterior: 20x20 pixels, ficará "height: 20px;".
3. Agora para chamar-mos o código CSS, coloque dentro da tag <body> do seu blog o seguinte código:
<p class='topo'><a href='#' title='Ir ao topo'></a></p>
Defina as configurações:
Class: Aqui é onde chamamos o código CSS que está no <head> do seu blog.
Href: Não troque o "#" pelo endereço do seu blog! Pois "#" significa que é um link para o topo. Pode ser somente alterado por "http://www.meublog.hospedeiro.com/#". Mas não terá nenhuma diferença.
Title: No código está como "Ir ao topo", mas pode ser alterado por "Subir", "Voltar ao cabeçalho" etc.
>Aqui</a>: Para quem sabe criar um link de página sabe que neste local é onde colocamos o nome do link, tipo aqueles: Clique Aqui, Home. Deixe este local vazio se caso você for utilizar alguma imagem, caso contrário você poderá colocar o nome do tipo: topo ↑, subir... etc.
4. Salve! E não esqueça de visualizar antes.
Abraços!
Original de: Tuto de Tudo
Se caso você viu este post em outro blog, site, etc sem seus devidos créditos. Denuncie-o clicando aqui.
2 comentários:
Muito bom!!
=)
Brigadão Gy!
Postar um comentário