* Blog Elaine Gaspareto *

Série Como personalizar o blog passo a passo- ajustes finais e dicas extras

Publicado em 19/02/2018


E chegamos à etapa final da Série Como personalizar o blog passo a passo.
Hoje vamos inserir os elementos que faltam ao template, personalizar a área dos comentários, inserir cabeçalho ou logo personalizado, plano de fundo e fazer os ajustes finais!
E eu vou te dar dicas extras de como modificar tudo nele usando o painel administrativo do Blogger e alguns trechos de código HTML.
Vamos trabalhar?

Como sempre eu gravei o tutorial em vídeo.
Ficou longo, eu sei, mas vale a pena caso você tenha alguma dúvida ou queira ter mais segurança ao fazer o passo a passo.
aperta o play!


Se inscreve no canal, ele serve de apoio aos tutoriais do blog, e assim você me ajuda demais!.
Inscreva-se!


Personalizar área dos comentários:
Aqui no blog há muitos tutoriais que trazem códigos prontos para personalizar a área dos comentários.
Veja:


Escolha o modelo que preferir e siga o tutorial que escolher, tudo dará certo!
Se preferir usar o mesmo modelo que eu usei deixarei o código completo na página com os códigos de hoje, ok?

Por padrão a área dos comentários estão assim:


Vamos deixa-los assim:


Se optar por usar o modelo que eu usei basta copia-lo da página com os códigos de hoje, editar as cores e fontes e voilà


Copiar o código


Gadget Instagram no rodapé:
Eu usei este tutorial:


A fonte que escolhi foi a Great Vibes (que também coloquei nos botões de compartilhar).
Escolha a fonte que preferir, aplique o tutorial e suas atualizações do Instagram aparecerão exatamente como em meu tema-base.

