Como Formatar o Texto do Blog

Quando o assunto é fazer mudanças num blog o mais importante que precisamos saber é como funciona a formatação do blog, ou seja, como definimos onde as coisas vão aparecer, larguras das colunas, quantas colunas o blog tem, quais cores vamos usar, tipo, tamanho e cores das letras, imagens ou cores de fundo, bordas e outras coisas, isso tudo é feito com estilos CSS.
Falar sobre todos esses assuntos de uma só vez é praticamente impossível então vamos por partes, hoje vamos falar sobre formatação do texto. Veja o exemplo abaixo:

.post{font-family: "Comic Sans MS";
color: #0000CC;
font-size: 12pt;
font-style: italic;
line-height: 120%;
font-weight: bold;
text-decoration: none;
}
O inicio dele é o nome do estilo no exemplo acima .post, ou seja, esse estilo será aplicado nas postagens do blog, também poderíamos usar em qualquer outra parte: #sidebar é a coluna, body é a pagina inteira e assim por diante.
Agora vamos mostrar o que faz cada uma das linhas:

font-family: "Comic Sans MS";
Tipo de letra, poderia ser qualquer outra: arial, verdana, Times New Roman, mas não use fontes que você baixou da internet, porque o blog vai usar as fontes disponíveis no computador da pessoa que está visitando o blog, ou seja se essa pessoa não tiver a fonte que você escolheu ele vai usar outra e isso pode prejudicar sua formatação.

color: #0000CC;
aqui temos o cor do texto, para alterar é só trocar o código da cor.
font-style: italic;
Essa linha faz a fonte itálica, se não quiser apague essa linha ou coloque a palavra normal no lugar de italic

font-weight: bold;
Isso faz texto em negrito, se não quiser apague essa linha ou coloque a palavra normal no lugar de bold, se apagar a linha e o texto continuar em negrito é necessário deixar essa linha, mas com a palavra normal no lugar de bold, isso acontece, por exemplo, se outro estilo CSS já estiver usando bold, por exemplo, se usou texto em negrito no body{...} a pagina inteira ficará em negrito então onde queremos texto normal é preciso colocar font-weight: normal, essa mesma explicação vale para qualquer coisa feita em CSS, como por exemplo, o texto em itálico.

font-size: 12pt;
O numero 12 é o tamanho da letra

line-height: 120%;
120 é a altura da linha, ou seja, se aumentar esse valor terá um espaçamento maior entre as linhas do texto.

text-decoration: none;
Essa linha tira o sublinhado do texto, principalmente usado em links.

Se quiser criar uma formatação para um determinado texto pode usar como nome do estilo qualquer palavra, como .especial{....} o ponto antes da palavra especial faz parte do código, você pode usar esse estilo dentro de uma postagem ou nas colunas do blog inserindo o texto através da pagina layout, adicionar gadget, html/javascript e colocando o código <div class="post">seu texto formatado</div>

Por ultimo precisamos dizer para tomar muito cuidado com as aspas e ponto-e-vírgula e chaves que estão neste código, pois se apagar qualquer uma delas o código pode não funcionar corretamente.

Veja também:
Criar ou modificar bordas
Colocar imagens de fundo
Fazer botões sem usar imagens
Criar botões usando imagens

Adicionar ao iGoogle ou Google Reader

Link para esta página

Recomende por E-mail


Related Posts with Thumbnails

42 comentários:

Amigas da Educação disse...

Oi, seu blog e massa... coloquei o seu blog no meu, me adiciona no seu tambem...ok
Valeu...

Anônimo disse...

Muitíssimo obrigada por ensinar estas coisas de livre e espontânea vontade!
Será muito útil!

Dario disse...

Olá, gostei muito das dicas, realmente uteis!

Como posso colocar scrips em meu blog de maneira que este esta formatado de acordo com a linguagem.

ex: Quero colocar uns scrips Python no meu blog, mas quero que apareça toda formatação de acordo com o padrão que existe em outros foruns, blogs, etc. E se eu coloca-se um code em C++, que este apareça com a formatação padrão de outros foruns e blogs, endente ??

Desde já valeu !

Fabiano Roberto disse...

poucos scripts já vem com a formação então se o que está tentando colocar não tem terá que fazer você mesmo, usando uma div, assim:

