Personalizar a lista numerada dos posts do blog - * Blog Elaine Gaspareto *

Personalizar a lista numerada dos posts do blog

Publicado em 11/12/2017


Talvez apenas lendo o título do tutorial de hoje você não saiba exatamente do que eu estou falando, né?
Então vou te mostrar, na prática, o que é lista numerada do blog e como ela ficará depois que você aplicar à ela alguma das personalizações que vou compartilhar contigo hoje.
Vamos lá?

A lista numerada da área dos posts do blog é aquele recurso que a gente usa quando deseja enumerar itens no post.
Para usar o recurso em seus posts do blog é muito simples: basta parar o mouse onde deseja começar a lista e a seguir clicar no ícone da lista numerada, que aparece no alto do editor de postagens. É o 5º ícone da direita para a esquerda.
Sem personalização alguma a aparência da lista numerada é essa:

Agora veja as 4 opções de personalização que estou disponibilizando:

Modelo 1 (com efeito hover ao passar o mouse)


Modelo 2

Modelo 3 (com efeito giratório ao passar o mouse)

Modelo 4

Como personalizar a lista numerada dos posts do blog


Para personalizar a sua lista numerada nos posts do blog comece acessando a página com os códigos necessários à execução do tutorial:


Copiar os códigos


E siga os passos abaixo:

  1. Escolha qual estilo quer aplicar;
  2. Acesse o painel administrativo de seu blog e clique em Tema; a seguir clique em Editar HTML;
  3. Dentro da caixa do código fonte tecle Ctrl+F e na barra de busca digite ]]></b:skin> e tecle Enter para localizar;
  4. Acima de ]]></b:skin> cole o código da opção escolhida;
  5. Personalize coisas como cores e fontes e depois de pronto, salve.

Importante:

  • A personalização escolhida será aplicada automaticamente à todas as listas numeradas de todos os posts que seu blog tiver, ok?
  • Cores são alteradas no código, sempre precedidas do sinal #. Para alterar a cor troque o código hexadecimal do meu exemplo pelo código hexadecimal da cor que você deseja usar.
  • Aqui tem uma tabela com dezenas de cores e seus códigos.

💕

É isso, querido leitor!
Espero que seja útil para deixar seu blog ainda mais personalizado, e com a sua carinha!
Enjoy!





10 comentários via Blogger
comentários via Facebook

10 comentários:

  1. Ai que efeito bacana. Eu já vi esse efeito no seu blog mesmo e não imagina como fazer. Obrigada por mais um tutorial, Elaine! <3
    Beijos!
    Tamara
    tamaravilhosamente.com

    ResponderExcluir
    Respostas
    1. Tamara, eu uso há um tempo e ando querendo achar um jeito de aplicar em outras áreas.
      Se der certo eu posto :)
      bjsssss

      Excluir
  2. Fiz e deu certinho! Usei o primeiro modelo, ajustei o fundo e ficou lindo! Amo suas dicas!

    ResponderExcluir
  3. Nenhum tutorial do seu blog está funcionando :( Será o modelo que estou usando? Geralmente uso o Simples ou o Travel.

    ResponderExcluir
    Respostas
    1. Ou é o modelo que está usando (se for um dos novos responsivos tipo Soho, Notável, etc... pode mesmo não funcionar) ou você está fazendo algo errado pois como você mesma viu aqui em meu blog funciona sem erro e em cada teste que fiz para criar o tutorial também.
      Confira se não esqueceu nada ou se não está usando algum modelo que eu mencionei...

      Excluir
    2. Testei os tutoriais nos modelos Simples e Travel.

      Excluir
  4. Amo seus tutoriais, vc está de parabéns.

    ResponderExcluir
  5. Mais uma página salva. Vou usar esse restinho de ano pra mudar algumas coisas no blog. Seu blog vai me ajudar super.

    Vidas em Preto e Branco

    ResponderExcluir
  6. E lista com marcadores?

    ResponderExcluir

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…