Como personalizar a lista numerada de posts do blog, 3 modelos diferentes

em 10/03/2022

Tempo de leitura:

Como personalizar a lista numerada de posts do  blog, 3 modelos diferentes

 

  • A lista numerada de posts do  blog é aquela que usamos quando desejamos enumerar algum assunto que estamos abordando, ou delegando tarefas que devem seguir determinada ordem.

  • Você já deve ter visto em vários blogs, a maioria está personalizada, porque também o recurso usado sem personalização é bem sem graça 😄.

  • Para que não este duvidas, confira!

painel de edição do blog

  • Esse é o painel de postagem do blogger, a lista numerada é a segunda opção de quando você expande os 3 pontinhos.

  • Abaixo como ela é sem personalização.

exemplo de lista numerada antes de personalizar


  • Sem graça, né!

  • Agora vamos às personalizações e você verá que elas podem se tornar bem mais atraentes, destacando seu conteúdo em listas ordenadas principalmente.

  • A preferência que você sempre instale no seu blog de teste antes, de inserir no principal.
  • Para instalar o código escolhido:

  • Abra o painel do blog, tema, HTML, quando abrir dê o famoso CTRL + F, procure por:
  •  ]]></b:skin> de um enter, acima desse fechamento cole o código escolhido.

  • 1° Modelo

Como personalizar a lista numerada de posts do  blog, 3 modelos diferentes

.post ol{
counter-reset:li;
list-style: none;
*list-style: decimal;
margin-left:0;
padding-left:0
}
.post ol li{
position:relative;
margin:0 0 20px 15px !important;
padding:4px 5px 4px 10px !important;
list-style:none;
*list-style: decimal;
border-bottom:1px solid #f6a2cc; /* estilo da borda inferior dos elementos*/
background:#fffaf2; /* cor de fundo dos elementos*/
text-indent:14px;
}
.post ol li:before{
content:counter(li);
counter-increment:li;
position:absolute;
top:-6px;
left:-10px;
font-family:'Oswald', serif;
font-size:14px; /* tamanho dos números*/
width:20px;
margin:0 0 10px 0;
padding:4px !important;
color:#ffffff; /* cor dos números*/
text-align:left;
background:#bb5076; /* cor de fundo dos números*/
text-indent:6px;
}
.post ol li:after{
content:"";
position:absolute;
top:-5px;
left:17px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 5px 0 0 5px;
border-color: transparent transparent transparent #f177a1; /* color of the triangle behind */
}

  •  O segundo modelo é o modelo que utilizo aqui no blog, confira:

Como personalizar a lista numerada de posts do  blog, 3 modelos diferentes


.post ol{counter-reset:li;list-style:none;*list-style:decimal;font:100%;padding:0;margin-bottom:4em;font-weight:none}.post ol li{position:relative;display:block;padding:.4em .4em .4em 4em;*padding:.4em;margin:1.5em 0;text-decoration:none;border-radius:.3em;transition:all .3s ease-out}.post ol li:hover:before{transform:rotate(360deg)}.post ol li:before{content:counter(li);counter-increment:li;position:absolute;left:10px;top:50%;margin-top:-1.3em;height:2em;width:2em;line-height:1.8em;color:#fff;background:#fdc5cc;border:.1em solid #fff;-webkit-box-shadow:0 8px 5px -7px #985c28;-moz-box-shadow:0 8px 5px -7px #816248;box-shadow:0 8px 5px -7px #816248;text-align:center;font-weight:600;border-radius:2em;transition:all .3s ease-out}


  •  Terceiro e último modelo.

Como personalizar a lista numerada de posts do  blog, 3 modelos diferentes


.post ol{
counter-reset: li;
list-style: none;
*list-style: decimal;
padding: 0;
margin-bottom: 4em;
font: 100% /* tamanho e estilo da fonte*/
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.post ol li{
position: relative;
display: block;
padding: .4em .4em .4em .8em;
*padding: .4em;
margin: 1.5em 0 .5em 4.5em;
text-decoration: none;
}
.post ol li:before{
content: counter(li);
counter-increment: li;
position: absolute;
left: -30px;
top: 50%;
margin-top: -1em;
background: #55a39e; /* cor de fundo dos números*/
height: 2em;
width: 2em;
line-height: 2em;
text-align: center;
font-weight: bold;
color: #ffffff;
}
.post ol li:after{
position: absolute;
content: '';
left: 4px;
margin-top: -.5em;
top: 50%;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left:8px solid #4d8398; /* cor de fundo da seta*/
}


  • Terminamos escolha o que agrada e combina mais com seu blog, para alterar as cores consulte a tabela de cores, tem muitas opções.

  • Não esqueça de compartilhar, desejando uma personalização que não encontrou aqui, deixe seu pedido nos comentários.

Nenhum comentário , comente também!

Postar um comentário

Você leu um artigo escrito com grande dedicação. Gostou? !
Deixe seu comentário, crítica e sugestão, eles são importantes para o desenvolvimento do Blog.
Sua mensagem será respondida o mais rápido possível.
Obrigado pela visita, volte sempre. Aproveite para inscrever-se e receber as novidades.