Série Como personalizar o blog passo a passo- personalizar a sidebar, gadgets e rodapé do blog - * Blog Elaine Gaspareto *

Série Como personalizar o blog passo a passo- personalizar a sidebar, gadgets e rodapé do blog

Publicado em 29/01/2018


E chegamos ao 3º tutorial da Série Como personalizar o blog passo a passo.
Já modificamos a estrutura básica do tema-base, personalizamos a área dos posts e hoje vamos trabalhar a sidebar, ou coluna lateral, se preferir.
Vamos também inserir e personalizar alguns gadgets básicos.
Vamos começar?
Acesse a página com os códigos necessários ao tutorial de hoje:


Copiar os códigos


E, como sempre, aperte o play e veja a execução em vídeo de tudo que faremos. Assim fica mais simples entender e fazer junto, né?


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 títulos e fundo dos gadgets


Assim como fizemos com a área dos posts vamos dividir a sidebar em caixas, e personalizar o título dos gadgets.
Vamos começar acessando a aba Layout do blog onde estamos trabalhando.
Clique em Adicionar um gadget e vá adicionando os seguintes elementos:
  1. Pesquisa de blogs do Google;
  2. Arquivo (configure como Menu suspenso);
  3. Marcadores (configure como Cloud);
  4. Follow by email;
  5. Postagens mais visitadas (configure 5 posts, e sem snippets);
Claro que pode adicionar mais, os que desejar tais como Seguidores, por exemplo.
Mas para as personalizações que vamos fazer serão esses por enquanto, ok?
Gadgets instalados e posicionados?
Vamos personalizar!

