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

By Adriana Bentim em 10/03/2022

Tempo de leitura:

 

• 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!

• 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.

• 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

.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:

.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.

.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.

CURTA, COMENTE, COMPARTILHE!