Imagem no título da postagem

Veja como usar melhor seu Imposto de RendaVamos colocar um ícone ou imagem ao lado do titulo das postagens, isso serve para deixar bem localizado o inicio de cada um dos textos afinal tem alguns modelos de template que as coisas ficam juntas demais, portanto seria bom ter algo que destacasse o inicio de cada um dos posts do blog.

Fazer isso é bem simples entre na pagina editar HTML e procure por H3{... } ou o estilo que controla o titulo do blog que também pode ser h2 em alguns casos, em nosso blog de Dicas de Sites é assim:

post h3 a, .post h3 a:visited, .post h3 strong{….}

Para ter certeza que está modificando o estilo certo antes de começar faça um teste, coloque border: 1px solid #000000; dentro das chaves no estilo que você acha que é o certo no seu modelo isso faz aparecer uma borda preta em volta do estilo, então clique para visualizar o blog se apareceu a borda nos títulos da postagem é porque este é o lugar certo. Caso o fundo do seu blog seja preto ou escuro faça o teste usando ffffff em vez de 000000 para a borda ficar branca.

Agora vamos colocar uma imagem ao lado do título da postagem insira o seguinte código:

background-image: url(http://img195.imageshack.us/img195/668/iconebig.jpg);
background-repeat: no-repeat;text-indent: 30px;
background-position: left top;

Você só precisa hospedar uma imagem e colocar o endereço no lugar desta que está no exemplo, cuidado na hora de fazer a imagem para que ela não seja grande demais senão aparecerá somente uma parte dela. Outro ajuste necessário é o valor 30px no final da segunda linha, isso é um recuo de texto, ou seja, quando maior o numero mais espaço terá o texto da margem esquerda no caso de não usar o texto centralizado, então é só modificar esse numero para que o título não fique sobre a imagem. Agora é só visualizar e se ficou como você queria salvar as alterações no blog.

Veja também:

Personalizar menu jump
Fixar botões no canto da pagina
Colocar marcadores no blog
Usar domínio próprio no blog
Aumentar lucro com o blog
Related Posts with Thumbnails
Imagem no título da postagem
4/ 5
Oleh

106 Comentários

2 de agosto de 2009 18:30 delete

Boa dica, agora é ver se consigo fazer.

Reply
3 de agosto de 2009 01:32 delete

Boa noite sou do blog Tudo Direto e fui indicado ao Selo - Acertou em Cheio. E estou indicando o Seu blog para receber o Selo.
Basta Adiciona-lo em seu Blog e indicar para mais 10 Blogs de sua escolha.

Um Abraço

http://tudodireto.blogspot.com

Reply
3 de agosto de 2009 13:44 delete

Olá eu sempre estou aqui bisbilhotando seu blog e eu precisava colocar sub-menu na minha navbar só que esse tuto que vc tem é para gadgets e meu template já veio com menu horizontal, mas eu queria criar um submenu, será que vc poderia me ajudar?
Dá uma olhada lá, eu só quero mesmo colocar um submenu, pois o menu já tenho.
BjOs^^

Reply
3 de agosto de 2009 14:20 delete Este comentário foi removido por um administrador do blog.
3 de agosto de 2009 14:22 delete Este comentário foi removido por um administrador do blog.
3 de agosto de 2009 15:09 delete

não uso MSN para assuntos de blogs, mas podemos falar por email vou enviar um pra você.

Reply
3 de agosto de 2009 15:12 delete

kikinhah
aqui tem mostrando como colocar um submenu no blog
http://www.dicasparablogs.com.br/2009/05/como-colocar-submenu-no-blog.html

Reply
3 de agosto de 2009 15:29 delete

Ok fabiano, vou enviar um e-mail para:
fabiano1404@yahoo.com.br

PS: se quiser pode apagar esse comentario, por causa do seu e-mail

Reply
4 de agosto de 2009 07:34 delete

Eu segui os passos indicados e consegui. Também gostei do resultado. Se alguém quiser ver, está em http://origineitaliana.blogspot.com

Reply
4 de agosto de 2009 13:45 delete

Consegui, a única coisa que tive que fazer foi retirar o marcador de título original do modelo do meu blog.
Obrigada! :D

Reply
4 de agosto de 2009 20:18 delete

Ótima postagem

funcinou direitinho, Valeu!

Vistem meu blog e vejao o resultado: http://paginadointernauta.blogspot.com/

Valeu! Abraços

Reply
19 de agosto de 2009 08:25 delete

olá...parabens pelo blog...eu queria pedir uma postagem...queria saber qual codigo overmouse, que quando passar o mouse sobre uma as imagens do meu blog elas terem um efeito...pode ser qualquer efeito...quando postar me avise por email..lucaslcslima@yahoo.com.br obrigadoo sucessos

Reply
19 de agosto de 2009 15:43 delete

Lucas Caveiras downloads
aqui tem um efeito para as imagens ficarem semi transparentes quando passa o mouse sobre elas

http://www.dicasparablogs.com.br/2009/01/imagens-transparentes.html

Reply
7 de setembro de 2009 15:19 delete

boa dica mas naum consegui fazer v se me ajuda ae!!!
http://www.vinik9.blogspot.com/

Reply
7 de setembro de 2009 18:25 delete

visitei seu blog agora e pelo jeito já conseguiu resolver o problema

Reply
8 de setembro de 2009 15:35 delete

Segui sua dica, ficou muito bom o trabalho. Vim agradecer...

Reply
13 de setembro de 2009 15:04 delete

Oi!
Estou pedndo SOCORRO!
Nãoentendo nada, ou quase nada... afinal estou commeu blog a pleno. Só que estou em apuros! Pretendi colocar imagem no início do título das postagens e segui a orientação dada aqui.
Mas fiquei assim: quando visualizo a imagem está grande, com fundo branco (e o meu blog é escuro) e, pra complatar, a imagem ficou sobre o título. Daí que visualizo e não salvo.
Só que eu já havia salvado (!)aquele teste pondo ffffff. Disso resultou que a cor dos meus títulos ficaram em letras brancas e nãoconsigo mais trocá-las pra cor anterior!
Então, ficu pior do que antes! Tem jeito de me salvar disso?

Reply
13 de setembro de 2009 20:03 delete

Silvia
parece que já resolveu o seu problema visitei seu blog e está parecendo tudo normal. se ainda quiser mudar a cor entre na pagina editar html e procure por ffffff e troque essas letras, aqui tem o código de outras cores
http://www.dicasparablogs.com.br/2009/02/codigo-das-cores.html

Reply
17 de setembro de 2009 11:55 delete

oi valeu pela dica,vou ver se consigo fazer!!

Reply
7 de outubro de 2009 14:31 delete

eu coloquei o código mas ele não funcionou, a imagem apareceu por baixo do título da postagem,
era pra ficar antes, mas o titulo ficou sobre a imagen, aí eu apaguei o código.

Reply
7 de outubro de 2009 14:52 delete

SERJAO_O_MARMANJJUS
mas é exatamente isso que o código faz colocar uma imagem por baixo do titulo, ai você precisar fazer uma imagem e formatar o texto para dar a aparência que desejar

Reply
7 de outubro de 2009 15:44 delete

eu pensei que colocaria a imagem antes do título.
vou continuar procurando algo para colocar a imagem antes do título.

Reply
Anônimo
24 de novembro de 2009 20:20 delete

como eu faço para centralisar o titulo das postagens, ja tentei de tudo mas não consegui... como eu faço isso

Reply
25 de novembro de 2009 16:44 delete

o titulo da postagem é na pagina editar html, procure por h2{... ou h3{..... e coloque text-align: center; se já tiver isso com a palavra left ou right é só trocar.

precisa testar nos dois porque isso varia conforme o modelo

Reply
26 de novembro de 2009 19:08 delete

Tem Como estabelecer um modelo padrão para minhas postagens, por exemplo a letra de um so tamanho para todas as postagens?

Reply
27 de novembro de 2009 18:41 delete

Jhonatan
entre na pagina editar html e procure por .post{....} se não achar então coloque esse. no lugar dos pontinhos veja aqui como formatar o texto

http://www.dicasparablogs.com.br/2009/04/como-formatar-o-texto-do-blog.html

mas isso funcionará em todas as postagens do blog a não ser naquelas que formatou na hora de publicar

Reply
4 de dezembro de 2009 18:15 delete

Fabiano, eu nao consigo diminiur o tamanho do texto do titulo do meu blog. Teria como você me ajudar ?
Blog:
http://localdohumor.blogspot.com/

Obrigado.

Reply
4 de dezembro de 2009 19:49 delete

o titulo do blog você altera no estilo h1 no html do seu blog, basta usar uma formatação, mas no seu modelo aparece muitas vezes o h1, seria recomendado colocar em todos eles ou fazer testes para saber qual está controlando o titulo realmente, veja como formatar o texto

http://www.dicasparablogs.com.br/2009/04/como-formatar-o-texto-do-blog.html

Reply
4 de dezembro de 2009 22:12 delete

Valeu Fabiano, consegui arrumar.
Você sempre ajuda e sua resposta está sempre certa !

Reply
19 de fevereiro de 2010 11:12 delete

Estou adorando as dicas do nlog e já apliquei algumas em meu blog com sucesso, principalmente a diac de numeração nas páginas que não conseguia em outros tutoriais! Valeu Muito Obrigado!!!

Reply
Dan
28 de fevereiro de 2010 21:14 delete

Teria como selecionar uma imagem para cada postagem???
no meu blog são mais de um autor! e gostaria que sempre q um deles postasse aparecesse uma imagem diferente, não precisaria ser automático, mas que fosse possível por imagem diferenciada em cada título!

Reply
28 de fevereiro de 2010 23:54 delete

tem que ser a mesma imagem para todas as postagens

Reply
2 de maio de 2010 21:23 delete

Fabiano eu nao consegui
nao axo nenhuma linha dakelas h3
e a otra la
sabe outro jeito??

Reply
7 de maio de 2010 11:59 delete

Também to com o mesmo problema do Kevim, aqui tem H3 mas não tem nenhuma linha na frente fica assim : html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,

só essa que tem, me ajuda ai por favor fabiano.

Reply
19 de maio de 2010 01:14 delete

vlw a dica fabiano!! abrass

Reply
31 de maio de 2010 17:33 delete

Valeu pela ajuda, Fabiano. Tinha tentado fazer isso através de um tuto de outro blog mas não tinha conseguido. Abração.

Reply
23 de julho de 2010 16:36 delete

Otimo post, me ajudou bastante...

Reply
2 de outubro de 2010 13:14 delete

Obrigada, Fabiano,
De uma só vez coloquei imagem antes do título da postagem e inseri código se alinhamento do título. Depois decido se quero centralizar ou não.
Fico lhe devendo mais essa.
Super abraço!

Reply
12 de janeiro de 2011 17:55 delete

Fabiano , eu uso o tema espetacular Ltda , eu encontro a linha POST , SÓ QUE COM ESSE CÓDIGO :
<"Group description="Post Title" selector="h3.post-title, h4, h3.post-title a"">
Esse serve ?

Reply
22 de janeiro de 2011 19:25 delete

ahh eu conseguii. foi um pouco difcil achar o lugar certo, mas consegui =D

Reply
23 de janeiro de 2011 00:25 delete

é um pouco complicado mexer com códigos... mas ainda bem que deu tudo certo

Reply
24 de janeiro de 2011 17:37 delete

Olá Fabiano.

Minha dúvida é outra: como posso colocar uma imagem no lugar de "postagem mais recente" ou "postagem mais antiga" ? e se souber também pode me dizer como posso colocar o "comentários" em destaque, ou seja, num tamanho maior? vocês tem algum post que fala sobre isso? aguardo respostas.

Reply
24 de janeiro de 2011 17:48 delete

Paulinha
veja aqui Alterar texto postagens mais antigas e mais recentes, lá mostra também como usar imagens no lugar do texto

Reply
27 de janeiro de 2011 02:29 delete

Gostaria de saber se tem como aumentar o espaço para a imagem,pra q ela não fique cortada.

Reply
27 de janeiro de 2011 14:06 delete

Grilo
se colocar no código css(junto da imagem de fundo) height='100px; poderá definir a altura, mas acho melhor criar um imagem pequena para ficar proporcional ao titulo

Reply
12 de fevereiro de 2011 17:24 delete

ALGUEM PFV ME AJUDA EU PRECISO MUITO
COMO POR IMAGEMPOR EXEMPLO EM VEZ DE SER CATEGORIAS
IMAGEM DE EXEMPLO
http://lh5.ggpht.com/_33qAE7dP2vI/TVbdum8ketI/AAAAAAAADdU/cZKN2o2pAKs/s400/imagem.jpg

Reply
12 de fevereiro de 2011 18:03 delete

★ Paloma Britto· · ·
para colocar imagens de fundo no titulo dos gadgets pode usar esse tutorial mesmo, mas em vez de usar o estilo .post h2, use somente o h2 para colocar a imagem de fundo

se não funcionar faça o teste no h3, alguns templates são diferentes

Reply
4 de março de 2011 23:29 delete

não conssigo de jeito nenhum
o meu não tem o tal post h3
só h3.post-title, h4 {


h3.post-title a {


h3.post-title a:hover {

por favor me ajuda !

Reply
5 de março de 2011 00:55 delete

cada templte usa tags diferentes ... não temos com citar cada um deles.... normalmente é no estilo h2 ou h3

Reply
5 de março de 2011 17:30 delete

e como eu faço pra descobrir a tag que meu template usa ?

Reply
5 de março de 2011 21:28 delete

Fabiano eu naum consigo achar esse tao de h3 alguma coisa, vc poderia me dizer se fica perto de umas palavrinhas pra me localizar melhor?

Reply
6 de março de 2011 00:28 delete

Biankinha
o melhor jeito é achar é usando o ctrl F e procurar por h3 na pagina editar html

Delso
o jeito mais rapido é fazer uma teste ache o h2 e troque a cor ou coloque uma borda, clique para visualizar o blog e saberá se é esse o lugar que deseja modificar

Reply
9 de março de 2011 13:55 delete

nao tem como explicar isso melhor? eu fiz e a imagem apareceu em tudo quanto foi lugar menos do lado do titulo ¬.¬, e ainda pareceu minuscula!

Reply
9 de março de 2011 15:33 delete

Izayoki
a imagem não tem nada a ver com a formatação da letra

o html varia conforme o template, por isso tem que testar no estilo h2 e h3 do seu blog

Reply
1 de abril de 2011 19:26 delete

NOSSA CARA, ESSE BLOG É FODS!!!!!!!!
obrigado mano , sempre me ajudando!

Reply
12 de abril de 2011 20:07 delete

eu não consigo achar esta tal parte:
post h3 a, .post h3 a:visited, .post h3 strong{….}
já tentei clicar em espandir modelos
usei o ctrl+F lógico, subistitui por h2
por h4, até h1, e não achei =/ aerá que este código está diferente? eu uso o modelo "espetacular ltda" do blogger, se voce tiver um blog de testes com este modelo, poderia testar este codigo? não consigo achar =|

Reply
13 de abril de 2011 15:46 delete

procure somente por h3... essas partes variam conforme o template e as vezes nem tem é necessário adicionar para fazer a formatação

Reply
26 de maio de 2011 16:31 delete

olá, gostaria de ajuda para corrigir um erro na imagem da frente de minhas postagens. tentei fazer como vc ensonou aqui mas não acontece nada. No lugar da imagem tem um fundo preto e o texto: undefined
Como faço para tirar?

Reply
26 de maio de 2011 16:46 delete

Val Araujo
acho que já corrigiu o problema... entrei no seu blog agora e tem uma imagem ao lado do titulo (flor)

Reply
8 de junho de 2011 16:35 delete

Olá adoro o seu blog e estou sempre acompanhando ! eu queria saber como,a cada post a foto ser do autor do post? tendo em vista que eu ja tenho um amigo de postagem !abrçs

Reply
21 de junho de 2011 17:33 delete

veja na pagina editar html, acho que todos os templates tem h2, h3.... mas podem estar juntos com outras palavras... por exemplo .post h3

Reply
5 de julho de 2011 18:49 delete

Fabiano, vc pode me ajudar por favor..
o h3 que achei é nesse código







seria aqui? Coloco onde o background-image: url(http://img195.imageshack.us/img195/668/iconebig.jpg)...etc?
Agradeço que me ajude.
Abraço.

Reply
6 de julho de 2011 14:11 delete

Anna Carvalho
sim seria dentro das chaves do h3 {backgrou......}

Reply
7 de julho de 2011 10:25 delete

Nao achei. Olhei ate o fim, mas nao achei.

Reply
7 de julho de 2011 15:08 delete

se não tiver esse trecho você pode colocar o código no seu blog

Reply
1 de agosto de 2011 22:17 delete

Ótima dica. Vou usar no meu próximo post.

Reply
6 de agosto de 2011 14:30 delete

Ah, consegui! É que nao tava achando as chaves, aí escrevi elas depois do h3 e colei o código. Consegui! Valeu! :D

Reply
31 de agosto de 2011 18:48 delete

muito bom artigo, valeu pela dica!

Reply
7 de setembro de 2011 18:10 delete

Ola eu tenho um Blog, mas eu não estou achando esse codigo e nem o de como personalizar o gadget me ajuda juninhoq1@hotmail.com adc e fala cmg

Reply
8 de setembro de 2011 14:07 delete

esses códigos que falamos não tem no blog, você que deve adicionar

Reply
12 de setembro de 2011 12:08 delete

Eu pesquiso H3 e nao tem no meu :(

Reply
12 de setembro de 2011 14:23 delete

Aline
pesquise por h2.. isso varia um pouco conforme o template

Reply
Adriano
9 de outubro de 2011 08:40 delete

Acho que foi mais uma atualização do Blogger, não tenho certeza, mas agora os títulos dos posts deixam de ser links quando você está na página.

O seu "Imagem no título da postagem" ainda continua como link, mesmo estando na página com o texto completo. Tem algum código para isso, ou no seu blog é que não mudou?

Reply
Ben
9 de outubro de 2011 12:27 delete

no meu não tem h3 {...} so achei h2 mais não tinha chave

Reply
9 de outubro de 2011 14:32 delete

Adriano
alguns templates não tem link na pagina de postagem....

Reply
9 de outubro de 2011 14:33 delete

os estilos h2 se não achar com a chave pode criar o estilo CSS

Reply
Rez
11 de outubro de 2011 16:52 delete

Bom queria tirar uma duvida queria editar todos os titulo do meu blog
a pergunta se eu fazer isso sera bom ou ruim posso ter alguma puniçaõ?

Reply
11 de outubro de 2011 17:00 delete

Rez
o que está querendo dizer com editar todos os titulos? vai mudar um por um?

por exemplo essa postagem chama Imagem no título da postagem, eu poderia mudar para: foto ao lado do titulo do post

é isso que pretende fazer?

acho que não sofrerá punições, mas pode perder indexação, pela troca de palavras.... claro que passará a aparecer em outras, no exemplo que citei eu poderia perder posições na palavra imagem mas ganharia na palavra fotos


se for fazer mesmo isso faça aos poucos e veja se nota diferença e se vale a pena continuar

Reply
Rez
11 de outubro de 2011 23:11 delete

Fabiano Roberto
Isso mesmo que quero fazer eh que vi um negocio chamado seo ai reparei que meu titulos não esta relevantes ai vo trocar os titulos mais vo seguir sua dica vlws

Reply
23 de outubro de 2011 12:22 delete

uma dica boa seri se colocasse uma fita em cima do titulo mais o titulo ficaria em cima da imagem

Reply
23 de outubro de 2011 14:23 delete

o procedimento para colocar a fita é o mesmo... afinal é apenas uma imagem

Reply
13 de dezembro de 2011 16:37 delete

Deu um erro aqui, eu gostaria de pedir a ajuda de vocês, como eu TIRO a imagem? Queria colocar outra, talvez, mas, antes, eu preciso tirar aquela! Deem uma olhada no blog para ver como é que ele está: http://omeletedeovo.blogspot.com !! Obrigado :D

Reply
13 de dezembro de 2011 16:41 delete

tem que achar o código no seu html e trocar o endereço da imagem

Reply
25 de janeiro de 2012 20:09 delete

Ficou show de bola, brigaduuuuu!!!!

Reply
Anônimo
24 de fevereiro de 2012 15:43 delete

Cara por favor me ajuda, eu kero muito colocar no começo das ao lado do titulo da postagem uma foto para cada integrante do blog, cada um com uma foto diferente para os leitores saberem kem esta postando cada postagem...
ja peskisei em varios sites, no youtube, ja tentei mas nao conssegui. achei o seu blog e vc parece resolver os problemas de seus leitores eu keria ke vc desse uma olhada nesse site, ke é mai ou menos desse jeito ke eu keria faser em meu blog: http://www.animesheaven.com.br/
eu acabei de criar o blog e essa é a ultima coisa ke eu keria faser<
por favor eu te pesso uma ajuda, pra resolver essa causa.
esse ai é o blog ke eu montei a pouco tempo ainda vou por mais postagem mas por enkuanto é so isso: http://yugiohsignataries.blogspot.com/
me ajuda por favor....
kualker coisa manda um e-mail pra mim : alex.lima1095@gmail.com
aguardo resposta.
(foi mal ae os erros de portugues mas é pk meu teclado ta lascado XD)

Reply
9 de março de 2012 20:54 delete

Fiz o teste e não consegui.. O h2 do meu blog não é post... e o h3 s´mostra isso:

h3.post-title {
margin: 0;
font: $(post.title.font);
}

Fiz o teste... não deu certo... apaguei o cód.
E olha que já consegui colocar o meia mais... o balão de comentários... mas a imagem ao lado do título... não funcionou!!!!

Você pode me ajudar?
AH, tenho uma pergunta... no cod. tem que colocar a url da imagem... então... será a mesma em todos os posts? Ou tem que mudar sempre que for fazer uma postagem?

Reply
9 de março de 2012 22:17 delete

sabrina, se estiver falando da url para imagem de fundo é a mesma só precisa colocar no código CSS (h2 ou h3)

mas imagens nas postagens tem que enviar ao blogger

Reply
10 de março de 2012 01:41 delete

ah... então eu só faço o upload da imagem e pronto? Arrumo o texto "em volta" e só? Achei que esse código era pra imagem ficar do lado do texto postado... hahahah

Obrigada! =P

Eu amo esse blog!

S2

Reply
28 de setembro de 2012 01:44 delete

Para quem tiver dificuldades em encontrar o código correto é:
h3.post-title, h4{

Obrigado, sempre. Fabiano.

Reply
28 de setembro de 2012 11:39 delete

Edson F. o problema é que varia conforme o template, por isso não é possível dizer exatamente como é o código na pagina editar html

Reply
22 de dezembro de 2012 18:39 delete

fabiano eu to com uma duvida que agora fiquei encucado com isso eu mudei todos os h3 do meu html para h2 mais não deu erro algum salvo tudo normal ão mudo absolutamente nada eu fiz o certo ?
www.novinhasafada.com.br

Reply
22 de dezembro de 2012 19:49 delete

isso varia conforme o blog.. alguns usam h2 e outros o h3.

mas veja também se não tem coisas do tipo:

h3 .post{....

Reply
22 de dezembro de 2012 20:23 delete

Então fabiano tudo que tinha h3 eu mudei todos para h2 no temlate inteiro isso não altero nada no blog mais agora estou preocupada se irá alterar algo na indexação ou colocação no Google ? ou não tem nada a ver

Reply
23 de dezembro de 2012 00:07 delete

usar h2 e h3 pode influenciar na sua posição no google mas é dificil dizer qual a real importância disso.

Reply
Anônimo
30 de março de 2013 14:54 delete

não deu certo mais uma vez você não sabe fazer não achei H3{... } agora como faço?

Reply
30 de março de 2013 17:39 delete

veja se já tem alguma definição para o h2 ou h3 no seu html, por exemplo se tiver

h2{background:none}

então não aparecerá a imagem de fundo

Reply
26 de maio de 2014 19:50 delete

É possivel colocar uma imagem para identificar uma marcador?

Reply
27 de maio de 2014 00:29 delete

não tenho códigos para colocar uma imagem para cada marcador

Reply