Relembre a primeira parte da série:
Como personalizar o blog passo a passo- 1ª postagem
Fez tudo isso?
Então agora você está pronto para começar de fato a personalização.
E para ajudar você eu gravei em vídeo tudo o que faremos hoje.
Tentei ser o mais rápida possível, então faça um esforço e veja o vídeo todo, assim não terá qualquer dificuldade em realizar essa primeira etapa de reestruturação. O tutorial por escrito está logo abaixo do vídeo, aperta o play e ouça enquanto vai lendo e fazendo o passo a passo!!
Reestruturar e modificar o tema-base nativo do Blogger
Configuração do tema-base
No painel do blog no qual estamos trabalhando clique em Tema e a seguir clique em Personalizar.
Vai abrir a página com o painel do Blogger para as personalizações básicas.
Nessa minissérie eu escolhi trabalhar com um dos modelos do tema Viagem, que neste momento está assim (feio de doer, eu sei...):
Selecione-o caso já não tenha feito isso, aplique ao blog de testes que está usando e configure assim:
⏩ remova o plano de fundo;
⏩ ajuste a largura para 1135px e a largura da sidebar para 340px;
⏩ coloque a cor de fundo que desejar; eu escolhi a cor #faf2ff;
Escolhi essas duas fontes: Montserrat e Open Sans porque elas combinam entre si. Evite escolher fontes demais, o ideal é que usemos de 2 a 3 fontes apenas no blog. Ok?
No painel administrativo do blog clique em Layout.
Abaixo da área Postagens no blog clique em Editar.
Configure assim:
Salve.
No painel do blog clique então em Editar HTML e dentro da caixa de código-fonte tecle Ctrl+F.
Na barra de busca que expandir cole isso:
E tecle Enter para localizar.
Aparecerão algumas ocorrências desse endereço.
Assim como na imagem:
Selecione todas as linhas marcadas em amarelo e apague.
Isso vai excluir o fundo semi-transparente escuro do template.
Localize e apague também:
Salve.
Ficará assim:
Preparar a área do cabeçalho:
A seguir vamos preparar a área abaixo do cabeçalho para receber mais gadgets e também vamos centralizar o cabeçalho.
Na barra de busca digite Cabeçalho e localize.
Aparecerá um trecho assim:
Onde está escrito maxwidgets='1' altere para maxwidgets='4' e salve.
Onde aparece showaddelement='no' altere para showaddelement='yes' e salve.
Onde está locked='true' substitua por locked='false' e salve.
Agora, na barra de busca, digite <img expr:alt='data:title' e tecle Enter.
Aparecerá esse trecho:
Coloque a tag para centralizar o cabeçalho, assim:
E salve.
Isso se aplica quando usamos imagem como cabeçalho.
Para centralizar quando não usamos imagem localize .Header h1 { e abaixo disso digite: text-align: center;
E salve.
Por hoje terminamos.
Na próxima quarta-feira tem a continuação da Série Como personalizar o blog passo a passo.
Vamos aprender como personalizar a área do post: dividir em caixas, personalizar fonte, data, colocar botões de compartilhar e mudar o rodapé dos posts. E muito mais!
Espero você!
Não vá se atrasar, hein!
Boa tarde Elaine
ResponderExcluirAcho que consegui,vendo você fazer parece fácil,na hora de colocar em prática é que são elas.Também é um bom exercício para memória.
Bjs
Maria, por isso fiz o vídeo, porque ver pode ajudar.
ExcluirFaça devagar, reveja o vídeo quantas vezes precisar, faça com calma.
Devagar dará certo. E sim, é mesmo um exercício bem bom!!!
bjssss
Oi Elaine! Como faço para desativar as ferramentas de edição? Meu blog está como o seu exemplo, acima, aparecendo essas "ferramentinhas" que dão acesso à edição de cada parte do blog. Não sei se me explico... rs
ResponderExcluirSandra, tem jeito sim, vou ensinar no post sobre a sidebar.
ExcluirMas essas ferramentinhas só aparece pra mim em meu template, e só aparecem pra ti em seu template. Ninguém tem acesso, s[o o dono do blog, e estando logado.
Eu gosto delas, facilita a vida rsrsrsr
ola elaine como eu faço para colocar bordas na area do post
ResponderExcluirDepois que tiver realizado o segundo tutorial da série, aquele que ensina como personalizar a área do post, acrescente, abaixo de .post-outer { o seguinte comando:
Excluirborder: 1px solid #CÓDIGO DA COR QUE ESCOLHER;
1px solid é o tipo e espessura da borda. altere como desejar.
Elaine, só consigo altera com essa orientação se for no tema que você escolheu? estou tendo dificuldade em alterar o cabeçalho
ResponderExcluirJeanne, via de regra o cabeçalho é alterado de forma igual para todos os temas. Qual está sendo a dificuldade?
ExcluirOlá! o titulo do me blog não está querendo centralizar. o que faço quando isso acontece?
ResponderExcluirRutileia, deu certo? Olhei agora e está centralizado, né?
ExcluirOlá, fiz o comando para centralizar a imagem no cabeçalho quando não for texto, porem não quer centralizar, fica sempre para a direita, o que pode ser?
ResponderExcluirVictor, olhei seu blog e está centralizado.
ExcluirDeu certo, né?