Gadgets 1

Gadgets 1
Mesmo um template onde a área de postagem ocupa toda largura do blog podemos adicionar gadgets no rodapé.Vou adicionar gadgets no footer-1 e no footer 2.No footer 1 vamos adicionar o Seguidores.Vá em Layout, role até achar a área do rodapé e clique em "Adicionar um gadget". Na janela que abrir escolha "Seguidores".

Na janela que se abrir você pode manter o mesmo título ou escrever outro:

  

Vou adicionar mais 2 no footer-2.Siga o mesmo caminho Adicionar um gadget > escolher o gadget > salvar.O primeiro é o Perfil.Quando abrir a janelinha escolha se quer mostrar só o seu perfil ou onde você mora. E também aqui você pode escolher se quer deixar o título ou escrever um convite curtinho.

O próximo gadget é o das estatísticas. É bom saber quantas visualizações de páginas nós temos.É possível ver as estatísticas na área administrativa do blog, mas esse gadget mostra também aos nossos visitantes quantas visualizações nós temos.Escolha se quer mostrar os números desde que o blog ficou on line ou se quer mostrar só períodos recentes, a forma do contador e se quer mostrar grádico e como ele será.

  

E você poderá mudar essa configuração depois, se não gostar da primeira escolha.Já temos 3 gadgets, mas eles estão transparentes e estão bem à esquerda.

Para mover toda essa área para a direita vá em Tema > Personalizar > Editar HTML - ctrl F e digite /* Footer na caixinha de pesquisa.Dentro do código nós buscamos a última linha margin: 0 -$(shadow.spread);

Vamos apagá-la e no lugar escrever margin-left: 120px;

Pronto! Agora já temos nossos gadgets alinhados com a área dos posts.

Eles ainda estão transparentes.Vamos dar estilo a eles.

Mas, antes uma informação importante.Quando você quiser entender mais dos códigos e quiser ver o código de uma área específica ou só saber o nome, abra seu blog, role até a área que quer conhecer mais, clique com o botão direito do mouse e escolha Inspecionar.

Vai abrir essa aba na lateral:

Mova o cursor nessa linha (1) que tem ... no começo e ... no final. Ali aparecerão os nomes de cada área do blog.Caso nenhum desses nomes visíveis for o da área que você precisa, clique nos ... da direita ou da esquerda que mais nomes aparecerão.Nesse caso o que eu precisava, Footer, já apareceu, a área toda foi selecionada e apareceu uma nuvem com o nome da área dentro (2).

Assim eu posso procurar com mais agilidade esse elemento no HTML do blog.E para filtrar mais ainda posso continuar a correr o mouse pela linha e a área geral vai sendo selecionada em suas divisões:

Com isso eu sei qual a área do código fonte vai me permitir fazer alterações no blog.A propósito, clicando em qualquer área do blog, abaixo do título, com o botão direito do mouse e escolhendo a opção Exibir código fonte da página qualquer um pode analisar o código fonte para encontrar erros ou copiar seções dos códigos.

Isso é muito útil para webmasters ajudarem a melhorar a página.Felizmente, por segurança, só é possível ler ou copiar esses códigos, mas não dá para apagá-los ou modificá-los.

Usando as informações acima eu vou procurar a ID de cada widget que adicionei ao blog.Passe o mouse sobre a linha indicada  (a que tem ... e ...) até que seu gadget fique selecionado.Eu já sei que a ID desse gadget Perfil é #Profile 1 porque lá na linha na direita é esse que está em destaque azul, div#Profile1.widget.Profile:

Caso ainda reste dúvida vamos ao código fonte e clicamos no ícone "Ir para o widget". Vai abrir uma listinha e clicando sobre o título seremos direcionados para o código do gadget.

Agora temos a certeza de que #Profile1 é mesmo a ID desse gadget e iremos usar essa ID para personalizá-lo.O código que iremos usar é esse e a ID do gadget é repetida 2 vezes:
#Profile1 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVk4QDKD1xXn3NQ7ZmWPKK43yKW-EEVOisb_obmsUus9PBHk7tJdyGPA39KeW-1fSu9-FPVsrB51UMJphZY1DwfihTfvpoN-qTTfjejlLSLgGMi3TgTp6goheNgoktf_sSnZIcUr0EE1V8qVUAugY6yk5-IG3hKVV4BHZ0K_-L5kxxoZqGNaKLuDmJ/s200/pattern%20Gisa%20VF%207.jpg);border: #800000 10px solid; padding: 10px;-moz-border-radius: 20px;-webkit-border-radius: 20px;border-radius: 20px;}#Profile1 {Font-family: Times New Roman;color: #386923;font-size: 20px;}
Na primeira personalizamos o gadget propriamente dito e na segunda a fonte.E esse código eu devo adicionar antes da tag </b:template-skin>.

Farei o mesmo para cada gadgets que eu quiser personalizar.Para achar o próximo ID eu fui por eliminação. Pela lista suspensa eu achei que o de Visualizações de páginas só poderia ser o último - Stats1.

Mas eu também poderia abrir a caixinha de pesquisa e escrever o nome que dei ao gadget. Pode até ser um nome aleatório, só para eu encontrar a ID do gadget.

Nem precisei escrever o título todo.Como eu quero a mesma personalização em todos os gadgets basta trocar #Profile1 por #Stats1 e adicionar logo abaixo do primeiro código.
#Stats1 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVk4QDKD1xXn3NQ7ZmWPKK43yKW-EEVOisb_obmsUus9PBHk7tJdyGPA39KeW-1fSu9-FPVsrB51UMJphZY1DwfihTfvpoN-qTTfjejlLSLgGMi3TgTp6goheNgoktf_sSnZIcUr0EE1V8qVUAugY6yk5-IG3hKVV4BHZ0K_-L5kxxoZqGNaKLuDmJ/s200/pattern%20Gisa%20VF%207.jpg);border: #800000 10px solid; padding: 10px;-moz-border-radius: 20px;-webkit-border-radius: 20px;border-radius: 20px;}#Stats1 {Font-family: Times New Roman;color: #386923;font-size: 20px;}

Esse segundo gadget ficou cortado na direita. Isso porque arrastei essa área para a direita, mas quero consertar isso.Volto lá Designer de tema e mudo o layout do rodapé:

E se eu quiser volto lá em /* Footer e mudo o valor de margin-left: até centralizar meus gadgets.Precisei mudar o gadget Seguidores porque ele ficou cortado também.Ainda hei de descobrir como reduzir a largura desses containers.

Por hora centralizei os gadgets já instalados.Se quisermos trocar os gadgets de lugar basta colocar o cursor na área cinza até que vire essa setinha dupla e arrastar o gadget para onde quisermos, dentro das colunas de gadgets.

Dúvidas, clique na plaquinha e me envie um e-mail.