Eu 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 == "item"'>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.
<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>
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 == "item"'>
<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 == "item"'>
<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>
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'>
Para que a mensagem apareça também na home, apague o que está em vermelho:
<b:if cond='data:blog.pageType == "item"'>
<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>
