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

Link desta Pagina

Compartilhe essa Página

104 comentários:

  1. Boa dica, agora é ver se consigo fazer.

    ResponderExcluir
  2. 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

    ResponderExcluir
  3. 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^^

    ResponderExcluir
  4. Este comentário foi removido por um administrador do blog.

    ResponderExcluir
  5. Este comentário foi removido por um administrador do blog.

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

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

    ResponderExcluir
  8. 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

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

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

    ResponderExcluir
  11. Ótima postagem

    funcinou direitinho, Valeu!

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

    Valeu! Abraços

    ResponderExcluir
  12. 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

    ResponderExcluir
  13. 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

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

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

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

    ResponderExcluir
  17. 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?

    ResponderExcluir
  18. 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

    ResponderExcluir
  19. oi valeu pela dica,vou ver se consigo fazer!!

    ResponderExcluir
  20. 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.

    ResponderExcluir
  21. 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

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

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

    ResponderExcluir
  24. 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

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

    ResponderExcluir
  26. 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

    ResponderExcluir
  27. 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.

    ResponderExcluir
  28. 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

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

    ResponderExcluir
  30. 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!!!

    ResponderExcluir
  31. 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!

    ResponderExcluir
  32. tem que ser a mesma imagem para todas as postagens

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

    ResponderExcluir
  34. 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.

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

    ResponderExcluir
  36. 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!

    ResponderExcluir
  37. 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 ?

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

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

    ResponderExcluir
  40. 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.

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

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

    ResponderExcluir
  43. 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

    ResponderExcluir
  44. 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

    ResponderExcluir
  45. ★ 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

    ResponderExcluir
  46. 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 !

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

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

    ResponderExcluir
  49. 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?

    ResponderExcluir
  50. 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

    ResponderExcluir
  51. 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!

    ResponderExcluir
  52. 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

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

    ResponderExcluir
  54. 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 =|

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

    ResponderExcluir
  56. 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?

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

    ResponderExcluir
  58. 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

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

    ResponderExcluir
  60. 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.

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

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

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

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

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

    ResponderExcluir
  66. 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

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

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

    ResponderExcluir
  69. 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?

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

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

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

    ResponderExcluir
  73. 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õ?

    ResponderExcluir
  74. 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

    ResponderExcluir
  75. 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

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

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

    ResponderExcluir
  78. 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

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

    ResponderExcluir
  80. 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)

    ResponderExcluir
  81. 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?

    ResponderExcluir
  82. 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

    ResponderExcluir
  83. 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

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

    Obrigado, sempre. Fabiano.

    ResponderExcluir
  85. 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

    ResponderExcluir
  86. 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

    ResponderExcluir
  87. 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{....

    ResponderExcluir
  88. 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

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

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

    ResponderExcluir
  91. 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

    ResponderExcluir