domingo, 3 de fevereiro de 2013

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  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('http://4.bp.blogspot.com/-6qRRm05LECU/T9S_ALsUwtI/AAAAAAAAAP8/pLaofDBoXAs/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:
Nota: O único contra é o fato da lista personalizada ser inserida manualmente.
créditos do artigo: http://www.desenvolvendoweb.com/lista-personalizada-para-blogger/

Um comentário:

  1. Olá,
    Faço parte da Agenda dos Blogs, vim visitar seu blog e já estou te seguindo, venha seguir o meu também, será um prazer recebê-la.
    http:/passatemposeartesanatos.blogspot.com.br

    Beijos.
    Shirley Nesi

    ResponderExcluir

Nós unimos para divulgar o nosso trabalho como blogueiras.Então para nós sua opinião vai alem de importância é essencial para o desenvolvimento do nosso trabalho:

Related Posts Plugin for WordPress, Blogger...