Dividir sidebar em caixas e personalizar os títulos:
Na barra de busca digite /* Widgets e localize.
Selecione até encontrar /* Mobile e substitua todo o trecho selecionado pelo código PERSONALIZAR SIDEBAR  E TÍTULOS DOS GADGETS.
Salve.

Você verá que a sidebar está separadinha em caixas, os títulos dos gadgets estão centralizados e com a cor de fundo.
Essa cor de fundo é a mesma que usaremos na cor do menu que vamos inserir em breve.
A personalização dos títulos será aplicada também aos gadgets do footer do template.


Personalizar gadgets básicos nativos do Blogger


Caixa de pesquisa personalizada:
Agora vamos personalizar a caixa de pesquisa nativa do Blogger.
Sem personalizar ela estará assim:
Para personalizar os marcadores acesse esse tutorial:

Acessar o tutorial


Arquivo do blog personalizado:
Cole o CÓDIGO ARQUIVO PERSONALIZADO acima de ]]></b:skin> e salve.
Caso prefira outra opção de Arquivo personalizado pode usar este tutorial:



Marcadores em formato de nuvem colorida:
Para conseguir esse efeito eu segui o tutorial abaixo:

Acessar o tutorial

Acesse, siga exatamente como explico, personalize cores como desejar e depois de pronto, salve.
Fica legal usar tons contrastantes como está no tutorial, mas também fica fofo usar tons pastéis que combinem entre si, como eu fiz.
Se preferir outra forma de personalizar os marcadores veja esse tutorial:



Follow by email personalizado:
Cole o CÓDIGO PERSONALIZAR SEGUIR POR EMAIL acima de ]]></b:skin> e salve. A seguir localize a linha:



E troque a palavra Submit pela palavra que desejar.
Eu escolhi colocar Assinar agora.
Salve.
Acima dessa linha tem o termo Email adresss...
Substitua por Seu endereço de email, caso deseje.
Salve.

Postagens mais vistas:
Agora vamos personalizar os posts mais vistos.
Há, aqui no blog, uma infinidade de opções.
Veja:


Escolha qual deseja usar, siga exatamente o que explico no tutorial e dará certo.
Para meu blog de testes eu escolhi usar esse modelo:


Acessar o tutorial


Créditos do rodapé:
Para inserir os créditos localize, no código-fonte, a linha ]]></b:skin> e acima dela cole o CÓDIGO DOS CRÉDITOS DO RODAPÉ.
A seguir localize </body> e acima dele cole o CÓDIGO HTML CRÉDITOS.
Altere com os créditos conforme deixei marcado no código e salve.

Estamos finalizando por hoje!
Nesse momento nosso template está assim:


No próximo tutorial da Série Como personalizar o blog passo a passo vamos inserir mais gadgets personalizados e importantes, colocar menu, slide e mais algumas coisas legais!

Se você tiver alguma dúvida, sugestão ou pedido para fazer diga nos comentários e eu ajudo assim que possível!
A gente se vê em breve pra continuarmos a série!
Não se atrase, tá?


16 comentários via Blogger
comentários via Facebook

16 comentários:

  1. Amo as suas postagens desde sempre... tenho blog desde 2011 e sempre venho aqui pra tirar minhas dúvidas!! Obrigada, de <3 !

    ResponderExcluir
  2. Boa noite Elaine
    Essa série já foi mais tranquila,estou me habituando a mexer nos códigos,um pouco insegura ainda.Achava que seria impossível,só você mesmo para permitir com toda sua calma.
    Beijos

    ResponderExcluir
  3. Oi Elaine
    Desculpe,o comentário acima fui eu quem fiz,so q com o e mail do blog de teste.
    Beijos

    ResponderExcluir
    Respostas
    1. Maria, tudo bem :)
      Fico feliz que esteja conseguindo.
      Se sentir dificuldade pare, reveja o vídeo, e udo dará certo :)
      bjssss

      Excluir
  4. Bom dia Elaine !! Venho te agradecer e parabenizar pelo seu trabalho, pelo seu desprendimento em ajudar, e saiba que você tem ajudado e muito, a muitas pessoas que sequer conhece, como eu por exemplo, que te sigo a tempos, e estou sempre aqui. Montei meu primeiro blog com a sua ajuda e sempre quis deixar ele responsivo, e com a sua ajuda estou criando meu novo cantinho com todo carinho, e melhor, saber que será responsivo como eu sempre quis !! Desejo de todo coração, que o Universo lhe retribua quintuplamente tudo o que você faz por nós !! Abençoada sejas hoje e sempre !! Tudo certinho no meu até aqui, e ansiosíssima para os próximos tutoriais ! <3

    ResponderExcluir
    Respostas
    1. Luciana, que comentário mais gostoso de ler!
      Muito obrigada!
      Estamos terminando essa série e em seguida começo a outra, que será bem importante e espero que vá ajudar!
      beijossss

      Excluir
  5. Oi Elaine, eu precisava apenas saber em que lugar do código que eu mudo a cor da borda dos gadgets, que é preta e eu precisava que fossem outra cor, já revirei de cabo a rabo e não consigo mudar a cor, socorro !! kkkkkk

    ResponderExcluir
    Respostas
    1. Luciana, localize no código que personaliza a sidebar essa linha:
      background: $(tabs.background.color);
      E substitua por:
      background: #ffffff;
      Sendo que #ffffff é o código de cor, no caso, branco.
      Troque ffffff pelo código hexadecimal que preferir.
      Ou altere direto no painel, a cor de fundo vai seguir a cor de fundo do menu...
      Amanhã sai mais um post da série, falo exatamente do menu...
      beijossss

      Excluir
    2. Nossa Elaine, feliz da vida aqui, agora sim tá tudo combinando, está ficando lindiinhoo meu blog !! Gratidão imensaaa por sua ajuda, e nossa, estou aqui na 1ª fila esperando os outros tutoriais, pois estou fazendo o layout todinho com seus tutos, sempre dão certo e não causam conflito. Que o Universo te retribua sempre !! bjos !

      Excluir
  6. Elaine,percebi que os botões:assinar e pesquisar só aparecem quando passo o mouse,no seu blog eles já estão fixos,roxinho.Pelo que entendi pelo vídeo,eles vão ficar com a cor do menu,quando for colocado.É isso mesmo?Obrigada.
    Beijos

    ResponderExcluir
    Respostas
    1. Sim, isso! Ao instalar o trocar a cor do menu os demais itens seguirão essa cor. O post de hoje mostra isso :)
      bjsssss

      Excluir
  7. Olá Elaine, o mesmo que aconteceu com a Maria F.N. Vechi, acontece comigo, mesmo depois de instalar o menu, os botões de "assinar" não aparecem, somente aparecem qd passa o mouse. Estaria faltando algo no código? Como posso corrigir? Grato.

    ResponderExcluir
    Respostas
    1. Luiz, precisa alterar as cores no painel.
      O tutorial mais recente da série explica:
      http://www.elainegaspareto.com/2018/02/adicionar-personalizar-recursos-extras.html

      A parte que define as cores também pode ser alterada direto no código específico dos botões, basta trocar o comando $(tabs,selected.background) pelo código da cor que desejar.

      Excluir
    2. No painel eu já havia tentado, mas os botões não mudam, mas agora mudei no código e deu certo. Obrigado.

      Excluir
  8. Elaine, na parte de personalizar a caixa de pesquisa, quando eu coloco o código "personalizar a caixa de pesquisa" abaixo de ]]>, ele não funciona, não muda caixa de pesquisa? Como posso arruma? Desde então obrigado.

    ResponderExcluir
    Respostas
    1. Freddy, não é abaixo, é acima.
      E a caixa de busca precisa já estar instalada no blog, ok?

      Excluir

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…