Destacar mensagens nos posts

Destacar mensagens nos posts

6 10 99
Destacar mensagens nos posts 10 6 99
rssEu já expliquei uma vez como colocar uma mensagem no rodapé dos posts, convidando os leitores a assinarem os feeds -  Widget "Assine o Feed" no rodapé dos posts
Agora que fiquei mais espertinha em CSS e abandonei as tabelas (né, Cidão?), fiz um código novo que pode ser usado para destacar qualquer mensagem dentro dos posts.
Vejam um exemplo, na imagem abaixo. É um convite pra assinar os feeds:

O código é simples, mas requer que vocês façam algumas substituições:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='text-align: left; color: #7b7c7d; font-size: 110%; width: 99%; background:#efefef; margin-top:5px;padding:2px; border: 1px solid #e6e6e6;'>
<img alt='' src='URL DA IMAGEM' style='width: 32px; height: 32px;float:left;'/>
<b>TÍTULO:</b> TEXTO 1<br/>
      <a href='LINK'>Clique
aqui </a>TEXTO 2.
</div>
</b:if>
Escolha uma imagem de 32 x 32px, faça o upload para o Picasa ou outro site de sua preferência e copie a ULR. Abra o código acima no bloco de notas e substitua URL DA IMAGEM pela URL da imagem que você vai usar; em TÍTULO, coloque um título pra mensagem; em TEXTO 1, escreva o primeiro paráfrafo e em TEXTO 2, o segundo.
Você ainda pode alterar a cores de fundo em “background” , a borda em “border” e a cor da fonte em “color”. Se necessário, ajuste o tamanho da fonte em “font-size: 110%”, a largura em “width” e a margem superior em “margin-top”.
Para usar imagens maiores, altere: width: 32px; height: 32px
Vejam estes exemplos:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='text-align: left; color: #7b7c7d; font-size: 110%; width: 99%; background:#efefef; margin-top:5px;padding:2px; border: 1px solid #e6e6e6;'>
<img alt='' src='http://lh6.ggpht.com/_mcq01yDJ2uY/TOP-Je99_AI/AAAAAAAAD98/s24k47t_TmU/rss_file.png' style='width: 32px; height: 32px;float:left;'/>
<b>RSS/Feed:</b> Receba automaticamente todas os artigos deste blog!<br/>
      <a href='LINK DO FEED'>Clique
aqui </a> para assinar nosso feed. O serviço é totalmente gratuito
</div>
</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='text-align: left; color: #7b7c7d; font-size: 90%; width: 99%; background:#efefef; margin-top:5px;padding:2px; border: 1px solid #e6e6e6;'>
<img alt='' src='http://png-4.findicons.com/files/icons/2152/snowish/32/dialog_warning.png' style='width: 32px; height: 32px;float:left;'/>
<b>Alerta!</b> É terminantemente proibido copiar os artigos deste blog.<br/>
      <a href='LINK'>Clique
aqui </a> e veja nossa licença. Plágio é crime previsto no Código Penal.
</div>
</b:if>
image
Use sua imaginação! As opções são várias: feed, plágio, twitter, facebook e etc.
Locais para inserir a mensagem
Embaixo do título do post
Para encontrar os trechos que citarei, use o comando Ctrl+F do teclado.
Entre em design>editar HTML. Marque a caixa “expandir modelos de widgets” e cole o código antes da linha  <div class='post-body'>
No final do post
Entre em design>editar HTML. Marque a caixa “expandir modelos de widgets” e cole o código antes da linha <div class='post-footer'>
No rodapé dos posts
Entre em design>editar HTML. Marque a caixa “expandir modelos de widgets” e cole o código antes da linha <p class='post-footer-line post-footer-line-3'> 
footer
Para que a mensagem apareça também na home, apague o que está em vermelho:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='text-align: left; color: #7b7c7d; font-size: 110%; width: 99%; background:#efefef; margin-top:5px;padding:2px; border: 1px solid #e6e6e6;'>
<img alt='' src='URL DA IMAGEM' style='width: 32px; height: 32px;float:left;'/>
<b>TÍTULO:</b> TEXTO 1<br/>
      <a href='LINK'>Clique
