Postagens Vanessa S.
Como personalizar o Rodapé dos Posts no Blogger
Por padrão no Blogger, ao final dos posts, vem o rodapé, que está representado pela tag: post-footer.
Neste trecho que fica localizada as informações de:assinatura do autor do post, hora da postagem, link de comentários e marcadores.
Neste tutorial veremos como aplicar estilos a cada trecho localizado no rodapé do post.
Veremos como acrescentar imagens ícones ao lado de cada elemento:assinatura do autor, hora, link para os comentários e marcadores.
Veremos também como aplicar bordas e cores ao rodapé do post.
Por padrão, tanto nos templates mínima, quanto nos designer de modelo, não há código incluído para definição de estilos da assinatura do autor do post e nem para a hora da postagem.
Você deverá acrescentar o trecho de código para cada elemento e neles aplicar os estilos de acordo com a sua preferência.
1. Aplicar estilos para assinatura do autor:
Entre no menu “modelo” >> “editar html“, procure pela parte referente aos códigos (geralmente está dentro de /* Posts )
e acrescente o seguinte código:
.post-author {
color:#XXXXXX; /* cor da fonte */
font-size: XXpx; /* tamanho da fonte */
font-weight: normal;
}
Neste trecho que você deverá incluir todos os estilos que você quer que sejam aplicados á assinatura do autor do post.
Incluir ícone ao lado da assinatura do autor do post:
No trecho que você acabou de incluir, acrescente:
background: url("URL-DA-SUA-IMAGEM") no-repeat center left;
padding:2px 0px 2px 20px; /*ajuste as margens se precisar*/
}
Dica: Neste site você pode encontrar mini ícones para autor: iconfinder/user
2. Incluir ícone ao lado da hora da postagem:
Acrescente o seguinte código:
.post-timestamp {
background: url("URL-DA-SUA-IMAGEM") no-repeat center left;
padding:2px 0px 2px 20px; /*ajuste as margens se precisar*/
}
Dica: Neste site você pode encontrar mini ícones para hora: iconfinder/time
Personalizar a cor do link:
A hora da postagem é em forma de link, e por padrão a cor deste link será a mesma cor que você definiu para os todos os links do seu blog.
Caso você queira alterar a cor do link da hora da postagem, mas não quer alterar a cor dos demais links, você pode definir estilos apenas para a cor de link da hora da postagem, basta acrescentar o seguinte trecho:
.post-timestamp a{
color:#XXXXXX; /* cor da fonte */
font-size: XXpx; /* tamanho da fonte */
}3. Aplicar estilos para o link de comentários:
São os “links para comentário” e os “Links para esta postagem” que por padrão, aparecem no rodapé do post.
Está representado por este trecho:
.comment-link {
Em alguns templates não tem esse trecho de código.
Se este for o seu caso, você deverá incluí-lo e nele aplicar os estilos que você preferir.
Incluir ícone ao lado do link de comentários:
Acrescente o seguinte código:
.comment-link {
background: url("URL-DA-SUA-IMAGEM") no-repeat center left;
padding:2px 0px 2px 20px; /*ajuste as margens se precisar*/
}
Dica: Você pode encontrar mini ícones para link de comentários neste site:
iconfinder/comment
Personalizar a cor do link:
Assim como já expliquei acima a respeito da cor do link da hora da postagem,por padrão a cor do link para os comentários será a mesma cor que você definiu para os todos os links do seu blog.
Mas você também pode alterar a cor, basta acrescentar:
.comment-link a{
color:#XXXXXX; /* cor da fonte */
font-size: XXpx; /* tamanho da fonte */
}
4. Aplicar estilos para o marcador:
Se quiser definir cor, tamanho da fonte ou incluir um ícone ao lado do elemento “marcadores”, acrescente o seguinte código:
.post-labels{
background: url("URL-DA-SUA-IMAGEM") no-repeat center left;
padding:2px 0px 2px 20px; /*ajuste as margens se precisar*/
color:#XXXXXX; /* cor da fonte */
font-size: XXpx; /* tamanho da fonte */
}
Dica: Neste site você pode encontrar mini ícones para marcadores: iconfinder/label
Personalizar a cor do link do marcador:
Sobre a cor do link do marcador, aplica-se a mesma regra já explicada acima sobre o link da hora do post e o de comentários.
Se quiser alterar somente a cor do link dos marcadores, basta acrescentar:
.post-labels a{
color:#XXXXXX; /* cor da fonte */
}
5. Aplicar estilos para todo o rodapé (post-footer)
O código do rodapé está localizado no CSS do seu blog e representado pelo seguinte trecho:
.post-footer {
Você pode colocar bordas ou uma cor de fundo, para que seja aplicada a toda a área do rodapé, para isso é só acrescentar as linhas “border” e “background” e aplicar os estilos a elas, de acordo com sua preferência.
Acrescente:
background: #XXXXXX; /* edite cor da fundo */
border:1px solid #XXXXXX; /* edite cor e tipo de borda */
padding:10px; /*ajuste as margens se precisar*/
Se quiser acrescentar uma imagem como plano de fundo no rodapé, acrescente:
background: #XXXXXX url(URL-DA-SUA-IMAGEM) repeat;
Se quiser você também poderá aplicar um efeito gradiente ao plano de fundo(background).
Para entender mais sobre imagem como “background”, leia sobre como Personalizar plano de fundo (background) veja as maneiras que você pode estipular o comportamento da imagem que você quer aplicar á área do rodapé de suas postagens.
Sobre bordas e seus estilos, veja como Personalizar bordas e como criar Bordas arredondadas .
Se quiser também pode aplicar Efeito Sombreado nas bordas.
Ocultar todo o rodapé da página inicial
Se você não quiser mostrar as informações dos elementos do rodapé dos posts na sua página inicial, deverá acrescentar a condicional para a página inicial e nela definir o que ficará oculto.
Entre nn menu ‘modelo‘ ? ‘editar html‘,clique em ‘expandir modelo de widget‘, e procure pela tag: ]]></b:skin>
A condicional para a home e o código do elemento que você quer ocultar devem ser colados logo ABAIXO dela:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
.post-footer{display:none;}
</style>
</b:if>
Desta forma você está definindo que o rodapé do post não apareça na Página Inicial, ele irá aparecer nas páginas internas normalmente. Ficarão ocultos apenas na home.
Leia também o artigo que ensina a Aplicar estilos á página inicial do blog, talvez você se interesse em aprender mais sobre como fazer com que a página inicial se apresente de forma diferente das demais páginas.
Caso queira conhecer melhor as condicionais da linha de rodapé, sugiro que dê uma lida no artigo:
Adicionar elementos na linha do Rodapé
Gostei, vou tentar usar no meu blog.
Bjs
Na etapa 3 vc fala para procurar “.comment-link {” e se necessário a gente tem que colocar essa parte….onde devemos colocar ela?
agradeço desde já…
Excelente tutorial Vanessa _super completo.
Pra mim deu ótimos resultados só o .coments-link que não deu, mas o restante ficou muito bom.
Vanessa ,puxa a orelha do pessoal que quer passar por cima dos direitos autorais.
abraço
muito boa essas dicas
os créditos do template pode ficar dentro do html,eu só quero ocultar oque esta na parte de fora,mas eu já descobrir como fazer isso!!! obrigado Vanessa!
fala sério…eu perguntei se vc sabia ,pois não quero pagar para adquirir o template,somente ocultar o soratemplate do rodapé e mais nada,Muito obrigado por responder!!!
Acontece que isso que vc quer é exatamente ocultar/retirar os créditos de autoria do desenvolvimento do template. Isto ai são os direitos autorais do soratemplate e eu sugeri que vc solicite ajuda a eles, até pq somente ELES poderão autorizar ou não a retirada dos créditos, concorda?
desculpa a demora,meu modelo é do Sora Template,eles poe um link do sora no rodapé ,que fica impossível de ocultar,eu não sei muito de html,me ajuda a ocultar esse link, não quero retirar os créditos dele,apenas ocultar,teria como por favor..Muito Obrigado!
Vc deve entrar em contato com os desenvolvedores do template e solicitar ajuda a eles.
Sou programador.. vc nunca vai conseguir retirar os créditos de um template Sora sem pagar por ele.
Ele usam uma combinação exclusiva de códigos que faz cm que o template apresente defeitos qdo s créditos são removidos.
Então, se vc ainda que um template Sora sem a menção de direitos autorais, vai ter que pagar por isso.
Para qual modelo esse tutorial se aplica ?
Qual modelo o seu blog usa ??
Porque não encontrei essas linhas no meu blog …. Pois eu não recebo comentários porque muitos falam que não sabem comentar, pois não encontram a opção, então queria dar uma enfase na opção.
já procurei pela internet toda mais não achei ninguém capaz de me dizer,como faço para ocultar o soratemplate no blogger,nao quero retirar os direitos autorais,mais simplemeste ocultar o soratemplates,tem como fazer isso? me ajuda por favor,nao sei mexer em blogger,mas com sua ajuda eu sei que consigo,vc é uma pessoa muito inteligente,admiro muito seus posts!!! me envia um email me explicando,pode ser?!
ô vida, eu tento, tento, tento, mas nao consigo aplicar estilo aos meaos meus marcadores ): quando eu coloco a pagina pra visualizar depois de acrescentar os códigos, ela fica em branco ): o que será que tá dando errado?
Vanessa tenho uma pergunta. Eu li as primeiras partes. Mas n sei se achei o que queria. Por exemplo eu vou colocar tudo que vc falou no post, mas eu quero colocar também uma descrição, ou seja um breve texto sobre o postador, como faço isso?
procurei com calma,e nâo existe o que voce està falando,procurei com muita calma e nada. nâo hà a palavra sequer de homepage,serà que està com defeito o que eu faço p tirar o rodapè?
Vc não vai encontrar essa tag mesmo, pq vc DEVE ACRESCENTA-LA no seu template.
Estava tentando ocultar o rodapé dos posts na página inicial e consegui… Funcionou… Muito bom.. Muito obrigada pelo seu talento..
Ola Vanessa
Meu blog esta com as postagens muito separada uma das outras. Estou tentando resolver mas nao estou conseguindo. Voce pode me dar uma dica onde faço esta alteração.
Ficarei agradecida.
Sayonra
Eu rodo, rodo, rodo o google mas sempre acabo caindo no seu blog que sempre me salva. Já usei vários tutoriais no meu blog e TODOS deram certos.
Parabéns!!!!
ola!!!baixei um template da net e modifiquei totalmante ele.
só ki a parte onde tem a “categoria” e o nome do “autor”
fica entre o titulo e o poste!!!E eu queria colocar no rodapé do poste!!!
sera ki poderia mi ajudar com esse problema?
OI! Então… eu utilizei algumas das dicas postadas em cima, e todas funcionaram muito bem por sinal, mas sabe o que acontece: eu gostaria de modificar a data, colocar uma imagem de calendário ao lado dela. Tem como?
Obrigada
Giovani
Vc tem que ajustar os valores de "padding" em .post-labels
Clau, consegui colocar os ícones ao lado dos comentários e dos marcadores. O problema é que preciso baixar os marcadores pois não estão na mesma altura do ícone.
Acrescentei a parte ".post-labels a{padding:0px 0px 0px 0px; }" mas não está funcionando.
Como posso fazer isso?
Abraço.
Achei o que procurava! Estava procurando como na página principal do blog não aparecer o rodapé da postagem. E aqui achei muito obg.
Parabéns Clau, excelente trabalho, isso irá me ajudar muito, e tenho certeza que a outros também. Voltarei quando tiver mais tempo, para ler com mais calma, um abraço.
Olá querida, estava doida pra ocultar o rodapé da postagem na página inicial e consegui facilmente com seu tutorial !!! Ficou ótimo, bem mais clean o visual da Capa !! Obrigada novamente pela ajuda !!
Um beijo e boa semana !
Oi,
tenho um blog coletivo e preciso fazer essas assinaturas personalizadas… com a foto e mini biografia de cada um. Assim como 'sobra a autora', desde seu blog, mas condicionado a cada autor… Por favor, se puder me indique outro artigo ou simplesmente informe que isso é impossível 🙂 ótimo blog, sempre que procuro algum tutorial no google caio no seu blog (e geralmente encontro o que procuro). Abraço,
PRECISO DA MESMA COISA
Oi,
tenho um blog coletivo e preciso fazer essas assinaturas personalizadas… com a foto e mini biografia de cada um. Assim como 'sobra a autora', desde seu blog, mas condicionado a cada autor… Por favor, se puder me indique outro artigo ou simplesmente informe que isso é impossível 🙂 ótimo blog, sempre que procuro algum tutorial no google caio no seu blog (e geralmente encontro o que procuro). Abraço,
Novidades Ngt
Alguns recursos variam de template para template. Sendo assim, não tenho como te ajudar.
Meu blog são daqueles em que os templates são personalizados… eu queria que ao final de cada post na pagina inicial tivesse a assinatura do autor marcador data e etc… mas não tem veja http://www.novidadesngt.com.br como faço para colocar ?
O item Comentário está abaixo do titula da postagem , como coloco no rodapé da postagem? Estou usando um template pré formatado.
Muito bom querida!Beijos iluminados!Parabens pelo novo blogger!Agora sim é sue né amiga linda?
valeu pela força estava precisando mesmo, adorei tambem o tutorial de bordas na pstagem , valeu abraço
Manda Muito heim Clau…
BrigadoOoo
bjoOoo…
Estava em busca dessas dicas a algum tempo, vai me ajudar muito. Obrigado!
Att.
@JamisHenri
Obrigado Clau. vou então fazer uns testes com esses códigos.
obrigado, e boa continuação 😉
Yorgan
Me desculpe mas eu não costumo passar meu msn,principalmente para esclarecer dúvidas.
Este tutorial já está bem explicativo, as maneiras de se aplicar os estilos depende de cada um, basta usar a criatividade. Eu já dei os caminhos a serem seguidos, agora cada um deve personalizar esta parte da maneira que achar melhor.
Se você está com dúvidas a respeito das tags (condicionais) da área do rodapé, Sugiro que você dê uma lida no artigo:
"Escolhendo o local para instalar elementos na área dos artigos"
para conhecer melhor as condicionais da linha de rodapé, talvez te ajude.
hehe 😀 bem me parecia é que é um pouco confuso de explicar…
da para ceder o seu msn/e-mail, assim explicava e mostrava um exemplo…é que também não quero fazer publicidade a outros sites…
Nossa Yorgan, não entendi nada! O.o
Lucas
Eu sempre procuro atender aos pedidos, desde que estejam dentro do meu conhecimento ou das minhas possibilidades. As vezes pode demorar um pouquinho pra sair, mas sai..rs =P
Abraços querido 😉
Arierom
Nossa que bom que sem querer acertei então! =D
Obrigada pelo comentário 😉
Clau,
muito bom! Há tempo que desejava ocultar o rodapé dos posts na página inicial.
Os tutoriais do Mundo Blogger são a sincronicidade de minhas necessidades!
Parabéns e obrigado; @Herege
Clau! Não è que você atendeu meu pedido? Eu jà tinha enviado muitas mensagens pelo formulàrio de sugestões,para este artigo.
Muito bom mesmo o artigo,bem detalhado.
Òtima tarde Clau!
Muito bom CLau!
Só fiquei com uma dúvida.
eu queria adicionar um rodapé nos posta mas no interior do post, do género, na 1ª parte fica normal, mas na parte de dentro do post já fica com outros critérios…faço me entender?
agradecia a sua ajuda, please 😀
obrigado, sempre a ajudar com esses tutorias 😉