<div style="....formatação"> script </div>


imagino que funcione, não posso falar exatamente dos script que você citou pois nunca usei.

Rosa disse...

Olá, queria pedir sua ajuda para o meu blog na caixa de novas postagem não tem mais as opção colocar outra cor e nem formatar para justificado, centralizados essas partes todas gostaria de saber se tem como vc e ajudar adorei o seu blog...

Fabiano Roberto disse...

na pagina de postagem tem duas guias, veja no canto direito em cima de onde você escreve, lá tem editar html e escrever, clique em escrever.

se não der certo pode ser uma falha momentanea do blogger, então aperte o botão f5 ou atualizar pagina, isso deve resolver

Rafael 10 disse...

entrem no meu blog e veja o exemplo de como esse site me ajudou muito

http://rafaeldiasgaleno.blogspot.com/

Elaine disse...

Muito legal o seu blog.
Fiz meu blog recentemente e estava completamente perdida!!!
Seu blog esta me ajudando muito!
VLW!!!!!!!

Visite meu blog e veja como ficou, graças a sua ajuda..
Tem q mudar muita coisa.. Mais ta indo.
rsrsr.

Fique com Deus!

www.atelierdanane.blogspot.com

Tauren disse...

No meu blog todos os link's estão sublinhados, eu ja mexi em tanta coisa para tentar tirar o sublinhado dos links mais nada da certo.
Alguem pode me ajudar como posso arrumar isso ?
Link do blog: http://taurengames.blogspot.com

Preciso de ajudar para tirar o sublinhado dos link's.
Obrigado !

Fabiano Roberto disse...

Tauren
visitei seu blog agora e acho que já resolveu o problema, não tem sublinhado nos links, mas se ainda tiver alguma duvida olhe essa postagem
http://www.dicasparablogs.com.br/2009/07/efeitos-em-links-sublinhado-sobrelinha.html

Fabiano Roberto disse...

Tauren ou talvez o que está procurando não seja sublinhado mas uma borda embaixo dos links, veja isso no html do seu blog:

#main-wrapper a {
border-bottom:1px solid #999999;
color:#FFFFFF;
}
#main-wrapper a:hover {
border-bottom:1px solid #666666;
color:#999999;
text-decoration:none;

apague as linhas que começam border-bottom:1px .... além dessas tem outros no seu html um pouco mais abaixo deste trecho, pode tirar todas, mas sugiro ir tirando algumas e visualizando o blog para ter certeza que está fazendo exatamente o que você quer.

Tauren disse...

Fabiano, desculpe mais o meu blog ainda está com links sublinhado, observe as imagens e os links que tem nos post(os links de download), eles estão sublinhados na cor cinza e quando você passa o mouse ele fica na cor preta, ja tentei com as dicas do post "Efeitos em links" mais nada da certo... Se puder me da mais alguma dica eu agradeço.
Obrigado.

Fabiano Roberto disse...

Tauren

você tem razão, veja o meu outro comentário sobre as bordas, aquilo não é sublinhado são bordas.

Tauren disse...

Fabiano muito obrigado, era isso mesmo, agora eu conseguir tirar as bordas que eu queria.
Muito obrigado mesmo cara.
Abraços.

Rabay Downloads disse...

Não consigui mudar o tamanho da fonte da minha barra do lado esquerdo. Aonde eu posto meu perfil.
Por favor me dá uma mão...
http://rabaydownloads.blogspot.com/

Fabiano Roberto disse...

Rabay Downloads

geralmente a fonte das colunas é em #sidebar{...

se não tiver tente colocar esse linha, mas veja se já existe algo parecido definindo o estilo da fonte

André Rabay disse...

Pow Fabiano valeu pela atenção mas não consegui mudar, futuquei tudo até o que não devia e nada mudou.
A medida que eu ia mudando eu vizualizava e nada mudou o tamanho das letras.

Brigadão pela atenção

Rabay downloads

Fabiano Roberto disse...

as vezes tem coisas duplicadas no codigo, por exemplo, se colocar algo definindo a postagem(.post) e já tiver isso em outra parte não funcionará corretamente, por isso é necessário procurar em todo o html do blog

Myrian disse...

