28 de jun de 2013

Personalizando as "listas" do blogger

Agora que voltei a postar tutoriais, estou muito mais motivada a blogar. Apesar de estar um pouco ausente, minhas provas vão começar quarta-feira, e estou um pouco ocupada com trabalhos de escola e outras coisas. Queria escrever um post sobre alguns assuntos variados, mas estou sem tempo. Espero que não se importem com mais um tutorial, estou mesmo sem tempo. 
 O tutorial de hoje eu nunca vi em lugar nenhum, apesar de ter certeza que pode ser encontrado, caso procure. É sobre uma personalização que quase não vejo, já que o próprio item é pouco usado. Estou falando das listas do blog.
As listas servem, obviamente, para numerar ou classificar as coisas em uma espécie de categoria. Minha explicação não ficou nada boa, então veja um exemplo das listas:


Agora vamos aprender a personalizá-las:
 (Veja um exemplo da lista personalizada aqui.)

1- Vá no HTML do seu blog, aperte CTRL+F e procure por ]]></b:skin>;

2-ACIMA disso, cole:

Para personalizar a lista comum:

.post-body ul li {
list-style: disc url(http://i122.photobucket.com/albums/o260/mhilka/iconesagenda/Coracao.gif);
font-size:13px;
vertical-align: top;
padding: 7px 0px 4px 0px;
margin-left: 7px;
}

Para personalizar a lista de números:
.post-body ol li {
list-style-type: decimal;
font-size:13px;
vertical-align: top;
padding: 7px 0px 4px 0px;
margin-left: 7px;
}

Entendendo os códigos:

list-style: disc url(http://i122.photobucket.com/albums/o260/mhilka/iconesagenda/Coracao.gif): gif que antecede os itens da lista. Troque por "none" caso não queira, ou mude a URL do mini gif.
list-style-type: decimal: Deixa a lista com números.
font-size:13px: Tamanho da fonte.
vertical-align: top; Alinhamento.
padding: 7px 0px 4px 0px: Espaçamento.
margin-left: 7px: Margem entre a lista e a "beirada" da postagem.

Você pode colocar hover, mudar a fonte, a cor, o estilo da fonte, etc. Basta usar a criatividade.

8 comentários:

  1. Eu já estou de férias, apesar de só começarem semana que vem, falei com meus professorees e eles disseram que minhas notas estão boas e não tem necessidade ir mais. Só o de matematica que ficou com um pouco de receio, mas no final me liberou também.
    Que lindo q fica, vou fazer no próximo lay u.u

    ResponderExcluir
    Respostas
    1. Minhas provas nem começaram ainda, minha escola é só enrolação, a gente nem tem férias direito em julho T-T

      Excluir
  2. Que post útil! Adorei seu blog, realmente muito incrível, tem tudo para fazer o maior sucesso; Já estou seguindo, segue o meu também?
    www.espacegirl.com

    ResponderExcluir
    Respostas
    1. Obrigada, vou dar uma olhada no seu ^^

      Excluir
  3. gente me ajuda com o meu blogger , quero fazer ele bombar ,ganhar seguidores.

    ResponderExcluir
  4. gente me ajuda com o meu blogger , quero fazer ele bombar ,ganhar seguidores.

    ResponderExcluir

Seja educado, não use palavras ofensivas ou de baixo calão;
Comente algo relacionado ao post, para outros assuntos use a ask;
Obrigada e volte sempre!