sábado, 24 de setembro de 2011

Como colocar imagens nos marcadores no blogger

image

   

 

   E ai Gent fina, to ai de novo, hoje vou mostrar como colocar imagens nos marcadores no blogger, também pode ser usado pra personaliza o rodapé dos posts como fiz aqui no blog, mas isso vou mostrar em outra postagem.

   Vamos ao que interessa, primeiramente você deve escolher o tipo de marcador, que pode ser:

  • Disc – formato de um disco, aquela bolinha
  • Circle – quase a mesma coisa que o disc
  • Square – um quadradinho(que ninguém usa)
  • decimal – mostra números ordinais normais(123456789)
  • lower-roman – números romanos em ordem crescente
  • upper-roman – números romanos decrescentes
  • lower-alpha – o alfabeto em ordem crescente(ABCD…)
  • upper-alpha – o alfabeto decrescente(ZYX…)

       E agora o que realmente nos interessa:

  • disc url(o endereço da web de uma imagem)
  •     Se você que colocar imagens nos marcadores do blogger só vai precisar do último, ou outros são listas simples.

    Depois que você decidir como quer que seja seu marcador deverá acrescentar logo depois

    inside(para a imagem ficar no inicio do marcador)

ou

    outside(pra ficar no final do marcador).

    Agora pra começar vá até editar HTML na aba layout de seu site, marque a caixa “expandir modelos de widgets” e procure pelo código

.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebar li {
margin:0;
padding:0 0 .25em 15px;
text-indent:-15px;
line-height:1.5em;
}

 

E acrescente logo abaixo:

 

.sidebar ul li {
list-style: disc url(link da imagem);
vertical-align: top;
padding: 0;
margin-left: 15px;
}

 

   Para encontrar uma imagem que você goste para os marcadores procure no google imagens, e após ter feito a primeira busca vai aparecer na lateral da pagina uma serie de opções, inclusive o tamanho, escolha “ícone” ou defina um tamanho pequeno(16X16 ta de bom tamanho):

image

    Se a imagem ficar muito grande basta ir até o código HTML de novo e modificar a parte

.sidebar ul li {
list-style: disc url(link da imagem);
vertical-align: top;
padding: 0;
margin-left: 15px;
}

    Pelo tamanho de sua imagem em pixels, se for uma imagem de 25 pixels ponha 25 em lugar de 15 que vai ficar perfeito.

    Não é demais lembrar que você deverá ir até a url final da imagem para copia-la, n vai mi copia o URL do google e depois vim diz que deu erado!

    Essa mesma regra pode ser aplicada a qualquer lista, veja como fiz nos tópicos relacionados aqui do blog por exemplo.

 

Gostou deste post? Então assine grátis nossa newsletter e tenha todas as atualizações do estudando internet diretamente em seu e-mail.

2 comentários:

  1. Amei o tuto,aprendi muito obrigada!
    To seguindo o blog,aproveita e segue o meu também:
    minhas-confissoes-2012.blogspot.com

    ResponderExcluir
  2. Gostaria que tivesse um código que colocasse uma imagem diferente em cada marcador.

    ResponderExcluir