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:
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:
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:
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>
Muito legal essa dica, gostei muito e vou usar em meu blog.
ResponderExcluirO novo visual do Dicas Blogger ficou ótimo, excelente, parabéns Juliana.
Muito obrigado Jú! esse código é muito útil! Realmente você se preocupa com nóis! (rs) Parabéns pelo Blog! Até+
ResponderExcluirTambé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.
ResponderExcluirOi, Juliana
ResponderExcluirMais uma coisa que eu ficava imaginando como era feito. Depois desse tutorial, é só "correr pro abraço"...rs
Obrigado pela dica =)
Olá Juliana!
ResponderExcluirGostaria 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.
É por dicas assim que eu sou fã! Coloquei lá no Conversa e ficou uma beleza!
ResponderExcluirOi 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.
ResponderExcluirOlá Juliana, muito boa a dica. Instalei , deu tudo certo e realmente colabora para que o blog fique mais profissional. Obrigado.
ResponderExcluirDisfarça...aonde encontro o bloco de notas???
ResponderExcluirMirela, você encontra o bloco de notas em todas as versões do Windows.
ResponderExcluirBom, mas tenho um problema. Não estou encontrando nenhuma das linhas mencionadas, apenas 'post-footer' e com ela está dando erro.
ResponderExcluirQuem puder me ajudar, por favor!?
Grato!
Mais uma super-dica!
ResponderExcluirJá estou usando essa dica para reforçar a promoção de aniversário do meu blog!
Obrigado, Ju!
: D
Oi Juliana queria perguntar para vc se teria como vc fazer um template mais ou menos igual a este site: http://www.armagedomfilmes.net/
ResponderExcluirA Juliana se rendeu ao Tableless!!! Hip hip hurra!!! :)
ResponderExcluirÓ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.
ResponderExcluirSei que sou eu que estou errando, mas não sei onde.
Abraço
Muito legal... Já estou usando um no meu blog, com o formulário da newsletter. Parabéns pela dica...
ResponderExcluirOi Juliana,
ResponderExcluirA 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?
Juliana,
ResponderExcluirDesvirtuando 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).
Ana, pra funcionar como gadget, retire a parte que assinalei em vermelho.
ResponderExcluir