Gadgets 2


"Clique em cima da flechinha e arraste para marcar o passo do tutorial onde está trabalhando"


Uma outra forma de personalizar os gadgets é colocando uma barrinha como background dos títulos.
Para meu segundo blog de teste eu escolhi um layout do corpo com apenas 1 coluna de gadgets à direita:


Depois disso fui em Ajustar larguras para saber a medida dos meus gadgets, nesse caso 350.
Na verdade 350 é a largura do espaço total da coluna da direita. Então criarei uma barrinha com 330px de comprimento.


Adicionei inicialmente 2 gagdets: perfil e arquivo do blog.


Abro o HTML do blog, abro a caixinha de pesquisa e coloco a tag </b:template-skin>, dando Enter.
Logo acima colo o código abaixo:





#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: transparent 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;
}    
#Profile1 h2{
Font-family: Times New Roman;
text-align: center;
color: #800000;
font-size: 14px;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgY8kKDTCgiLh6oBoJ8G1FMnk28TakoKRtV8iPqwufj3T5IfNBDGEsvl9ZzLfrsbRAiEsyrJbctspyOSV5dUgsByFN2ynOf5kphXjpCzQDtZ_HVDjX4M51SKfqVy3xicYYGzCwBM4BKNxLNcQg8psaKSxtpcAIcCsU9UQVoTUBgZn2QZU86ZHEa9L1/s250/plaquinhas%202.png) center no-repeat;
margin-top: 0px; 
margin-left: 0px; 
padding-top: -60px;
padding-left: 0px;
padding-bottom: 50px;
}


A primeira parte do código diz respeito ao container total, ao fundo do gadget.
A segunda parte corresponde ao texto que aparece no gadget, inclusive aqueles que escreveremos nos gadgets HTML, que são os gadgets usados quando queremos adicionar um código externo.
A terceira parte corresponde ao título do gadget, h2 se refere aos títulos. E margin e padding determinam a posição do título. Use para ajustar a sua plaquinha ao seu gadget porque as medidas dos gdgets vão variar de acordo com as medidas que você escolher no Designer de tema.
Todas as 3 partes podem ser personalizadas com as nossas cores, tamanhos de fontes, tipo de plaquinha que iremos adicionar, etc...

A barrinha que vou usar é essa:


E o resultado é esse:


A cada gadget adicionado, se você quiser, coloque o mesmo código só mudando a ID do gadget nos 3 blocos de código, senão a personalização não funcionará:


#BlogArchive1 {
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 5px solid; padding: 10px;
-moz-border-radius: 20px;-webkit-border-radius: 20px;border-radius: 20px;
border: 0 0 10 10px;
padding: 0 0 10 10px;
}
#BlogArchive1 {
Font-family: Times New Roman;
color: #386923;
font-size: 20px;
}
#BlogArchive1 h2{
Font-family: Times New Roman;
text-align: center;
color: #800000;
font-size: 14px;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgY8kKDTCgiLh6oBoJ8G1FMnk28TakoKRtV8iPqwufj3T5IfNBDGEsvl9ZzLfrsbRAiEsyrJbctspyOSV5dUgsByFN2ynOf5kphXjpCzQDtZ_HVDjX4M51SKfqVy3xicYYGzCwBM4BKNxLNcQg8psaKSxtpcAIcCsU9UQVoTUBgZn2QZU86ZHEa9L1/s250/plaquinhas%202.png) center no-repeat;
margin-top: 0px; 
margin-left: 0px; 
padding-top: -60px;
padding-left: 0px;
padding-bottom: 50px;
}






Podemos personalizar cada gadget de maneira diferente, já que sempre criamos um código para cada gadget instalado.
Instalei o gadget Formulário de contato, mas pessoalmente eu não gosto dele porque ao responder aos meus leitores a maioria das respostas voltou sem encontrar o destinatário.
Quando era 10% de respostas por erro no e-mail do destinatário eu ainda podia achar que era erro de digitação do meu visitante, mas quando passou de 70% a coisa mudou de figura. É muita gente errando seu próprio e-mail.
Então resolvi linkar meu e-mail à uma gif de envelopinho.
Voltando ao gadget Formulário de contato.
Assim que adicionamos ele tem o fundo transparente:


Voltei ao layout e alterei o texto do título:


Busquei a ID dele e adicionei ao código:


#ContactForm1 {
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 5px solid; padding: 10px;
-moz-border-radius: 20px;-webkit-border-radius: 20px;border-radius: 20px;
border: 0 0 10 10px;
padding: 0 0 10 10px;
}
#ContactForm1 {
Font-family: Times New Roman;
color: #386923;
font-size: 20px;
}
#ContactForm1 h2{
Font-family: Times New Roman;
text-align: center;
color: #800000;
font-size: 18px;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-MKugIUyfnAgwc-1jocMzU0FIBc3rNHUypa-jbcsjtYMhj86dMn5kBSXptbetbc7BPKs7ihbQgX19umXqu7PFcPzF8kLbvSQ4Xw7AGI9sirxV0_RXj12AJ-_ZuAwLj-Wtl74DohNsH7ipbZdAUC79eTUY26ksFv6modDZiRNGGLsaHxpQ5ITjCAcJ/s240/t%C3%ADtulo%20gadgets%202.gif) center no-repeat;
margin-top: -30px; 
margin-left: 0px; 
padding-top: 45px;
padding-left: 25px;
padding-right: 25px;
padding-bottom: 50px;
}



Precisei alterar os valores abaixo, na seção #ContactForm1 h2, que corresponde ao título.

Mudei esse:
margin-top: 0px; 
margin-left: 0px; 
padding-top: -60px;
padding-left: 0px;
padding-bottom: 50px;

para esse:
margin-top: -30px; 
margin-left: 0px; 
padding-top: 45px;
padding-left: 25px;
padding-right: 25px;
padding-bottom: 50px;



Adicionei um segundo formulário de contato para fazer uma experiência de apenas adicionar uma cor no background do título.
As alterações nesse código foram apenas na seção #ContactForm2 h2, referente ao título, e é claro na ID do gadget.


#ContactForm2 {
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 5px solid; padding: 10px;
-moz-border-radius: 20px;-webkit-border-radius: 20px;border-radius: 20px;
border: 0 0 10 10px;
padding: 0 0 10 10px;
}
#ContactForm2 {
Font-family: Times New Roman;
color: #386923;
font-size: 20px;
}
#ContactForm2 h2{
Font-family: Times New Roman;
text-align: center;
color: #ffffff;
font-size: 18px;
background: #800000;
margin-top: -10px; 
margin-left: -10px;
margin-right: -10px; 
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
}


O resultado é esse:


Só podemos adicionar 2 formulários de contato no nosso blog e assim mesmo um deles será para colocarmos em uma página estática.
Ao adicionarmos o segundo formulário de contato no blog essa opção fica desativada quando clicamos para adicionarmos um novo gagdet:


Quem quiser aprender como colocar o formulário de contato em uma página estática pode ler o excelente tutorial da Elaine Gaspareto aqui e nesse outro link aqui ela oferece 6 modelos diferentes de formulários de contato.

Se tiver dúvidas clique na plaquinha e me envie um e-mail:





Nenhum comentário:

Postar um comentário

Para se inscrever nas listas clique nos títulos de cada grupo na página inicial. Comece com as aulas de PSP, depois continue com o PSP + AS, e se quiser siga com o Xara e a Formatação para criar belos e-mails.
Deixe aqui suas opiniões e seja sempre bem-vindo(a).

Assinar: Postar comentários (Atom)