aqui </a>TEXTO 2.
</div>
</b:if>
19 Comments
Comments
  1. Muito legal essa dica, gostei muito e vou usar em meu blog.

    O novo visual do Dicas Blogger ficou ótimo, excelente, parabéns Juliana.

    ResponderExcluir
  2. Muito obrigado Jú! esse código é muito útil! Realmente você se preocupa com nóis! (rs) Parabéns pelo Blog! Até+

    ResponderExcluir
  3. Também gosto de usar tabelas para este tipo de coisa, mas tenho que admitir que usando CSS é bem mais elegante e fica muito bonito. Parabéns pelo artigo e pelo novo template. Mais bonito e leve. Abraços, Jefferson Silva.

    ResponderExcluir
  4. Oi, Juliana

    Mais uma coisa que eu ficava imaginando como era feito. Depois desse tutorial, é só "correr pro abraço"...rs

    Obrigado pela dica =)

    ResponderExcluir
  5. Olá Juliana!
    Gostaria de te informar que o meu "blog" já está no ar. E que o texto da licença de uso, foi "quase que uma cópia da sua. Enfim, caso descorde, favor informar, que será retirado imediatamente.
    Ainda sou uma aprendiz, e qualquer equívoco será corrigido. Grata.

    ResponderExcluir
  6. É por dicas assim que eu sou fã! Coloquei lá no Conversa e ficou uma beleza!

    ResponderExcluir
  7. Oi Juliana, me desculpe. Com preocupação em te informar sobre a licença, acabei esquecendo de comentar sobre esta postagem. Adorei! Fica muito mais limpo, mais profissional, os textos em destaque.

    ResponderExcluir
  8. Olá Juliana, muito boa a dica. Instalei , deu tudo certo e realmente colabora para que o blog fique mais profissional. Obrigado.

    ResponderExcluir
  9. Disfarça...aonde encontro o bloco de notas???

    ResponderExcluir
  10. Mirela, você encontra o bloco de notas em todas as versões do Windows.

    ResponderExcluir
  11. Bom, mas tenho um problema. Não estou encontrando nenhuma das linhas mencionadas, apenas 'post-footer' e com ela está dando erro.

    Quem puder me ajudar, por favor!?

    Grato!

    ResponderExcluir
  12. Mais uma super-dica!
    Já estou usando essa dica para reforçar a promoção de aniversário do meu blog!

    Obrigado, Ju!
    : D

    ResponderExcluir
  13. Oi Juliana queria perguntar para vc se teria como vc fazer um template mais ou menos igual a este site: http://www.armagedomfilmes.net/

    ResponderExcluir
  14. A Juliana se rendeu ao Tableless!!! Hip hip hurra!!! :)

    ResponderExcluir
  15. Óla Juliana, onde está 'LINK' coloquei o endereço do Feedburner, não sei se é assim. Mas já tentei de outras formas, sempre seguindo suas orientações, mas não está dando certo. Vem um aviso em vermelho avisando que contem erros.
    Sei que sou eu que estou errando, mas não sei onde.
    Abraço

    ResponderExcluir
  16. Muito legal... Já estou usando um no meu blog, com o formulário da newsletter. Parabéns pela dica...

    ResponderExcluir
  17. Oi Juliana,

    A figura sempre fica abaixo do texto, não consigo alinhar. O código é exatamente o que você forneceu. Mesmo usando uma figura 32x32.
    Como faço para espaçar a linha entre o TEXTO 1 e o TEXTO 2?

    ResponderExcluir
  18. Juliana,
    Desvirtuando o uso sugerido no post, porque achei lindinho o resultado: tecnicamente, não deveria funcionar se eu usasse esse código num gadget html (retirando a linha inicial e final)?
    Estou tentando, mas não aparece a imagem (fica um quadradinho).

    ResponderExcluir
  19. Ana, pra funcionar como gadget, retire a parte que assinalei em vermelho.

    ResponderExcluir
 
Dicas Blogger© 2007-2015 | Todos os direitos reservados | Design By Duy Templates
Top