Destacar mensagens nos posts - Dicas Blogger '+g+"
Home » HTML/CSS » Destacar mensagens nos posts
Destacar mensagens nos posts 10 6 99
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:
<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.
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
<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 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/>
aqui </a> e veja nossa licença. Plágio é crime previsto no Código Penal.
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'>
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:
Códigos/Scripts, HTML/CSS
Dantas Neto 17 de novembro de 2010 17:47
Muito legal essa dica, gostei muito e vou usar em meu blog.
O novo visual do Dicas Blogger ficou ótimo, excelente, parabéns Juliana.
Alex Batista 17 de novembro de 2010 18:38
Muito obrigado Jú! esse código é muito útil! Realmente você se preocupa com nóis! (rs) Parabéns pelo Blog! Até+
Anônimo 17 de novembro de 2010 20:12
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.
Max Martins 17 de novembro de 2010 22:22
Mais uma coisa que eu ficava imaginando como era feito. Depois desse tutorial, é só "correr pro abraço"...rs
Patrícia 17 de novembro de 2010 22:44
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.
Andréa Motta - Conversa de Português 18 de novembro de 2010 09:09
É por dicas assim que eu sou fã! Coloquei lá no Conversa e ficou uma beleza!
Patrícia 18 de novembro de 2010 09:23
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.
Dorival Pinheiro 18 de novembro de 2010 12:30
Olá Juliana, muito boa a dica. Instalei , deu tudo certo e realmente colabora para que o blog fique mais profissional. Obrigado.
Unknown 18 de novembro de 2010 13:44
Disfarça...aonde encontro o bloco de notas???
Juliana 18 de novembro de 2010 18:34
Mirela, você encontra o bloco de notas em todas as versões do Windows.
Unknown 18 de novembro de 2010 20:01
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!?
Leo Augusto 19 de novembro de 2010 09:22
Mais uma super-dica!
Já estou usando essa dica para reforçar a promoção de aniversário do meu blog!
Raphaela Pimentel 19 de novembro de 2010 15:27
Oi Juliana queria perguntar para vc se teria como vc fazer um template mais ou menos igual a este site: http://www.armagedomfilmes.net/
Anônimo 19 de novembro de 2010 21:28
A Juliana se rendeu ao Tableless!!! Hip hip hurra!!! :)
Ademir Palácios 20 de novembro de 2010 19:39
Ó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.
Anônimo 21 de novembro de 2010 12:50
Muito legal... Já estou usando um no meu blog, com o formulário da newsletter. Parabéns pela dica...
Patrícia 21 de novembro de 2010 13:03
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?
Ana Flor 15 de dezembro de 2010 10:39
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)?