Personalizar Lista Numerada nos Posts do Blogger

Deixe as listas numeradas de suas postagens totalmente personalizadas aplicando três estilos com design surpreendentes.

As listas fazem parte do cotidiano de todos nós. Utilizamos as como forma de organizar itens para que fiquem de maneira clara e objetiva de serem entendidos fazendo com que não se esqueça do propósito destinado. Dentre as muitas listas utilizadas, estão as listas em HTML, seu objetivo é também muito parecido com as outras, já que são usadas na organização de itens de um documento para que eles se distingam do restante do conteúdo.

As listas em HTML, sejam elas ordenadas ou desordenadas, por padrão não há estilo algum, aparecendo no documento com apenas caracteres que as definem como listas. Para poder existir um estilo é necessário a aplicação de CSS, e, é isso que você aprenderá fazer nesse tutorial.

* Em HTML, criamos manualmente uma lista ordenada (numerada) dessa forma:

<ol>
<li>Este é o primeiro item da lista</li>
<li>Este é o segundo item da lista</li>
<li>Este é o terceiro item da lista</li>
</ol>

Colocar Lista Numerada nos Posts do Blog

No Blogger o método é muito simples já que existe um botão padrão para isso. Logo ao criar um post, na parte superior você encontrará a opção lista numerada, como mostrado na imagem acima, basta selecionar os trechos que serão itens da lista e clicar sobre essa opção.

Porém, como citado anteriormente, o formato delas é bem básico e é necessário a aplicação de códigos em CSS para modifica-las personalizando de uma maneira que ganhem um maior destaque. Nesse artigo, trazemos três estilos de listas numeradas para blog. Estilos esses, que caso desejar podem ser alterados de maneira que fique com cores, tamanhos, bordas e muito mais combinando com o design de suas páginas.

Estilos de Lista Numeradas Personalizadas

Aqui disponibilizamos três estilos de listas numeradas para colocar em seu blog, porém, caso desejar personalizar ainda mais, você poderá se guiar pelos trechos comentados em VERMELHO  e ajustar a seu gosto.

Estilo 1

.post ol{
counter-reset: li;
list-style: none;
*list-style: decimal;
font: 13px 'trebuchet MS', 'lucida sans'; /* tamanho e estilo da fonte*/
padding: 0;
margin-bottom: 4em;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
font-weight: bold;
}
.post ol li{
position: relative;
display: block;
padding: .4em .4em .4em 4em;
*padding: .4em;
margin: .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: 2em;
color: #fff; /* cor do texto dos números*/
background: #FA8022; /* cor de fundo dos números*/
border: .2em solid #fff; /* cor da borda*/
-webkit-box-shadow: 0 8px 5px -7px #888;
-moz-box-shadow: 0 8px 5px -7px #888;
box-shadow: 0 8px 5px -7px #888;
text-align: center;
font-weight: bold;
border-radius: 2em;
transition: all .3s ease-out;
}

Estilo 2

.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 #e2e3e2; /* estilo da borda inferior dos elementos*/
background:#f2f2f2; /* 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:#A5A5A5; /* cor dos números*/
text-align:left;
background:#e2e2e2; /* cor de fundo dos números*/
text-indent:6px;
text-shadow: 1px 3px 2px #fff;
}
.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 #aeaeae; /* color of the triangle behind */
}

Estilo 3

.post ol{
counter-reset: li;
list-style: none;
*list-style: decimal;
padding: 0;
margin-bottom: 4em;
font: 13px 'trebuchet MS', 'lucida sans'; /* 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: .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: #bada55; /* cor de fundo dos números*/
height: 2em;
width: 2em;
line-height: 2em;
text-align: center;
font-weight: bold;
}
.post ol li:after{
position: absolute;
content: '';
left: -5px;
margin-top: -.7em; 
top: 50%;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left:8px solid #bada55; /* cor de fundo da seta*/
}

Como Personalizar Lista Numerada nos Posts do Blog

>> Acesse seu Blogger, vá em "Modelo" e depois "Editar HTML".

>> Clique no código do template, pressione "CTRL+F" e pesquise por ]]></b:skin>

>> Logo ACIMA da tag encontrada, cole o código do estilo de lista desejada.

>> Clique em "Salvar Modelo", vá em seu blog e veja como ficou.

Com a conclusão do tutorial, serão "atingidas" todas as listas numeradas presentes em postagens de seu blog e consequentemente todas elas terão o estilo escolhido. A partir desse momento também quaisquer lista numeradapublicada posteriormente em seus artigos adotarão o tema escolhido sem a necessidade de se repetir esse tutorial.

Como você pôde notar os passos são bem simples e não requerem nenhum tipo de conhecimento específico, porém, como em qualquer processo de modificação no template é necessário atenção aos passos para que tudo saia corretamente e seu blog passe a contar com essa prática forma de personalizar itens que você julga ser essencial para o entendimento dos visitantes.

Deixe seu comentário, pois ele é a motivação para nosso trabalho.