Postagens Vanessa S.
Personalizar os Titulos dos Posts no Blogger
Neste tutorial, trataremos apenas sobre as formas de personalizar os titulos dos posts.
Veremos como alterar tamanho e cor da fonte, como alinhar o texto do titulo, como configurar o tipo da fonte e como inserir bordas.
Para entender sobre a área dos títulos do post, requer que você já esteja familiarizado com os códigos referente ás postagens no seu blog e saiba sobre a personalização de fonte e texto. Se ainda não está, aconselho que leia estes tutoriais:
• Personalizando a área do Post – (Parte1)
• A propriedade CCS ‘Text’
• Variáveis do Tipo Fonte
No corpo do HTML dos templates minima e na maioria dos templates modificados, o titulo do post está representado por estas tags abaixo:
.post h3 .post h3 a - (link ativo) .post h3 a:visited - (Link já visitado) .post h3 a:hover - (Mouse em cima)
Já nos templates Designer de Modelo, o titulo do post está representado por estas tags abaixo:
h3.post-title
Todos os estilos que você quiser aplicar aos títulos deverão ser incluidos dentro destes trechos.
Personalizar o tamanho da fonte:
Nos templates minima, por padrão, o tamanho da fonte para os títulos, está configurado em 140%.
Mas você pode alterar o tamanho, basta substituir 140% pelo valor correspondente ao tamanho da fonte que você deseja.
Se quiser, pode incluir o valor correspondente ao tamanho da fonte.
Exemplo:
font-size:22px;
Personalizar cor da fonte:
Note que se no seu template, a cor do título do post estiver definido no Variable Definitions, seus valores devem ser modificados diretamente no Painel “Fontes e Cores” do Blogger.
A maioria dos templates existentes, como os padrões do Blogger (mínima) usam estas pré definições para o CSS, facilitando a alteração destas cores, através do painel , em “designer de modelo”.
Se não houver a possibilidade de alterar a cor através do painel , você pode aplicar uma cor diretamente no trecho CSS, basta incluir a variavel referente a cor que você deseja que o título do post tenha.
Exemplo:
color: #FFFFFF;
Se quiser, consulte a tabela de cores html.
Alinhamento do texto do título:
text-align:left -> titulo alinhado à esquerda.
text-align:right -> titulo alinhado à direita.
text-align:center -> titulo alinhado o centro.
text-align: justify -> titulo com alinhamento justificado (faz com que o texto contido em uma linha se estenda tocando as margens esquerda e direita).
Definir tipo de fonte para o título:
Você pode definir o tipo de fonte para o título diretamente no trecho CSS, basta incluir a definição da fonte que você deseja , defina sua fonte preferida, seguindo-se de algumas alternativas para ela, e encerre a listagem das fontes com uma fonte genérica, assim se o navegador do usuário não encontrar na memória do computador a primeira fonte, usará a segunda e assim por diante.
Exemplo:
font-family: ‘Trebuchet MS’, Arial, Serif;
O Google API disponibiliza algumas fontes diferentes que podem ser usadas no Blogger. Talvez você se interesse em conhecer mais sobre o assunto, em:
Fontes Diferentes para usar no Blogger
Definir estilo da fonte:
Estilo da fonte: normal e italic.
Se você deseja que a fonte do título se apresente em itálico, devemos incluir no CSS a variável para o estilo da fonte.
Exemplo:
font-style: italic;
A fonte pode ser definida para se apresentar em negrito(bold).
Exemplo:
font-weight:bold;
Você também pode aplicar efeito sombra na fonte do título.
Exemplo:
text-shadow: 1px 2px 3px #000;
Definir Tranformação da fonte:
Você pode definir transformações da fonte do título do post no formato caixa-alta ou caixa-baixa.
Para definir a propriedade de transformação de textos, você pode atribuir as seguintes variaveis:
text-transform: none; -> sem efeito.
text-transform: capitalize; -> Primeira Letra Das Palavras Maiúsculas.
text-transform: uppercase; -> TODAS AS LETRAS MAIÚSCULAS.
text-transform: lowercase; -> todas letras minúsculas.
font-variant: small-caps -> transforma letras em maiúsculas de menor altura.
font-variant: normal -> sem efeito variante.
Definir decoração da fonte:
Para a decoração do fonte do título você pode atribuir as seguintes variáveis:
text-decoration: underline; -> título sublinhado.
text-decoration: line-through; ->título com linha em cima.
text-decoration: overline; -> título sobrelinhado.
text-decoration:none; -> sem efeito.
Definir espaço entre as letras do título:
Você pode definir o espaço entre os caracteres, ou seja, o espaço que existe entre as letras do título.
Exemplo:
letter-spacing:1px;
Inserir borda no título:
Se quiser acrescentar borda ao título, basta incluir no CSS a variável para borda.
Exemplos:
border: 1px solid #000000 -> borda em toda área do título.
border-bottom:1px solid #000000 -> borda apenas abaixo do título.
border-top: 1px solid #000000 -> borda apenas acima do titulo.
Veja mais sobre tipos de bordas em:
Personalizar Bordas
Criar Bordas Arredondadas
Você também pode incluir um efeito sombreado na borda.
Exemplos:
border:1px solid #000000; box-shadow: 5px 4px 10px #ccc; -moz-box-shadow: 5px 4px 10px #ccc; -webkit-box-shadow: 5px 4px 10px #ccc; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;
No exemplo acima, as bordas estão arredondadas e possuem efeito sombreado.
Definir cor para plano de fundo do título:
Se quiser incluir uma cor como plano de fundo do título, basta acrescentar a linha “background” e aplicar os estilos a ela.
Exemplo:
background: #CFCFCF;
Se quiser você também poderá aplicar um efeito gradiente ao background do título.
Se quiser colocar uma imagem no título do post, veja neste tutorial como colocar imagem no titulo do post.
Agora que você entendeu as maneiras que pode personalizar o título das postagens, veremos um exemplo com código completo a seguir (Template Minima):
.post h3 {
margin:.25em 0 0;
font-family: 'Trebuchet MS', Arial, Serif; /*--tipo da fonte--*/
padding:15x;
font-size:22px; /*--tamanho da fonte--*/
font-weight:bold; /*--fonte em negrito--*/
text-align: justify; /*--alinhamento justificado--*/
text-decoration:none; /*--sem decoração da fonte--*/
text-transform: uppercase; /*--tudo em letra maiúscula--*/
letter-spacing:1px; /*--espaçamento entre letras--*/
text-shadow: 1px 2px 3px #000; /*--efeito sombra na fonte--*/
font-style: normal; /*--estilo da fonte normal--*/
line-height:1.4em; /*--espaçamento entre linhas--*/
color: #FFFFFF; /*--cor da fonte--*/
border:1px solid #000000; /*--borda em volta do titulo--*/
/*efeito sombreado na borda*/
box-shadow: 5px 4px 10px #ccc;
-moz-box-shadow: 5px 4px 10px #ccc;
-webkit-box-shadow: 5px 4px 10px #ccc;
/*borda arredondada*/
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background:#DADADA; /*--cor de fundo--*/
}
.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none; /*--sem decoração da fonte--*/
text-transform: uppercase; /*--tudo em letra maiúscula--*/
letter-spacing:1px; /*--espaçamento entre letras--*/
text-shadow: 1px 2px 3px #000; /*--efeito sombra na fonte--*/
font-style: normal; /*--estilo da fonte normal--*/
line-height:1.4em; /*--espaçamento entre linhas--*/
color: #FFFFFF; /*--cor da fonte--*/
border:1px solid #000000; /*--borda em volta do titulo--*/
/*efeito sombreado na borda*/
box-shadow: 5px 4px 10px #ccc;
-moz-box-shadow: 5px 4px 10px #ccc;
-webkit-box-shadow: 5px 4px 10px #ccc;
/*borda arredondada*/
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background:#DADADA; /*--cor de fundo--*/
}
.post h3 strong, .post h3 a:hover {
color: #000000;
}
Lembre-se, o código acima é apenas um exemplo, personalize o título do post de acordo com seu gosto e cores que combinem com seu template.
[alerta]ATENÇÃO:
Os códigos da área do título das postagens, publicados neste tutorial, foram retirados do Template Minima. Se o seu template já sofreu muitas modificações na área de post, provavelmente esta parte deve se apresentar de outra maneira.
[/alerta]
O template Simple é o mesmo do Mínima?
no meu encontrei este código____
h3.post-title, .comments h4 {
font: $(post.title.font);
margin: .75em 0 0;
}
Tirei ele e colei o teu exemplo e ficou muito bonito.
Gostei muito do post, é puro CSS.
parabéns__
abraço
CarlosRobertoRocha.blogspot.com
Não é o mesmo que o mínima, mas de todos, é o que mais se “aproxima”. 🙂
Olá, Vanessa
Agradeço suas dicas, principalmente uma postagem sua de 2010 (Fontes Diferentes para usar no Blogger), pois precisei usá-la. Não agradeci lá porque o comentário está fechado.
Vim aqui para saber se você poderia me ajudar com alguma orientação, pois já procurei como mudar mas não acho como. Creio que para você deve ser simples.
Está acontecendo algo estranho com o cabeçalho do meu blog. Na home ele fica como eu quero, ou seja, com letras brancas. Porém ao clicar nos itens do menu, a nova página que abre aparece com o cabeçalho em letras escuras, mas ao passar o mouse por cima das letras ele volta a ficar branco.
Creio que deve ser porque o cabeçalho se torna um link nas páginas secundárias e daí a fonte muda de cor. Sinto que “hover” deve ter a ver com isso.
Me ajuda aí, por favor. Sabe onde posso alterar isso? Gostaria que permanecesse sempre branco.
Tchau
Eu não sei te informar ao certo, pois cada template possui a sua variação de código, o que difere muito de um para outro, mas posso te sugerir que vc tente verificar as suas configurações de cores de links, ou algo relacionado as configurações de cores das fontes do cabeçalho. Dá uma olhada em “#header h1” , ou “#h1”, ou “#header a” , talvez ajude.
Olá,
No título das postagens não aparecem letras com acento e nem a letra “ç”. Você saberia me ajudar a resolver isso?
Obrigada desde já,
E parabéns pelo blog ^^
Eu não sei te dizer ao certo o que pode ser, mas posso recomendar que vc tente trocar a fonte por outra. Se nem assim resolver, sugiro que vc reporte esse problema no fórum do Blogger.
Parabéns Vanessa pelo maravilhoso artigo. Me ajudou muito.
Ótimo Trabalho. Parabéns! Adorei o post.
Quero parabenizar você pelo seu trabalho e atitude de promover com humildade e profissionalismo todos os seus tutoriais e dicas.
Desde que comecei a me envolver com o mundo blogger, desde 2005, sempre segui seus tutoriais e sua página.
Desde já agradeço, e que Deus ti ilumine.
Salve Oxalá! Salve Mãe Quitéria!
Obrigada pelo comentário, André.
Olá! Estou com uma dúvida! Eu editei o título das postagens do meu blog, mas as edições só aparecem quando eu clico na postagem, se eu estou na home page o título fica menor! O que posso fazer? Usei como base o modelo viagem!
Obrigada desde já.
como tira o link do titulo dos posts? =/
Lindoooooooooooooooooo!!! Uma obra prima esse tuto! \o/
Obrigada 🙂
Muito obrigadinho *-*
Suas dicas são ótimas!!!
Olá, o titulo na pagina principal fica ótimo, quando clico ele fica preto e sem nenhuma personalização, porque isso acontece!?
Beijinhos
Lamento, mas eu não tenho como te ajudar, pois deve ser algo relacionado ao seu template. De qualquer forma, agradeço pelo comentário.
Olá, eu não encontrei nenhuma outra forma de contato além dos comentários, e eu estou com uma grande dúvida, eu se quer sei se os comentários são moderados, ou se alguém vai ver, ainda mais a dona do blog, mas queira Deus que sim, o que acontece é que eu uso como base o template simples, o que é branco por inteiro, ele, ainda sem alterações feitas, o título de posts dele, quando se está no link do post, o título não fica mais linkável, e eu não sei como reverter isso, já tentei de várias formas mais nada, o título do post na página principal é de uma forma e quando se clica, é de outra totalmente diferente.
alguém poderia em ajudar?
Estes novos modelos do designer de modelo são assim mesmo, é padrão.
Oi, tudo bom? Preciso de ajuda… O título das postagens do meu blog aparece “errado” (como se fosse um link) na página inicial, mas quando aberto em uma nova aba aparece certo. Como posso resolver essa questão? Obrigada
clau por favor me ajuda é que eu estava tentando formatar o título ai eu vi que vc tava falando que dava para colocar imagem no titulo eu tenho imagem só que ella ficam em outro lugar ai eu descobri que é um tal de includable so que nao consigo mexer em nada sobre isso por favor.
Vc deve inserir imagem apenas pelo css. Releia o tutorial que eu indiquei, o link está no artigo.
Vanessa parabéns pelo ótimo blog!! Gostei muito do artigo e já modifiquei meu blog de notícias.
como posso alterar o alinhamento do titulo na /* Variable definitions, pois ja alinhei em h3.post e nada mudou, na variable está desse jeito ”
“.
Estou usando o modelo viajem do blogger.
Obrigado
Olá, existe uma maneira de fazer url mais amigaveis no blogger?
Ou seja alterar os nomes dos titulos do meu blog para um melhor SEO?
Oie Clau! Tem como tirar link dos titulos das postagens? Acho que sim né, por favor me ajude! Obrigada!
Por cara meu blog tava com as postagens tudo em maiusculos os títulos, esse tutorial veio na hora, valeu parceiro
vlw o melhor site q tem é o de vcs! tanks!
Como vc separa seus gadgets
Oi Clau seu Blog é bom demais para quem quer um bom blog, e não sabe ao certo o que fazer valeu mesmo obrigado e continue trabalhando…
Pesquisei por ter o problemas das letras grandes em cada palavra no título e finalmente consegui colocar isto ok com este post seu. Obrigado pela partilha!
Cumprimentos
Mauro Rocha
Tenta verificar a margim e padding.
bom post
mas tenho uma duvida como eu alinha o titulo do post
no meu ele ta muito pra cima
tipo se eu botar text-align: center
ele fica no centro só que muito pra cima
Descobri…
Se colocar o título dessa maneira:
TARZAN
Tarzan
Dará certo como mencionei
Obrigado .:: Clau ::.
pqdt85
Lamento,mas se há como, eu não sei te informar.
Tenho uma dúvida !!!
No Blogspot, coloco o título da postagem dessa maneira:
TARZAN (Tarzan) e é assim que ele fica, lógico…
Mas gostaria que ficasse assim:
TARZAN
Tarzan
Ou seja… tudo que estiver dentro dos parênteses ficasse na linha de baixo…
Teria como fazer isso? mudando os códigos no blogspot?
Obrigado pela atenção.
eu por acidente acabei removendo os títulos das postagens no meiu template (é um tal de <h3…), gostaria de saber como eu faço para devolver isso. Agradeço desde já e parabéns pelo site é o MELHOR que conheço!!!
fico triste pois não consigo fazer borda arredondada nos titulos das postagens.
Quando leio parece tudo tão fácil mas depois atrapalho-me toda e não consigo
Olá Clau, em primeiro lugar quero lhe dar os parabéns pela maravilhosa postagem! a imagem do titulo e a imagem do fundo da postagem ficaram perfeitas, mais estou com um problema de mais ou menos 5px é que ficou um espaço entre a imagem do titulo e a perte superior da borda e não consigo retirar esse espaço.
esta acontecendo isso em:
"margin:.25em 0 0;" mesmo aplicando o valor mínimo a distancia só chega a esses 5px e não diminui mais.
quando eu adiciono:
"top;"continua a mesmo coisa.
"padding: 0px 0px 0px 0px;" também.
Gostaria da sua ajuda Clau não sei mais que fazer!
Kagome-chan
Procure pelo artigo publicado:
"Instalar Ferramenta Breadcrumbs no Blog"
Ana
Os códigos da área do título das postagens, publicados neste tutorial, foram retirados do Template Minima. Sendo assim não tenho como te ajudar, pois cada template pode estar diferente um do outro.
Oi, naum consigo achar os códigos
post h3
.post h3 a
.post h3 a:visited
.post h3 a:hover
Nuam tem isso no meu Html , Me ajude!!
Eu sei que não tem nada a ver com esse post a minha pergunta, mas é pq não sei como devo procurar.
Eu gostaria de saber como eu coloco esse recurso no meu blo: Inicio » Postagens » Personalizar os Titulos dos Posts
Obrigada ^-^.
Márlon Silva
Lamento, mas não posso te ajudar. Não faço ideia do que possa ter acontecido no seu template. Sugiro que vc dê uma verificada nos códigos CSS do seu template e tente descobrir o seu problema.
Clau, pq que ficam duas bordas, uma baixo da outra na página inicial, e quando clico na postagem a borda não aparece?
Amigo seu blog tem um conteúdo muito bom,este post por exemplo mim ajudou muito. Entretanto seu template e agonizante. Serio. Não é um tema que deixa o visitante "a vontade" acho que é a mistura de cores fortes.
Lorena Gonçalves
Que bom! Obrigada pelo comentário.
Nossa amei,me ajudou bastante.
Beeeijos
Clau,eu quero aplicar este efeito igual no tìtulo dos posts do MB,com a primeira letra grande e o resto maiùsculas,sò que quando aplico as 2 tags sò aparece uma e não as duas,como você faz para aparecer os 2?
Jorge
Que bom deu certo, ainda bem q vc leu o artigo que fala sobre as fontes e conseguiu entender como funciona.
Já que vc gosta de usar fontes diferentes, dá uma lida neste artigo:
Fontes diferentes para usar no blogger , pode ser que te interesse.
Valeu pelo comentário, volte sempre!
Axo que finalmente consegui… rsrs
Mudei a fonte para "Mistral", pelo visto essa fonte é mais comum, já que pelo oq entendi, a fonte só aparece se estiver presente no pc do leitor.
Desculpa, nem agradeci,né? Ótimo tutorial e ótimo blog.
Pelo conteúdo tenho certeza que ainda deixarei muitos comentários.
Se quiser dar uma olhadinha no resultado – http://lokalola.blogspot.com/
Abraço
Eu segui os passos a seguir e coloquei a fonte "rage italic". No entanto, meus leitores não visualizam essa fonte, mas eu sim. Porq?
Valeu, muito bem explicado; Agora ja consegui deixar o titulo dos meus artigos mais com a cara do blog.
Valeu!!!!
:::Sweet Darkness:::
Lukas
Sim.
comandoblogger
Obrigada!
Rickzinhocps
Ficou muito bom o template!
mundodadanca1
Procure o tutorial "aplicar estilos a página inicial", pode ser q te ajude.
Excelente postagem! Tudo muito coeso e de simples entendimento. Clau só gostaria de perguntar como faço para colocar algumas partes da postagem dentro de uma caixa em destaque com fundo cinza. Fica aí uma sugestão para postagem. Mundo Blogger é Top.
Roger Dance
Meus parabéns clau, conseguiu denovo …
Você e o Mundoblogger são os melhores …
Ah, dá uma passada la no meu blog,só pra vc dar uma olhadinha no meu template, eu criei urilizando TODOS os seus tutoriais até porque, acompanho seu blog desde qando lançou o Ghotic Darkness, e como só consegui montrar meu próprio template agora, gostaria que vc visse.
Fui …
Mais um artigo muito bom aqui no Mundo Blogger.
É interessante que leigos no assunto: HTML e CSS, tenham esse tipo de tutorial a disposição. Mesmo eles não querendo, com o passar do tempo irão aprender o HTML e o CSS que todo blogueiro tem que saber.
Parabéns Clau.
Clau,estava esperando mesmo esse tutorial! Muito Bom!
Sò uma dùvida..
e
Na fonte do título do post,eu queria aplicar o efeito todas as letras maiùsculas com a primeira letra do tìtulo grande,tenho que acrecentar os dois trechos?
Obrigado! 🙂