Personalizando Listas com Marcadores!!


Boa noite! Nesse post vou mostrar como personalizar as listas com marcadores usadas em postagens, na sidebar e até mesmo nos comentários, substituindo o símbolo de círculo padrão por imagem.
Assim toda vez que inserir uma lista ela terá uma imagenzinha fofa do ladinho, assim:

  • Item 1 no post;
  • Item 2 no post;
  • Item 3 no post;

Na sidebar:

Nos comentários:
Você deve colar todos os códigos acima de ]]></b:skin>. Vamos lá!


  • Para a sidebar:


 .sidebar ul li {
	list-style: none;
	margin: 0;
	padding: 0;
	border-bottom:1px solid #fee;
    padding: 0 0 4px 12px;
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgywj1xyC5zRdXOfpDVzN55doXMRyPVGar2cB15NKzzWa7iX6d72sFVEqaWJWkVv6Zbo0jbiyRsO0LeH_RTZdWWNTR0MorAJd5N3xYSAk9M6UEYZCj_pw2KBUBQIjsOYy0JFy1lk02f/s1600/mini-153.gif") no-repeat 0 2px;
} 


  • Para os posts:

 .post ul li {
	list-style: none;
	margin: 0;
	padding: 0;
    padding: 0 0 4px 12px;
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgywj1xyC5zRdXOfpDVzN55doXMRyPVGar2cB15NKzzWa7iX6d72sFVEqaWJWkVv6Zbo0jbiyRsO0LeH_RTZdWWNTR0MorAJd5N3xYSAk9M6UEYZCj_pw2KBUBQIjsOYy0JFy1lk02f/s1600/mini-153.gif") no-repeat 0 2px;
} 


  • Geral (dependendo de como personalizou seus comentários, a imagem aparecerá do lado do avatar de cada comentarista):

 li {list-style: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgywj1xyC5zRdXOfpDVzN55doXMRyPVGar2cB15NKzzWa7iX6d72sFVEqaWJWkVv6Zbo0jbiyRsO0LeH_RTZdWWNTR0MorAJd5N3xYSAk9M6UEYZCj_pw2KBUBQIjsOYy0JFy1lk02f/s1600/mini-153.gif) circle;} 

É legal usar micro gifs, como esses...
Só substituir a URL da imagem (que é a da estrelinha amarela) dos códigos pela de sua preferência e acrescentar mais estilos ao seu gosto ^-^ Conheci e aprendi a personalizar o código graças à Lecca.
Lembrando que para inserir a lista de marcadores você deve clicar neste símbolo na área de postagens:

Espero que gostem e beijus!!! Bons sonhos ;3






Postar um comentário

7 Comentários

  1. Tutorial super útil, adorei! x3

    Muitos beijos,
    UsagiQUEEN~ Otome TeaTime!

    ResponderExcluir
  2. hehe gostei, mas ja to usando o modelo do KW
    ;33 kissus

    ResponderExcluir
  3. Estou com problemas, help?
    Não estou conseguindo deixa a imagem do tamanho completo.

    E está mal encaixada em relação ao marcador.

    onde modifico?

    ResponderExcluir
  4. Sobre o minha dúvida... Deixa pra lá acertei tudo. Foi muito útil!

    ResponderExcluir
    Respostas
    1. Que bom que conseguiu ^^
      Beijus e obrigada ;3

      Excluir
  5. oi, eu estou com duvidas, sou meio Noob, quando o assunto é blogger, eu tenho um, "www.contosdeooo.blogspot.com.br" e não sei mexer no CSS, basicamente nem sei para o que serve, quando vc diz para colocar acima de "]]>" eu não sei aonde fica, também gostaria que você ensinasse como fazer esses botoes de parceiros, porque era o que eu estava querendo, se você tivesse um vídeo tutorial explicando beeeeeeeeeeem explicadinho, peço desculpas mas comigo teria de ser por exemplo, primeiro clique em layout, depois em avançado, ta vendo aquele simbolo? clica nele... entendeu ? desculpa viu? eu estou aprendendo ainda T.T

    ResponderExcluir
    Respostas
    1. Imagina; todo mundo tem que ir aprendendo aos poucos; se vc soubesse quanto eu demorei para entender mais um pouquinho sobre o Blogger ;___;
      Esse código desse post pode ser adicionado antes de /b:skin que fica na opção Modelo - Editar HTML, aí vc clica em seu código, aperta CTRL+F e digita na caixinha de buscas: /b:skin
      Quase tudo em CSS se coloca antes disso. Farei vídeos tutoriais para postar aqui em breve :3
      Bjus...

      Excluir

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Deviantart

up