Lista personalizada com imagem para Blogger

Eu sei que todos que estão lendo este artigo sabem o que é uma lista, mais caso tenha alguém que não sabe, eu vou mostrar o exemplo de uma logo abaixo.

• Lista 1
• Lista 2
• Lista 3

Isso é uma lista, e hoje estarei lhes ensinado como inserir uma lista parecida com a mostrada acima, então vamos deixar de conversa afiada e vamos ao que interessa.

Primeiro: Você vai clicar em DESING>>>DESIGNER DO MODELO como mostra a imagem abaixo.

Segundo: Depois você terá que clicar em AVANÇADO>>>ADICIONAR CSS.

Terceiro: Agora você vai inserir o seguinte código na parte branca ilustrada acima pela imagem (não se esqueça de clicar em aplicar ao blog):

[code type=codetype]

<!--Início do código de personalização da lista-->
ul.imglist {
margin: 0;
padding: 0;
}
ul.imglist li {
margin: 0;
list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiLMH8Z7-dTI6QEAdSrXdUqrb__Tr1hiZfMze4Ckw2eSd8GypQGh8Quof1zQM5hrhZoHGJazI4HfRvoWTpIjAelg_1tJWQ9mwM5TU6e2MBFRCt2STR8XC4xdaMm7PPMTrzs7N1YtZ06pt0/s1600/lista.png');
}
<!--Início do código de personalização da lista-->
[/code]

Depois de ter inserido o código basta escrever um post e adicionar uma lista. Após inserir uma lista você deve clicar em EDITAR HTML. Depois de clicar você verá um código mais ou menos como esse:

<ul>
<li>Exemplo de lista 1</li>
<li>Exemplo de lista 2</li>
<li>Exemplo de lista 3</li>
</ul>

Agora, você terá que inserir o seguinte código entre a abertura da tag <ul>:

[code type=codetype]class="imglist" style="text-align: left;"[/code]

Seu código ficará dessa forma (não copie o código abaixo):

[code type=codetype]<ul class="imglist" style="text-align: left;>
<li>Exemplo de lista 1</li>
<li>Exemplo de lista 2</li>
<li>Exemplo de lista 3</li>
</ul>[/code]

Depois de ter feito tudo o que foi ensinado acima você terá uma lista personalizada no seu Blogger. Você poderá usar esse método para subtítulos e títulos dentro dos artigos, como é usado noBlogando Com Facilidade. Veja um exemplo clicando aqui

Caso queira inserir outra imagem na sua lista, basta você ir no primeiro código que disponibilizei e trocar essa URL: http://4.bp.blogspot.com/-6qRRm05LECU/T9S_ALsUwtI/AAAAAAAAAP8/
pLaofDBoXAs/s1600/lista.png pela URL da sua imagem.

Pensando em todos os leitores fiz uma pesquisa por sites que disponibilizam ícones gratuitos, veja a lista:

• Website icons
• Icon let
• Ícones Br
• Icon Finder
• Icon Seeker

Nota: O único contra é o fato da lista personalizada ser inserida manualmente.

créditos do artigo: http://www.desenvolvendoweb.com/lista-personalizada-para-blogger/