Dando seguimento aos tutoriais da Série Como personalizar o blog passo a passo hoje vou te ensinar como personalizar completamente a área de postagens do nosso tema-base.
Para começar acesse a página com os códigos que vamos usar hoje:
A seguir vá até o painel do blog onde estamos trabalhando, clique em Tema e a seguir clique em Editar HTML.
Para facilitar sua vida eu gravei todo o tutorial de hoje em vídeo.
Aperta o play e veja a execução antes de começar, assim você se sentirá mais seguro e não terá nenhuma dificuldade.
Se inscreve no canal, ele serve de apoio aos tutoriais do blog, e assim você não perde os vídeos extras que publicarei apenas lá.
Inscreva-se!
Personalizar a área dos posts- título, autor do post e data
Vamos alterar a formatação da área de postagem, colocar o título centralizado, mudar a data de lugar e adicionar o autor do post.
Também vamos corrigir um erro nos títulos, "forçando" o código para mostrar sempre a fonte correta que definimos, a cor, etc...
Vamos lá!
Nós vamos dividir a área dos posts em caixas.
Por padrão a área dos posts nesse tema-base que estamos trabalhando é um bloco só. Vamos mudar isso, para deixar mais harmônico, mais equilibrado e melhor posicionado.
Mesmo que você vá, no futuro, deixar seu blog todo branquinho, ainda assim eu recomendo essa divisão para deixar tudo bem mais equilibrado e ajustado.
Vamos lá?
Para personalizar a área dos posts digite, na caixa de pesquisa, esse trecho:
/* Posts
Aparecerá um pedaço de código assim:
Selecione tudo, substitua pelo código PERSONALIZAR ÁREA DOS POSTS e salve.
A área dos posts agora está separada.
Calma, sei que a data está estranha, chegaremos lá!
Data e autor abaixo do título dos posts:
Vamos mudar a posição da data e do autor do post.
Localize <div class='post-header-line-1'/>; aparecerão 2 ocorrências dessa linha mas estamos buscando a 2ª ocorrência, ok?
Achou?
Cole o CÓDIGO AUTOR E DATA abaixo dele.
Salve.
Localize esse trecho:
Você verá que abaixo dele tem essas linhas:
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>
Assim:
Apague o trecho que marquei em cinza e salve.
Isso elimina a data duplicada.
Importante:
Caso queira usar outro formato de data pode usar.
Nesse caso não faça o procedimento que expliquei acima de incluir data e autor abaixo dos títulos do post, ok?
Personalizar o rodapé da área dos posts
Nesse ponto seu template já estará com as áreas dos posts separados em caixas.
Chegou a hora de personalizar o rodapé dos posts.
Vamos inserir botões de compartilhar responsivos, personalizar os marcadores e o link para comentários e inserir as postagens relacionadas.
Botões de compartilhamento:
Como vamos usar essa base para os tutoriais da minissérie Como tornar responsivo um template nativo do Blogger vou usar botões de compartilhar já responsivos.
Esses, deste tutorial:
Insira os botões conforme explico no tutorial, e personalize coisas como tamanho, cor, etc.
Depois de pronto, salve.
Eu já deixei um código personalizado nas cores e tamanho que vou usar em meu blog de testes.
Faça isso também, edite para ficar como deseja.
Se quiser usar a mesma personalização de cores e tamanho que usei deixarei na página com os códigos de hoje, ok?
Use-a no lugar do CÓDIGO CSS do meu tutorial que ensina como inserir os botões.
Personalizar marcadores e link de comentários:
Vamos posicionar melhor o link para comentários e os marcadores que aparecem ao final dos posts.
Localize, usando a barra de busca, essa linha:
Apague até </span>
Salve.
Agora localize essa linha (ela aparecerá 2 vezes, apague ambas):
E apague até </span>
Salve.
Agora cole o código MARCADORES E LINK DOS COMENTÁRIOS imediatamente abaixo de <div class='post-footer-line post-footer-line-2'>.
Salve.
A seguir cole o código CÓDIGO DE PERSONALIZAÇÃO DOS MARCADORES acima de ]]></b:skin> e salve.
Agora vamos deletar o autor do post que está duplicado.
Veja a imagem:
Selecione tudo como explico na página de códigos e apague.
Salve.
Postagens relacionadas:
Você pode usar as postagens relacionadas que preferir, veja algumas opções que há aqui no blog:
Para esta minissérie eu escolhi usar este:
Configure cores, tamanho das miniaturas, etc... e assim que estiver como deseja, salve.
No caso do nosso tema-base eu defini as miniaturas em
width:225px; /*LARGURA DA MINIATURA*/
height:200px; /*ALTURA DA MINIATURA*/
Se desejar usar a mesma personalização de cores e tamanhos que usei utilize o código que deixei pronto na página com os demais códigos ao invés de usar a personalização original do tutorial dos botões de compartilhar.
Nesse momento nosso template está assim(reduzi para mostrar 1 post):
E por hoje terminamos.
No próximo passo vamos personalizar a sidebar (coluna lateral), o footer e o rodapé do template, ali onde inserimos os créditos.
Também vamos ajustar algumas coisas feias e desnecessárias. E inserir um monte de coisas legais!
Antes de ir, me diz: está tendo alguma dificuldade? Tem alguma pergunta ou sugestão que queira fazer?
Diz aí, mig@s!
Dias online
Postagens
comentários
Olá! Tudo numa nice?!
ResponderExcluirGostaria de agradecê-la pela disponibilidade em ajudar quem está tentando fazer um lay próprio. Obrigada. Estou acompanhando a série e todas as explicações de personalização.
Beijin...
Alana, muito obrigada pelo feedback!
ExcluirEspero que goste e que te ajude!
beijossss
Bom dia, sei que não tem muito à ver com o post, mas quando coloco o blog no modo privado os gadjets de slide show das notícias não funcionam no template customizado. Por acaso, sabe porque e qual o "remédio"?
ResponderExcluirO motivo é que slides assim rodam com base no feed. E blogs privados não possuem feed. Não tem remédio, tem que deixar o blog público...
ExcluirAgora entendi o porque no meu não estava dando certo, rs... obrigada!!!
ExcluirOi Elaine,
ResponderExcluirVeja se você pode me ajudar. Eu troquei recentemente o layout do meu blog que eu usava há um tempão, por um layout pronto. E notei que agora na hora de compartilhar um post no Facebook, puxa o nome do meu blog junto com o título. Por exemplo, antes ao compartilhar o post no Facebook aparecia "Como ter uma vida mais produtiva e equilibrada" e agora aparece "Quero Ir - Tati Bertucci: Como ter uma vida mais produtiva e equilibrada".
Acredito que deve ter um jeito de arrumar isso direto no código do blog, já que o Facebook não me permite editar o título da postagem, mas não sei como fazer.
Se você souber, poderia me explicar ou me indicar algum post do seu blog onde tenha feito o tutorial?
Muito obrigada!
Tati Bertucci | Quero Ir
Tati, experimente esse post:
Excluirhttp://www.elainegaspareto.com/2017/12/metatags-seo-para-blogs-2018.html
A solução pode estar lá, mas por ser um template baixado da net não garanto...
Eu o li mais cedo, mas não fiz as alterações porque os códigos que devem ser apagados não são exatamente iguais ao HTML do meu blog, aí não sabia o que apagar. Meu tema é do Themexpose.
ExcluirTati, infelizmente não tem como dizer o que acrescentar ou excluir pois cada template tem suas peculiaridades. Por isso é que nunca usei e nem recomendo templates baixados da net...
ExcluirMas uma dica seria tentar apagar os códigos que estão no template, acrescentar esses e ver no que dá. Faça em um blog de testes e espere alguns dias até o Facebook assimilar a alteração...
elaine e si eu quiser deixar a data para fora da area do post mais centralizada como eu faço ?
ResponderExcluirFaz assim: não personalize a área da data.
ExcluirE localize isso no template:
.main-inner h2.date-header {
Abaixo dele coloque
text-align: center;
E salve.
Elaine na alteração do código da data para retirar a duplicada, a data que saiu aqui pra mim foi a que fica embaixo do titulo da postagem.
ResponderExcluirJorciane, você deve ter apagado o trecho errado.
ExcluirFaz assim: localize o que precisa apagar, de acordo com o tutorial e apague.
A seguir copie de novo o código de personalização da data e recoloque, e salve.
Veja se dá certo :)
Muito obrigado minha linda, deu certo, fique com Deus♥
ExcluirElaine help...rsrs meu não ficou com marcadores...porquê?
ResponderExcluirKeila, se algo deu errado é porque ou vc esqueceu algo, ou colocou os códigos no lugar errado.
ExcluirNesse caso refaça, até achar o erro.
Um exemplo: os botões de compartilhar você colou no lugar errado.
Recomece, vai dar certo, com certeza.
Sim, demanda paciência rsrsrsr
beijossss
Oiee...Elaine voltei ao passo a passo refiz tudo... mais reparei que no segundo vídeo, na área /*Posts o seu é linha 291, o meu aparece 293...tem algum problema? Já refiz duas vezes e aparece isso, não quero dar sequência para não errar de novo,acho que o problema esta ai...tem algum outro vídeo depois deste que não vi??Aguardo a resposta!!!Obrigada!!
ExcluirKeila, não tem problema nenhum.
ExcluirTodos os vídeos da série está na página que vc acha clicando no menu aqui do blog, aba Série de tutoriais, sub aba Série Como personalizar o blog passo a passo.
bjssss
Muito grata pelo tutorial amei!!!Só fiquei chateada que não consegui organizar o Leia Também...ficou aparecendo só um...Se puder ajudar agradeço.Desculpa por tanta pergunta,rsrs,bjus!!
ExcluirKeila, quando o blog tiver mais posts reais e marcadores reais eles devem aparecer.
ExcluirMarcadores sem sinais como #, em todos os posts, e os relacionados aparecerão.
bjssss
Já tentei tudo quanto é tutorial e não consigo separar os posts em caixa. Sinto que esse seu daria certo, mas meu tema está modificado e esse código nativo que você mostra não está mais assim. Você poderia me ajudar?
ResponderExcluirMaria, se seu template é personalizado provavelmente a base usada não é o modelo Viagem, ao qual esse tutorial de destina.
ExcluirMas você pode tentar colar o código que começa com .post-outer {
e trocar o background por background: #ffffff; /* Fundo da postagem */
Daí veja se dá certo, mas é um teste pois não sei qual base foi usada na personalização de seu template, imagino que seja a Simples...
Testa e me diz...
Olá Elaine, Antes de mais, muitos parabéns pelos tutoriais!! Estou a amar!! :D Criei um blog de testes como sugere mas, tenho uma dúvida e gostava de saber se me consegue ajudar: há forma de alterar o texto dos botões de partilha personalizados ? Em vez que aparecer "Compartilhe este post" queria que aparecesse apenas "Partilhar" mas, não estou a perceber como se faz. Já tentei mudar o código onde diz /*-- TEXTO COMPARTILHE ESTE POST--*/ para /*-- TEXTO PARTILHAR*/ mas, fica igual.... Pode me ajudar por favor?
ResponderExcluirMuito obrigado Elaine!
Cátia, pra trocar a expressão que está pela expressão que deseja precisa ser no CÓDIGO HTML dos botões
ExcluirLocalize
< center>Compartilhe este post
E aí troque.
beijosss
Olá Elaine acompanho seu trabalho e estou usando sua serie para fazer o meu layout , mais tem uma coisa que esta me atrapalhando, eu estou tentando tirar o nome do autor que esta duplicado mais esta dando erro, bom eu queria saber qual , tenho que remover se é o primeiro logo abaixo de autor data ou se o segundo que aparece
ResponderExcluirNúbia, se não me engano no v[ídeo isso aconteceu comigo e eu mostro como tirar.
ExcluirMas a dica é: encontre o trecho, apague e teste.
Deu certo? Beleza.
Não deu? Apague o outro que achar.
Tem que testar até conseguir achar o certo.
beijossss
obrigada
ExcluirOlá....Tudo bem Elaine...
ResponderExcluirFiquei com uma duvida em relação como vc mudou a letra de Compartilhe este, não vi nos vídeos essa explicação ,se puder ajudar agradeço...amei!!(o seu está com a letra do instragram)
Keila, no código css dos botões coloque font-family: nomedafonte;
Excluire font-size: tamanhodafonte;
No caso dessa é a Great Vibes se não me engano.
beijosss
Elaine, primeiramente gostaria de dizer que suas dicas estão ajundando muito. Obrigada!
ResponderExcluirReferente a esse post, fiz tudo passo a passo, da mesma forma que você fez, porém a nuvem que vai nos cometários e o desenho que fica ao lado de marcadores, no meu não aparece. Nos dois primeiros dias que fiz apareceu, estava tudo certinho, mas entrei para mudar as cores dos marcadores e de repente sumiu, até pensei que tinha excluído algo e não tinha reparado, então voltei aqui no seu post e fiz tudo de novo passo a passo, mas não adiantou, não apareceu mais. Poderia me ajudar? Tem algum código especifico para esses desenhos que tenho que ficar atenta?
Você colocou o código da fonte especial que gera os ícones?
ExcluirNo tutorial que ensina os botões de compartilhar tem o código e o local onde inseri-lo.
Acredito que deva ser isso :)
Qual o endereço do blog?
Olá Elaine, consegui, como eu já tinha os botões de compartilhamento, eu pulei essa parte do tutorial, mas voltei lá peguei o código font e deu certo. Obrigada!
ExcluirEstou montando meu blog ainda, como teste, se tudo der certo e ficar do jeitinho que quero, logo logo publico ele.
Mais uma vez obrigada : )
Estou usando um template nativo do blogger e ele está diferente. Veja:
ResponderExcluir/* Posts
----------------------------------------------- */
h2.date-header {
font: $(date.header.font);
}
.date-header span {
background-color: $(date.header.background.color);
color: $(date.header.color);
padding: $(date.header.padding);
letter-spacing: $(date.header.letterspacing);
margin: $(date.header.margin);
}
.main-inner {
padding-top: $(main.padding.top);
padding-bottom: $(main.padding.bottom);
}
.main-inner .column-center-inner {
padding: 0 $(main.padding);
}
.main-inner .column-center-inner .section {
margin: 0 $(main.section.margin);
}
.post {
margin: 0 0 $(post.margin.bottom) 0;
}
h3.post-title, .comments h4 {
font: $(post.title.font);
margin: .75em 0 0;
}
.post-body {
font-size: 110%;
line-height: 1.4;
position: relative;
}
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: $(image.border.small.size);
background: $(image.background.color);
border: 1px solid $(image.border.color);
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
}
.post-body img, .post-body .tr-caption-container {
padding: $(image.border.large.size);
}
.post-body .tr-caption-container {
color: $(image.text.color);
}
.post-body .tr-caption-container img {
padding: 0;
background: transparent;
border: none;
-moz-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
-webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
box-shadow: 0 0 0 rgba(0, 0, 0, .1);
}
O código disponibilizado nesse tutorial se aplica somente ao modelo Viagem/Travel conforme explico no primeiro post da série.
ExcluirO seu tema base é o Simples, então essa parte específica sobre a área de postagem do tutorial não se aplica...
Ola Elaine, obrigada pelos tutoriais!
ResponderExcluirO meu template toda vez que salvo algo no modelo, a área dos posts passa de branca para transparente, ate ai tudo bem, porque eu podia facilmente colocar em branco de novo, na área de personalizar o template, mas entao, quando fui remover o autor duplicado, os comentários e marcadores do blog teste sempre saem do lugar certo quando mexo em personalizar no modelo do layout, e agora o que faço?
https://templatekatheryn.blogspot.com/
Olá Elaine. Parabéns a sua coontribuição sobre dicas e configurações dos bloggers. Então, tenho um problema: O meu está diferente deste tutorial. Veja abaixo. O meu tema é o Espetacular.
ResponderExcluir/* Posts
----------------------------------------------- */
body .main-inner .Blog {
padding: 0;
margin-bottom: 1em;
background-color: transparent;
border: none;
-moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
-webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
-goog-ms-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}
.main-inner .section:last-child .Blog:last-child {
padding: 0;
margin-bottom: 1em;
}
.main-inner .widget h2.date-header {
margin: 0 -15px 1px;
padding: 0 0 $(date.padding.bottom) 0;
font: $(date.font);
color: $(date.text.color);
background: $(date.background);
border-top: $(date.border.size) solid $(date.border.color);
border-bottom: 1px solid $(widget.border.bevel.color);
-moz-border-radius-topleft: $(date.header.border.radius.top);
-moz-border-radius-topright: $(date.header.border.radius.top);
-webkit-border-top-left-radius: $(date.header.border.radius.top);
-webkit-border-top-right-radius: $(date.header.border.radius.top);
border-top-left-radius: $(date.header.border.radius.top);
border-top-right-radius: $(date.header.border.radius.top);
position: $(date.position);
bottom: 100%;
$(date.side): $(date.header.position);
text-shadow: 0 0 $(title.shadow.spread) #000000;
}
.main-inner .widget h2.date-header span {
font: $(date.font);
display: block;
padding: .5em 15px;
border-left: $(date.border.size) solid $(date.border.color);
border-right: $(date.border.size) solid $(date.border.color);
}
.date-outer {
position: relative;
margin: $(date.space) 0 20px;
padding: 0 15px;
background-color: $(post.background.color);
border: 1px solid $(post.border.color);
-moz-box-shadow: 0 0 $(shadow.spread) rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 0 $(shadow.spread) rgba(0, 0, 0, .2);
-goog-ms-box-shadow: 0 0 $(shadow.spread) rgba(0, 0, 0, .2);
box-shadow: 0 0 $(shadow.spread) rgba(0, 0, 0, .2);
-moz-border-radius: $(widget.border.radius);
-webkit-border-radius: $(widget.border.radius);
-goog-ms-border-radius: $(widget.border.radius);
border-radius: $(widget.border.radius);
}
.date-outer:first-child {
margin-top: 0;
}
.date-outer:last-child {
margin-bottom: $(date.last.space.bottom);
-moz-border-radius-bottomleft: $(date.last.border.radius.bottom);
-moz-border-radius-bottomright: $(date.last.border.radius.bottom);
-webkit-border-bottom-left-radius: $(date.last.border.radius.bottom);
-webkit-border-bottom-right-radius: $(date.last.border.radius.bottom);
-goog-ms-border-bottom-left-radius: $(date.last.border.radius.bottom);
-goog-ms-border-bottom-right-radius: $(date.last.border.radius.bottom);
border-bottom-left-radius: $(date.last.border.radius.bottom);
border-bottom-right-radius: $(date.last.border.radius.bottom);
}
.date-posts {
margin: 0 -$(separator.outdent);
padding: 0 $(separator.outdent);
clear: both;
}
.post-outer, .inline-ad {
border-top: 1px solid $(post.border.bevel.color);
margin: 0 -$(separator.outdent);
padding: 15px $(separator.outdent);
}
.post-outer {
padding-bottom: 10px;
}
.post-outer:first-child {
padding-top: $(post.first.padding.top);
border-top: none;
}
.post-outer:last-child, .inline-ad:last-child {
border-bottom: none;
}
.post-body {
position: relative;
}
.post-body img {
padding: 8px;
background: $(image.background.color);
border: 1px solid $(image.border.color);
Santos Lima, esse tutorial é exclusivo para o tema Viagem.
ExcluirPara o tema Espetacular veja na série Como tornar responsivo um template nativo do Blogger (tem o link no meu menu) e procure pelo tutorial específico desse tema. Não é tutorial completo de personalização, é para tornar o tema responsivo.
Att.
No meu não apareceu as imagens, conforme o seu exemplo
ResponderExcluirhttps://viajemdoalex.blogspot.com/
Quais imagens, Alex?
ExcluirSe forem os posts relacionados eles não aparecem porque não há marcadores em todos os posts.
Só em um, aí não tem como o widget atuar...
Elaine,faz tempo que eu quero fazer esta série tutorial só agora que estou com tempo.
ResponderExcluirComo sou curiosa e estou com tempo vamos aproveitar.
Parabéns pela série.
Oi Elaine! Obrigada por compartilhar seu conhecimento. Sou iniciante e você está me ajudando bastante. Eu gostaria de saber se tem como colocar os posts do blog em caixas somente com foto e título como os do seu blog?
ResponderExcluirSó eu que não estou conseguindo abrir o link dos códigos? A página não carrega nunca!
ResponderExcluireu segui direitinho essa parte, mas os botões de compartilhamento estão brancos, msm que eles estejam funcionando. O que poderia ser?
ResponderExcluirAmanda, você trocou as cores no código CSS dos botões?
ExcluirBuenas Elaine!! Show de bole esses seus tutorias, estou acompanhando eles com muito entusiasmo, comecei o tutorial do zero, porém estou com uma dificuldade na parte das "Postagens relacionadas para blog", pois inseri os código conforme a instrução, porém não aparece os posts relacionados. O que poderia ser? https://chasquedetestes.blogspot.com/
ResponderExcluirNo aguardo de sua ajuda!!
Eu acredito que seja porque tem poucos posts e cada um deles tem marcadores que não se repetem em todos os posts.
ExcluirExperimente colocar os mesmo marcadores em cada um dos posts de teste.
Aí o script tem como puxar os posts, entende?
Experimenta e me diz :)
Oi, você retirou os códigos para substituir o código da área dos posts, estou estudando otutorial, mas ví que essa postagem esta diferente do vídeo.
ResponderExcluiroii, tudo bem? Na parte onde no titulo do post tira a linha de baixo e fica u roxo claro ao passar o mouse em cima, e nos botões de compartilhamento entre outros no meu está laranja. Onde que muda cor dessa parte? Será que eu fiz algo errado? Teria como você me ajudar? Muita obrigada pelo seu tempo!
ResponderExcluirAmei as dicas amiga..
ResponderExcluir