Botão de subir e descer no blog. | Quero Dicas Quero Dicas : Botão de subir e descer no blog.

Quero Dicas : Botão de subir e descer no blog.

Botão de subir e descer no blog.

| |


Se você tem um blog com artigos, página longa ou postagens com vasta informações. Saiba: Por mais quê muitas vezes possam ser importantes, nem todos gostam de lê-las até o final.

Para esses visitantes, dê a opção de navegação rápida e dinâmica. Assim, eles não são obrigados a ver e ler aquilo que não querem.

No tutorial anterior, eu ensinei a colocar botões de subir ao topo no blog. Hoje, vamos aprender como colocar o botão de subir e descer no blog, deixando sua página muito mais dinâmica.

Neste tutorial, você terá a possibilidade de personalizar com as imagens de setas do jeito que preferir, deixando mais parecido com o designer do seu blog.
Vamos lá?


   Passo 1


1 - Faça um backup do seu template, caso não goste ou dê algum erro.
Não sabe fazer backup? Não tem problema, aprenda aqui.

2 - Acesse o html do seu blog e, procure por:

 </body>

3 - Acima dele, cole o 1º código, logo abaixo:



   Passo 2


1 - Ainda no html do blog, procure agora por:

 ]]></b:skin>
 

2 - Acima dele, cole o 2º código acima dele:




    Personalizando


Agora vamos personalizar suas setinhas.

1 - Crie uma imagem, hospede-a na Web. (Não sabe hospedar imagem? Aprenda aqui)

2 - Onde está escrito "URL DA IMAGEM", será onde você colocará a URL da sua imagem hospedada

3 - Caso, você não queira imagem e sim cor, eu deixei o fundo da imagem transparente é só trocar o nome tranparent pela cor desejada.
Exemplo: 
Está assim - background: transparent url (URL DA IMAGEM) no-repeat top left;
Ficará assim - background: #000000 url (URL DA IMAGEM) no-repeat top left;

Tabela de cores - AQUI

4 - Dependendo da largura do seu template ou, do seu gosto.Vá mudando até ficar ao seu gosto, mais mude somente o que eu deixei escrito ao lado de cada chave. Caso contrário, você poderá ter erros.

Obs: Caso queira, que eles fiquem mais para cima, é só mudar aumentar os números ou, se preferir abaixá-los é só diminuir. Veja os números da mudança.
bottom: 100px;
bottom: 55px;

Abaixo algumas imagens que você poderá usar. 
Elas são do tamanho padrão para ser colocado no código.

Espero que tenha ajudado. Beijinhos

     

     

   



Compartilhe

* Você reservou um tempinho para comentar? *

Desde já agradeço!

Devido a falta de tempo, não prometo responder a todos os comentários. Mas farei o possível!


Nenhum comentário:

Postar um comentário

Amigos do Blog

agenda dos blogs Universo das Dicas

Ganhe Visitantes | Inscreva-se!

GeraLinks Linkicha Atoananet Linkirado
subir