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...
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!
ResponderExcluir