Eliminar itens desnecessários e corrigir formatação:
Agora vamos excluir algumas coisas desnecessárias do template, coisas que não vamos usar.
Na aba Tema do template tecle Ctrl+F e na barra de busca que expandir digite
/* Tabs
Tecle Enter para localizar e selecione até achar
/* Headings
Apague tudo que estiver antes de /* Headings.
Salve.

Em /* Headings coloque .sidebar antes de  h2 { ficando assim:
.sidebar h2 {
Salve.

Personalizar o cabeçalho:
Na barra de busca digite
<b:if cond='data:skin.vars.body_background.image.isResizable'>
Localize, selecione como na imagem abaixo:


E apague.
Salve.
Esse código serve para redimensionar automaticamente o header, mas nós não queremos isso nesse momento. Então, apague sem dó!

Cabeçalho ocupando a largura total da página:
Para fazer isso vou usar este tutorial:


Acessar o tutorial


Crie seu cabeçalho como desejar ou se preferir use um dos modelos gratuitos que disponibilizo ao final deste post.
Siga o tutorial para instalar o plano de fundo, crie o nome do blog conforme explico no tutorial e deixe tudo pronto.

Se, ao invés de usar um plano de fundo na largura total da página você preferir usar um cabeçalho mais simples, também pode!
Nesse caso não siga o tutorial Cabeçalho ocupando a largura total da página.
Crie seu cabeçalho e o insira via modo Layout, assim:

  1. No painel administrativo do blog clique na aba Layout;
  2. Clique em Editar, na área do cabeçalho;
  3. A seguir clique em Escolher arquivo e aí faça o upload do cabeçalho que deseja usar; espere a imagem carregar, defina que ela apareça Em vez do título e descrição, e salve.
  4. Salve a organização do Layout.
Caso queira usar um plano de fundo no blog ao invés da cor sólida faça assim: acesse a aba Tema e clique em Personalizar.
A seguir, no painel, clique em Plano de fundo.
Clique dentro da caixinha Imagem do plano de fundo e clique em Fazer upload da imagem.
Localize o background que deseja usar, carregue a imagem, defina se deseja que ela role ou não com a página, defina o alinhamento, e salve.

Veja também:



E terminamos!
A parte de personalização do template está concluída!
Olha como ficou o Template Catherine pronto (clique sobre a imagem ou sobre o link abaixo dela e veja online):



Nesse template você pode aplicar todo e qualquer tutorial meu e sempre dará certo.
Também pode modificar, como mostrei no vídeo acima, tudo do template: cores, plano de fundo, cabeçalho/logo, fontes, disposição dos elementos de página, inserir todas as otimizações e técnicas de SEO que ensino no blog, etc...


Baixar grátis o Template Catherine


E, conforme prometi no começo da série disponibilizo abaixo o template do meu blog de testes.
Ao baixar e instalar em um blog de testes seu você terá exatamente o mesmo resultado que eu tive.


Baixar o Template Catherine


Cabeçalhos e logos grátis para blog- baixe e use!


Também estou disponibilizando alguns presentes extras pra você usar em seu blog.
Estão todos em formato png com fundo transparente e podem ser usados no Template Catherine ou em algum outro que preferir.

Aqui tem mais templates grátis pra você baixar e usar os cabeçalhos.

Clique sobre a imagem e ela será aberta em tamanho real, aí salve em seu computador e use em seu blog.









Baixar o Template Catherine

Créditos:
Todos os cabeçalhos e logos foram feitos usando vetores Freepik.



IMPORTANTE!
Assim como qualquer template que eu disponibilizo aqui você não pode vender, nem disponibilizar em seu blog.
O jeito certo é compartilhar e direcionar seus leitores para que baixem diretamente aqui no blog.
Não disponibilize nem os cabeçalhos e muito menos o Template Catherine em seu blog.
Diga aos seus leitores onde eles estão e cada pessoa baixa daqui.
Ok?


Mas espero que, muito mais do que baixar, você se aventure, faça os tutoriais todos da Série Como personalizar o blog passo a passo e descubra a beleza de fazer sua própria personalização, e veja como é lindo quando a gente consegue!


Como tornar responsivo um template nativo do Blogger?

A próxima série que vamos ter aqui no blog vai ensinar como tornar responsivo este e qualquer outro template nativo do Blogger.


Pra não perder o início da nova série você pode:

→ Seguir o blog via gadget Seguidores: basta clicar em Participar deste site ali na lateral do blog e concluir o processo;

→ Pode curtir nossa fanpage: todos os posts têm seu link enviados pra lá no momento em que são postados. Basta clicar em Curtir!




→ Cadastre seu email e receba a atualização direto nele, assim que for postada.
Digite seu endereço de email:


Ou seja: mil maneiras de você não perder!
A gente se vê muito em breve na nova Série Como tornar responsivo um template nativo do Blogger!
Espero por ti, não vá se atrasar, hein!
QUERO LER O POST COMPLETO

Um barquinho chamado blog, ou sobre como chegamos aos 2000 posts!

Publicado em 18/02/2018


Esta é a postagem de número 2000 publicada neste blog.
Gente, pára e pensa: são 2000 posts que foram ao ar, 2000 vezes que eu apertei a tecla Publicar só aqui neste blog.
Sim, 2000 vezes que o coração ficou mais quentinho ao ver um post meu no ar, com a possibilidade de ser lido... me aquece o coração porque eu amo escrever aqui.

Desde o primeiro dia, desde a primeira vez, eu sempre gostei.
Esse ano completamos 10 anos juntos, meu blog e eu.
Sou das blogueiras mais antiguinhas que estão na ativa (e ativa mesmo!) e talvez seja uma das mais antigas que nunca pararam, que nunca trocaram de blog, que nunca deram um tempo, que não mudou de plataforma, que segue remando no mar da internet, devagar e sempre, em seu pequeno barquinho.
Resistindo aos navios gigantes, resistindo aos modismos de cada rede social que vi morrer ao longo do tempo...
Um barquinho chamado blog...


Eu olho para este blog e sinto tanto orgulho!
Ele existe porque eu o criei, ele me reflete de tantos modos...
Aqui tem tanto da minha história, tem tanto de mim...
Eu releio posts antigos e vejo claramente que eu sou outra pessoa.
Não sou a mesma do primeiro post, não sou a mesma do 1000º post, não sou a mesma do 1999º post...
E meu blog reflete isso, acompanha e registra tudo, o bom e o ótimo, o ruim e o péssimo...

Vejo muita gente dizendo que os blogs já eram, esses dias mesmo vi uma conversa dessas em uma rede social.
A pessoa dizia que "ah, os blogs tão abandonados, né? Muito mais fácil interação no instagram, os blogs morreram"
Pensei em responder, mas sou de boa e treta não me interessa rsrsr
Mas pensei:
"Não, fia, o seu blog está abandonado, o seu blog morreu. O meu e de centenas de outras pessoas está bem vivo"

Não é verdade?
O meu está vivo, talvez o seu também esteja.
Reolhe seu blog hoje!
Sim, ainda que "respirando por aparelhos", se tá respirando, tá vivo!!!
Relembre como era no começo, a alegria que ele já te deu, o quanto ele ainda pode te fazer feliz, o quanto você pode ajudar, animar, alegrar, inspirar alguém por meio de seu blog.
Vá reler seus primeiros posts, os mais queridos, os melhores, os piores...
Reolhe seu blog!

Reolhe os blogs de uma maneira geral. Ajude seu blogueiro, sua blogueira favorita comentando nos posts dela, acessando o blog.
Acredite em mim, do alto da minha experiência de 2000 posts rsrsrsr
E que venham os próximos 2000 porque, olha, tem muita vida aqui nesse barquinho chamado blog...



Painel Reolhar a Vida

Blogagem Coletiva Reolhar a Vida.
Clique aqui e saiba tudo sobre a proposta, e veja como fazer parte!
Seja muito bem-vindo para participar!




QUERO LER O POST COMPLETO

Gargantilhas de ouro- belas e atemporais

Publicado em 16/02/2018


Quando falamos de moda, e especialmente de acessórios, sabemos que há coisas que são cíclicas, ou seja: fazem sucesso por um tempo, depois somem, e ocasionalmente voltam.
As pochetes que o digam, né?
Mas há peças que são atemporais.

Não importa a época, não importa a moda do momento, algumas peças sempre terão seu espaço e seu valor na produção daquele look matador, ou na construção do estilo pessoal.
Uma joia, por exemplo.
Seja um anel, uma pulseira, uma meia aliança, um colar...
Não há época em que elas não enriqueçam (literalmente, inclusive) qualquer produção!

Uma dessas peças clássicas e atemporais são as gargantilhas de ouro.
Elas podem ser mais tradicionais, mais delicadas, ou mais arrojadas... não importa!
Sempre vão dar aquele complemento ideal para qualquer produção, além de ajudar a compor um estilo.

A Gargantilha de ouro é uma joia linda para quem gosta de algo delicado.
Essa peça é usada naturalmente mais próxima ao corpo, geralmente com pingentes fixos, modelos de corações, infinito, filhos, laço ou até mesmo um escapulário.
Olha essas lindezas:

Clique nos links para ver as peças individualmente

Não são lindas? Cheias de estilo, delicadas e com significado... impossível a gente não se encantar!
Sem contar, claro, que servem também como investimento.
Sim, mig@as! Uma joia é uma joia, né não?


Todas as imagens que usei pra compor o folder são da Aubra Joias.
Acesse o link ou clique no logo acima, e conheça a loja.
São joias lindas, que agregam valor a qualquer look, e como eu mencionei acima, servem como investimento.
Dá pra parcelar a compra, todas as peças são entregues com certificado e frete grátis acima de 250 reais.

Vale dar uma olhadinha e dar a si mesma um presente...
Ou presentear alguém especial...
Eu, se ganhasse uma joia assim amaria...
Amaria dicunforça...
E você?
QUERO LER O POST COMPLETO

Como colocar os posts do blog resumidos na página inicial?

Publicado em 15/02/2018


Venho prometendo este tutorial faz tempo, mas como há muita coisa planejada e em andamento no blog sempre acabo deixando pra depois... mas hoje, finalmente, vou cumprir a promessa.
Vou te ensinar 2 formas de inserir em seu blog o resumo de postagens.
Uma das formas será manual, usando o recurso jump break nativo do Blogger que possibilita ter o post que você quiser resumido, e a outra será mais complexa, utilizando o mesmo script que uso aqui no blog e que resume todos os posts automaticamente.
Vamos trabalhar?

Como inserir o resumo nos posts do blog- modo simples, nativo do Blogger


Vamos começar com o modo mais simples.
Há, no Blogger, o recurso chamado jump break, que nada mais é do que "cortar" o post onde você desejar e inserir ali o Leia mais, Continue lendo, etc...
Ele não é automático, ou seja: não é aplicado automaticamente a todos os posts.
Você precisa, na hora de publicar o post, definir se e onde deseja que a postagem tenha a quebra.

Para fazer isso é muito simples: com o texto pronto, formatado, imagens inseridas, etc... clique no 7º ícone que aparece no alto do editor de postagens do blog (ali onde você escreve os posts).
A quebra será inserida e o resultado será seu post resumido na página inicial do blog.
Por padrão não há personalização alguma nesse recurso, o link é posicionado a esquerda e fica bem comum.
Vamos melhorar isso!

Acesse a aba Tema do blog onde deseja testar a personalização e clique em Editar HTML.
Dentro da caixa de código tecle Ctrl+F e na barra de busca que expandir digite ]]></b:skin> e tecle Enter para localizar.
Acima disso cole o CÓDIGO DE PERSONALIZAÇÃO DO JUMP BREAK que você escolher.

Copiar o código


Nesse código você altera detalhes como cor de fundo, cor de fonte, tipo de fonte, etc...
Ficará assim (escolhi o Modelo 4):


Demonstração do tutorial


Deixei na página com o código mais  3 opções diferentes de botão, mas o processo de inserção é o mesmo.
Escolha a sua personalização preferida, edite cores e fontes e salve.

Para alterar o texto que aparece no botão vá até a aba Layout e clique em Editar abaixo da área Postagens no blog.
Aí, no item Texto do link da página de postagem: troque o texto que estiver pelo texto que desejar e salve.
Toda vez que quiser inserir o resumo no post basta fazer como expliquei: post pronto, pare o mouse onde deseja inserir a quebra e tá feito.


Resumo automático para posts do blog, com imagens grandes e leia mais personalizado


Agora vamos ao tutorial mais complexo, mas ainda assim muito simples, basta um tiquinho de atenção.
Comece acessando a página com os códigos que vamos precisar:


Copiar o código


Acesse a aba Tema do blog onde deseja testar e clique em Editar HTML.
A seguir tecle Ctrl+F dentro do código fonte e na barra de busca que aparecer digite </head> e tecle Enter para localizar.
Acima de </head> cole o CÓDIGO JAVASCRIPT.
Salve.

Na barra de busca digite e tecle enter para localizar.
Acima dessa tag de fechamento cole o CÓDIGO CSS,  que dá forma e posiciona o botão Leia mais.
Ajuste conforme ficar melhor para seu blog e salve.

Agora preste atenção!
Na barra de busca digite

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'

e localize.
Pode aparecer 2 ocorrências desse trecho, estamos em busca daquele que fica acima de <div class='post-footer'>.
Estará assim:


Selecione como marquei na imagem, e no lugar desse código cole o CÓDIGO HTML.
Salve, altere a frase Leia mais e tá feito!

Observação:
Em alguns templates o código a ser localizado e selecionado pode aparecer assim:


Não tem problema; o importante é que comece com as linhas
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'
e termine com
<div style='clear: both;'/> <!-- clear for photos floats -->
          </div>

Para facilitar eu gravei a execução em vídeo, vamos ver?



Se inscreve no canal, ele serve de apoio aos tutoriais do blog, e assim você me ajuda demais!.
Inscreva-se!


E terminamos!
Espero que seja útil!
Se você tiver qualquer dificuldade diga nos comentários do post e eu ajudo se for possível.
Aproveita e ajudaê, mig@s!
Compartilhe o post!
Só um cliquinho...
QUERO LER O POST COMPLETO

Como colocar Instagram na lateral do blog- com número de seguidores e botão para seguir

Publicado em 12/02/2018


Olá, pessoas!
Hoje vou compartilhar a forma de inserir o box do Instagram na lateral do blog, de um jeito simples, fácil e que pode ser usada em blogs com https na url.
Ficará assim:


@elainegasparetoparada

Ele tem o botão pra seguir, a contagem de seguidores e de quem seguimos, a nossa biografia e o nosso avatar. E você pode escolher quais desses itens quer ter ou não em seu widget!
Para colocar em seu blog, seja na lateral ou em um post como eu fiz acima, faça assim:

  1. Acesse o site que gera o widget: InstaWidget;
  2. No campo Username coloque seu user do Instagram;
  3. Caso queira exibir apenas as fotos de determinada # coloque-a no campo Hastag. Se for exibir as fotos de seu perfil deixe-a em branco;
  4. Em Widget Width coloque a medida da largura de seu box. Eu sugiro deixar na largura que caiba em sua sidebar;
  5. Nos itens seguintes (User Icon, User introduction, Follow button, Followers e Box border) deixe marcado Show para exibir. Se quiser tirar a borda marque Hide;
  6. Nos campos seguintes personalize seu widget, defina cor de fundo, cor de borda se tiver, e todos os demais detalhes.
Veja como eu preenchi meus dados:


Assim que terminar clique em Preview.
Aparecerá seu box, com suas informações.
Copie o código que aparece na caixinha e vá ao painel administrativo de seu blog.
Aí clique em Layout e a seguir clique em Adicionar um gadget.
Dentre as opções escolha HTML/JAVASCRIPT e dentro da caixa que expandir cole o código copiado do site InstaWidget.
Salve, posicione onde desejar e salve a alteração do Layout.
E tá feito!
Legal, né?


Quer ver mais posts sobre o Instagram que já publiquei aqui no blog?
Acesse:


Gostou?
Aproveita e deixe seu Instagram nos comentários, vou gostar de conhecer, e quem sabe não nos seguimos por lá?
Deixe seu link nos comentários!
QUERO LER O POST COMPLETO