Já personalizamos nosso fundo e nossa área de postagem, agora vamos personalizar nosso texto.
Queridos, mexer no código fonte é trabalhoso, mas lembrem-se é só uma vez. A menos que vocês tomem gosto, rsrsrs.
Veja como o texto aparece quando não fazemos nenhuma configuração:
Fonte pequena, na cor preta, tudo básico.
Para configurar a fonte usada no blogspot é preciso primeiro criar um post para que possamos visualizar as mudanças no "Designer de tema".
No editor nativo do blog não precisamos configurar a fonte a cada postagem e no "Designer de tema" deixamos a fonte da nossa escolha, com um tamanho confortável e na cor que desejamos que apareça para nossos leitores.
Antes de criar uma postagem ou post vamos configurar um modelo de postagem.
E muitas vezes não conseguimos personalizar no "Designer de tema", então temos que ir direto ao código fonte. Pequenos bugs recorrentes do Blogger, que acontecem quando eles fazem alguma atualização no código fonte da plataforma.
Os desconfortos momentâneos valem a pena quando resultam em melhoras na plataforma.
Modelo de postagem é útil quando temos elementos que serão colocados em todos os posts, como por exemplo uma assinatura, um link para download de material, barrinhas divisórias e links para para um menu e para a página inicial.
Para configurar um modelo de postagem precisamos adicionar as imagens que iremos usar na nossa página de imagens (leia sobre a página de imagens nesse post aqui) e copiar seus links.
Com as urls das imagens em mãos vamos adicioná-las nos códigos.
Nesse modelo de postagem eu vou incluir um botão para download de material, um espaço para escrever o tutorial, duas barrinhas, uma assinatura e um botão para voltar ao menu e outro para ir à página inicial do blog.
O código que vou usar é esse:
<br/><br/><br/><br/>
<center><a href="link do download" target="_blank"><img src="url da imagem" /></a></center><br/><br/><br/><br/><br/><br/><br/>
<center><img src="url da imagem da divisória" /></center><br/><br/>
Tutorial aqui<br/><br/><br/><br/><br/>
<center><img src="url da imagem da divisória" /></center><br/><br/><center><img src="url da assinatura" /></center><br/>
<center><a href="link do início" target="_blank"><img src="url da imagem" /></a> <a href="link do menu" target="_blank"><img src="url da imagem" /></a></center><br/><br/>
Com as imagens que escolhi o código ficou assim:
<br/><br/><br/><br/><center><a href="link do download" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZe7W07R4TAuQ-Erh6mS_oiW0BGgsvyGXSASwzxtKmiFSKL65S46DcQXTfqqagYhZ6gvrqTD8T9PjrgdGba_1qGhGJeRHJ_bKkA8M_wUKiOH5zRSYLnz6PyZm2o0-_rzvyG94nX-aeXQsPXkyUjPKaoPLbcQire1P4iYMDNGZ3N-Mr7mcsz73E3ht_/s160/download.png" /></a></center><br/><br/><br/><br/><br/><br/><br/><center><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgURX39ofMSff7iTnJyMb4EFPbzP0Yxo9oWXEgbY3MTq01MDxDd6NIP02SoyJo8yE_1SCJLEr0DBE7Fl8udvYgvTn3JsTbGnqmpYfoTPKeoDFa9izaiAEwDNC97Ekxf5E_VFI7RVEQaxGTXyCeCBVo_A8Ma2NHEfRui8LFcYoMeADU3PoVYZ55_CGIn/s280/barrinha%20divis%C3%B3ria.png" /></center><br/><br/>Tutorial aqui<br/><br/><br/><br/><br/><center><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgURX39ofMSff7iTnJyMb4EFPbzP0Yxo9oWXEgbY3MTq01MDxDd6NIP02SoyJo8yE_1SCJLEr0DBE7Fl8udvYgvTn3JsTbGnqmpYfoTPKeoDFa9izaiAEwDNC97Ekxf5E_VFI7RVEQaxGTXyCeCBVo_A8Ma2NHEfRui8LFcYoMeADU3PoVYZ55_CGIn/s280/barrinha%20divis%C3%B3ria.png" /></center><br/><br/><center><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyl5pOHmH83DWoSnUjPX4rsmDLQ1pEzu-v4-rVN7QWRzO1_xPlEsKdAO74MoxgWsOkECd1pvOwUzESTQbo4SN3GiYFdbnNoJ-1YXMjKv9bEEcFDTrPp1oTbO-Aqzi3fYjxWtEv55BzS3UE9z_nRgi9tVsHHXUCNveiNBDRIpVFRBc5M6pWFCO1456j/s130/Gisele.png" /></center><br/><br/><center><a href="link do início" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR5Br1yaJU3mmmEFcxoF-AtKq3rd2KhHnYtQhdVm9IccGdDlL4RD-N6EmNTyrpjuvUfb-vgQJxzNMADWSwJ8ovXC2sua2ACxdsj3VNr2uoei5AThE_ZjaSdG8Xq6YlqqinMFy0smdqWXxw4TyzL-L3xFus8zn78lDrAdec_GucZnjkPcs8Xm1G5PpS/s266/in%C3%ADcio.png" /></a> <a href="link do menu" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1sn6n8z7bWBSCVn6-e_TEFB00a6MzO1jPIZTjm3ABAwE6Di3ysGG-w4WSwHiAl38MobanY9luI-0YLsM3qqM4jnL0Bfbzl6qjgp6gGx4gfvGkSmVrXYtRnBikjHFzdqXKSbtRw1O_20wcQiWLUjtIjBYRXAp3JPXwOHR-Bt4uI53o7CAr3wSAmf7Z/s266/menu.png" /></a></center><br/><br/>
E com o código pronto agora vamos à Configurações > Modelo de postagem:
Adicione todo o código e clique em "Salvar":
A propósito, "Lightbox da imagem" é essa telinha cinza grafite que aparece quando clicamos em alguns elementos dos editores ou em imagens das postagens.
Para funcionar deve estar ativo (botão verdinho):
E toda vez que você criar uma nova postagem o editor abrirá assim:
Cada vez que eu criar uma nova postagem esses elementos irão aparecer. E só precisaremos adicionar o link do material que formos compartilhar.
Caso no tutorial que estiver escrevendo não for usar as duas barrinhas divisórias, basta apagar a barrinha excedente.
E se precisar mais de duas barrinhas é só copiar e colar uma delas quantas vezes forem necessárias.
Nosso tema principal é a personalização das fontes e dos links.
Como em qualquer editor de texto nos editores do Blogger também tem ferramentas de edição de fonte e elas estão destacadas no print, mas elas são usadas apenas para destacar uma palavra, frase ou parágrafo, como por exemplo "link de download"
No final desse post mostrarei as outras ferramentas, mas falarei mais sobre elas em outro post.
Criei essa postagem para modelo:
Note que apaguei o link de download e uma das barrinhas.
Note também como o texto com uma fonte sem personalização fica diminuído e deslocado no post.
Pronta a primeira postagem (veja como eu faço mais abaixo) vamos em Tema > Personalizar > Editar HTML.
Coloque o cursor dentro do código, clique ctrl F e na caixinha escreva .post-outer, clicando em Enter em seguida:
Note que .post-outer aparece 4 vezes. Vamos alterar o código do segundo.
Vamos trocar
padding-bottom: 10px;
por
font: normal normal 20px Arial, Tahoma, Helvetica, FreeSans, sans-serif;color: #AA1212;padding-bottom: 10px;margin: 50 px;
Coloquei o tamanho em 20 px, mas pode ser o valor que achar mais confortável e a cor de acordo com seu template.
Depois que mudar o código clique no disquete no canto superior direito e espere a mensagem "A atualização foi feita" aparecer no canto inferior esquerdo:
Veja como nosso post ficou:
Ainda nessa seção podemos aumentar a distância entre as linhas.
Role a página até achar
.post-body {line-height: 1.2;}
Para mim 1.2 é a distância ideal entre as linhas.
E veja o que acontece quando trocamos o 1.2 por 1.6 (exagerei para mostrar bem a diferença)
Às vezes conseguimos trocar a cor da fonte, tamanho e o nome da fonte em Designer de tema > Avançado > Página, mas essa área de edição muitas vezes nos deixa na mão.
Já indo ao código fonte podemos ter certeza de que a mudança vai acontecer.
Esses bugs são temporários, mas são mais frequentes do que gostaríamos.
De qualquer forma seria aqui que personalizaríamos a fonte:
E aqui podemos adicionar outras cores a nosso critério:
Clicando na setinha ao lado de páginas e rolando a janelinha podemos ver todas as áreas que a princípio podemos personalizar, se não houver um bug.
E sempre a cada modificação de um elemento, antes de passarmos para o elemento seguinte, devemos clicar no disquete que tem no canto inferior direito e esperar a mensagem "As configurações de personalização..."
No código fonte, ainda na seção * Posts podemos personalizar a data e o título da postagem.
A data trocando
.main-inner .widget h2.date-header {font: $(date.font);color: $(date.text.color);
por
.main-inner .widget h2.date-header {font: normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif;color: #983232;
E o título trocando
h3.post-title, h4 {font: $(post.title.font);color: $(post.title.text.color);}h3.post-title a {font: $(post.title.font);color: $(post.title.text.color);}h3.post-title a:hover {color: $(link.hover.color);text-decoration: underline;}
por
h3.post-title, h4 {font: bold 16px Arial, Tahoma, Helvetica, FreeSans, sans-serif;color: #983232;}h3.post-title a {font: bold 16px Arial, Tahoma, Helvetica, FreeSans, sans-serif;color: #983232;}h3.post-title a:hover {color: #C2B230;text-decoration: underline;}
Nota a:hover é a cor do link quando passamos o mouse sobre ele.
E querendo uma fonte maior troque o 16px por 20px ou um número maior.
Lembre-se sempre de clicar no disquete no canto superior direito e esperar a mensagem A atualização foi feita aparecer.
E para trocar as cores dos links ativos, visitados e hover dentro das postagens, quando o Designer de modelo não ajuda, vamos para a seção /* Content, bem no comecinho:
(ctrl F, digite /* Content)
trocamos
a:link {text-decoration: none;color: $(link.color);}a:visited {text-decoration: none;color: $(link.visited.color);}a:hover {text-decoration: underline;color: $(link.hover.color);}
por
a:link {text-decoration: none;color: #2D5F3F;}a:visited {text-decoration: none;color: #70CEB2;}a:hover {text-decoration: underline;color: #FAE1A4;}
A seguir o meu método para criar uma postagem, seja em qual dos meus blogs for.
Para mim otimizar meu tempo é muito importante, por isso, é essencial ser organizado(a) e ter métodos.
Vou mostrar as diversas ferramentas de edição de post dos nossos blogs e mostrar meus métodos.
Para começo de conversa, eu crio uma pasta para o post ou tutorial que escreverei.
Nessa pasta vou colocando os prints, as imagens que vou usar e o arquivo de texto.
Eu vou escrevendo meus posts em uma página simples do bloco de notas porque ele não cria nenhum código html que entre em conflito com o Blogger.
O conflito de htmls pode resultar em uma postagem confusa, com fontes de diversos tamanhos, imagens mal posicionadas, enfim, pode bagunçar toda a estrutura e é difícil e trabalhoso arrumar.
E à medida que vou escrevendo o texto e criando os prints já coloco o número do(s) print(s) no lugar certo porque ao passar para o blog só precisarei apagar essa informação e adicionar o print correspondente no lugar.
Outra coisa que faço para otimizar meu tempo é editar meus prints no Photoscape.
O Photoscape é um editor de imagens muito simples e leve, que minha filha usava quando blogava, e eu uso quando quero fazer edições de imagens básicas ou salvar meus prints.
Lá eu já salvei minhas assinaturas e alguns ícones que uso nos meus prints, o que economiza um bom tempo.
E usando o Photoscape eu não loto a área de trabalho do PSP ou do AS.
E apesar de básico o Photoscape salva nossas imagens com muita qualidade.
Tenho, dentro da minha pasta de imagens psp, subpastas de tubes originais onde separo os tubes em arquivo .psp conforme o print abaixo.
E dentro de cada sub pasta tem pastas com os nomes e termos de uso de vários tubérculos. Assim, ao criar um tuto, vou dar preferência a quem permite usar e compartilhar seus tubes e se por acaso um tube exclusivo me interessar eu saberei onde pedir permissão.
Se o tubérculo salvar seus tubes em .png, eu abro uma pasta mesmo assim e coloco os dados dele - contatos, termo de uso e link do site.
Agora vamos conhecer algumas das ferramentas do editor nativo do Blogspot.
Espero que tenham gostado e testem bastante.
Quem quiser baixar os templates que eu chamei de Amor perfeito e Meus estudos em psp, já customizados para ir se acostumando com o HTML pode clicar no link:
Para adicionar qualquer template ao seu blog de testes o caminho é Tema > Personalizar > Restaurar.
Procure a pasta onde salvou o template e dê dois cliques no arquivo "theme-173148127540201816".
Espere carregar e aparecer a mensagem "Tema restaurado"
Visualizem o blog.
E atenção: não se assustem com a aparência. Como só estou disponibilizando o template, quando ele for carregado em outro blog, se não houver nenhuma postagem ou página publicada a aparência do blog será essa:
Amor perfeito
Meus estudos em psp
Mas assim que se fizer uma postagem ou uma página for criada o blog terá a aparência do modelo anexado.
Agora, se no seu blog de testes já existirem postagens a área de postagem aparecerá completa como personalizada até agora.
Lembre-se de que cada conta Gmail pode ter até 100 blogs, públicos ou particulares.
Então criem blogs particulares para testarem a personalização desejada.
Dúvidas mande um e-mail.
Nenhum comentário:
Postar um comentário
Para se inscrever nas listas clique nos títulos de cada grupo na página inicial. Comece com as aulas de PSP, depois continue com o PSP + AS, e se quiser siga com o Xara e a Formatação para criar belos e-mails.
Deixe aqui suas opiniões e seja sempre bem-vindo(a).