Olá! Seu blog é show! Estou aprendendo muita coisa e mudei todo o visual do meu blog. Mudei cores e tal. Mas acho que o blog ficou muito largão... gostaria que ele tivesse três colunas. Fui lá no seu tutorial, que aliás está super explicado, mas o código html do meu blog está uma confusão só... não consegui encontrar nadaaaaaa! Ou melhor, até encontrei, mas tudo muito diferente do que vc postou. Aí fiquei com medo e achei melhor não mexer pra não estragar o que já está bom... (mas quero que fique melhor!)
E gostaria também que o espaçamento entre as linhas diminuisse, mas como te falei o código do meu blog está uma bagunça! Por exemplo, vc fala que o espaçamento tem que aparecer em uma linha assim: line-height: 120%; só que no meu aparece line-height em dois lugares e assim:
#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

#header a {
color:$pagetitlecolor;
text-decoration:none;
}

#header a:hover {
color:$pagetitlecolor;
}

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}

Que loucura! Que é isso de 1.2em e 1.4em?? O que faço? Gostei do jeito que ficou o blog, mas se conseguisse ajeitar essas duas coisinhas ficaria mais feliz. Será que vc pode me ajudar?

dá uma olhada no meu blog:
myriangomesimoveis.blogspot.com

Ainda estou inserindo funcionalidades nele. Logo, logo colocarei os blogs que sigo e o seu certamente estará lá!

Valeu! Saudações!

Fabiano Roberto disse...

Myrian

isso é o espaço entre as linhas do texto line-height

e o espaçamento entre as letras line-height

os valores estão em uma outra medida 1,2 em, mas poderia trocar isso por pixels ou porcentagem sem problemas é só ajustar os valores.

salve um cópia do seu modelo antes de começar a mexer, assim não corre o risco de perder nada.

Meu Sonho Infantil disse...

Oi...
Adorei o seu blog, muito bom mesmo, eu criei o meu recentemente e ainda estou aprendendo muitas coisas para colocá-lo em parecido comigo.
Gosto muito de suas dicas, e tenho uma curiosidade:Vi alguns blogs bem personalizados, com tematica, muito colorido.Gostaria de personalizar o meu com a Turma do Pica Pau, como faço? Poderia me ajudar?
Sucessos...

Abçoss

Fabiano Roberto disse...

para personalizar o seu blog com o pica pau ou qualquer outra coisa você precisa achar imagens e usar algumas como fundo do blog ou perto dos titulos...

é bom ter um programa para editar imagens assim poderá modifica-las para usar no blog

se quiser aceitamos encomendas de templates, é só escrever para nosso email e acertaremos os detalhes

Adiléa disse...

Olá Fabiano, eu adoro suas dicas para blog!!!Inclusive seu link já se encontra no meu blog.Me ajudam demais!!Eu estou doida pra colocar 3 colunas no meu blog, mas vejo tantas coisas pra fazer que acabo desistindo. Por favor me ajude!!Ou seja, veja o meu blog e me dê uma opinião. Talvez mudar de template seria melhor. Fiz 1 ano de blog e quero mudar o visual. Abraços

Fabiano Roberto disse...

Adiléa, se resolver trocar o template salve o código dos gadgets antes para não correr o risco de perder nada

Rilva Sousa-Muñoz disse...

Tentei aumentar o número de postagens na página principal do meu blog (Blogger), de 25 para 40, mas, apesar de ter sido salva a alteração que fiz na configuração, não foi feita a modificação, e continua com 25 postagens na página principal. Repeti a ação, e nada! Você pode me indicar a solução para isso?

Fabiano Roberto disse...

Rilva Sousa-Muñoz
25 já são postagens demais para a pagina inicial do blog vai demorar demais pra carregar(aparecer) o blog e ninguém irá ler tudo, pense bem quantas postagens de um blog que não seja o seu, você lê?

Rilva Sousa-Muñoz disse...

Tem razão. Obrigada.

CLJ São José disse...

Parabéns pelo blog! Suas dicas são de grande utilidade para mim.
Mas, nesse momento estou com um problema, a página inicial do meu blog está com todos os links sublinhados e alguns não ficam da cor que eu programei. Mas se eu abro a página de um post específico está tudo certo. Já olhei o html e não encontrei nenhum erro.
O endereço do blog: http://clj-sj.blogspot.com/
Por favor, me ajude. Obrigado!

