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


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 :  

Comentários
0 Comentários


Que bom você reservou um tempinho para vir comentar. Você me deixa super feliz e desde já agradeço por seu comentário e por sua presença!

Apenas peço que leia:

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

2 - Educação sempre! Comentários com palavras de baixo calão, não serão publicados ou respondidos.

3 - Comentários não relacionados ao titulo, não serão publicados.

4 - Comente a vontade, deixe sua opinião, crítique, esclareça suas dúvidas e dê suas sugestões ou dicas sobre o assunto referente à postagem.


Beijinhos ♥
Abrir Conversa em CódigoFechar Conversa em Código Abrir EmoticonFechar Emoticon

Obrigada por seu comentário! Ele é muito importante para mim.