04 setembro 2014

Botão de subir e descer no blog

Botão de subir e descer


Se você tem um blog com artigos com muita informação (texto longo). Saiba:
Por mais quê, muitas vezes possam ser informações importantes que você deseja passar a elas, nem todos os visitantes gostam de lê-las até o final. (O que é, uma pena!)

Para que eles não saiam correndo do seu blog, 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, irei ensinar como colocar o botão de subir e descer no blog, deixando sua página muito mais dinâmica.

No tutorial, você terá a possibilidade de personalizar com imagens de setas do jeito que preferir. 


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 - Agora acesse a página dos códigos que iremos utilizar. ↓



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

 </body>

4 - Acima de </body> , cole o 1º código:


Passo 2

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

 ]]></b:skin>
 

2 - Acima dele, cole o 2º código.


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 uma 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, 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ó 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

     

     

   

Nenhum comentário:

Postar um comentário

Amigos do Blog