Fabiano Roberto disse...

CLJ São José

no html você encontra o seguinte:

a:link {
color:#6f3c1b;
text-decoration:none;
}
apague essa parte :link, deixe só assim:

a {
color:#6f3c1b;
text-decoration:none;
}

e depois apague o trecho:

a:visited {
color: #940f04;
text-decoration:none;
}

CLJ São José disse...

Amigo, tentei fazer o que você falou, mas não funcionou. Notei que o problema só ocorre em páginas que tem mais de 5 postagens, as que possuem menos o problema não aparece. Essa informação te ajuda?!
obrigado!

Fabiano Roberto disse...

CLJ São José
pelo que vi no seu blog você está formatando o texto a cada postagem na hora de publicar, assim não conseguirá deixa-las iguais, precisa parar de formatar o texto na hora de postar e depois fazer uma formatação só na parte #main{..} do html do blog

CLJ São José disse...

Obrigado pela ajuda. Vou tentar isso. Mas só vai adiantar a longo prazo, visto que já estão todas as postagens formatadas e vou precisar postar novas para ver o resultado.
Muito obrigado mesmo!

L. Tadeu disse...

Coloquei "text-decoration:none;" em todos os trechos de links e h1, h2 e h3 e tudo mais, porém continua sublinhado ao passar o mouse, teria alguma maneira de tirar TODOS os links que ficam sublinhados ao passar o mouse, e colocar pra mudar de cor ao invez de aparecer sublinhado...
Obrigado pela ajuda Fabiano :)

Fabiano Roberto disse...

para formatar links é preciso alterar o estilo a{... ou a:hover{....

Yasmin disse...

Oi, amei o seu blog. Tipo, criei um blog e queria edita-lo. Não quero que meu blog fique parecido com todos os outros blogs. Queria fazer uma coisa minha. Tipo, o meu blog será sobre piadas, vo colocar vídeos, essas coisas...
Gostei da suas dicas, só que estão mt complexas e n consegui entender. Você tem msn, só pra me explicar direito. Queria colocar uma imagem de fundo bacana. Mas n sei editar nada. Só sei editar o básico mesmo. Por favor gostaria da sua ajuda. Bjs. Dá uma olhada no meu blog, e me dá umas dicas. Bjs.

Fabiano Roberto disse...

não usamos MSN para assuntos de blogs, mas se quiser escreva para nosso email.

Yagami-Kun disse...

Olá Fabiano, mudei o background...antes ele era branco, agora é preto...
nessa postagem aqui: http://x1-downloads.blogspot.com/2010/05/harvest-moon-back-to-nature-iso.html
tem um comentario, e a cor da fonte é preta, sendo assim não tem como ver. Tambem do lado do icone que representa os comentarios tá escrito assim: "1 comentario", e em baixo, no outro icone, tem do lado: "Postar um comentario" e a fonte também é preta.
como que eu mudo a cor deles? eu só consegui mudar em "Lucas disse..."
Valeu.

Fabiano Roberto disse...

Yagami-Kun


entre no html do seu blog e procure comment-body depois altere para ficar assim:
.comment-body {color:#ffffff;
margin-left: 0;
padding-left: 0;
}

Yagami-Kun disse...

Cara, eu consegui mudar a cor do comentário, mas como que eu posso mudar tambem a onde fica: "1 comentário" e "Postar um comentário"

eles se encontra do lado desse icone: http://sites.google.com/site/n1cki2007/commentsqt2.gif

muito obrigado! =D

Fabiano Roberto disse...

você precisa colocar como uma imagem de fundo nos comentários, veja no link abaixo
Imagem no título da postagem

aqui fala sobre imagem no titulo, mas o procedimento é o mesmo, só que vai colocar esse código nos comentários.

.comment-author a, .comment-author a:visited {
color: #0000CD;
}

Priscila Veronica disse...

Olá,td bem ?
Muito bom o tutorial, mas aonde eu coloco esses códigos? Debaixo de quais tag´s ?

Abraço!

Fabiano Roberto disse...

não tem um lugar exato, pode ser depois de body{...}