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

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:

 Arquivo do blog personalizado- postagens separadas por ano de publicação

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:

 Marcadores do blog em formato de lista com efeito de transição

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

 <input class='follow-by-email-submit' type='submit' value='Submit'/>

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:

 Postagens populares personalizadas- modelos variados

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á?