Configurar gadget seguir por email

Configurar gadget seguir por email

Gadget - instalação

O blogger disponibiliza uma grande ferramenta para voce que gosta de manter uma rede de contato com seus leitores, um gadget para acompanhamento de suas matérias via e-mail.
Este gadget do blogger além de ser simples de instalar, encontrei no blog Mundo Blogger como fazer para personalizar ao seu modo e do template do seu blog modificando o CSS.


Para a instalação vá no seu blog e siga o caminho:
"DESIGN" -> Clique em "ADICIONAR GADGET" -> Escolha "SEGUIR POR E-MAIL"


Na tela a seguir escolha um nome (Aconselho: "Acompanhe por e-mail).
Ao criar este gadget o blogger o coloca de forma padrão do seu template e muitas vezes pra nós não combina, e é melhor modificar, personalizar.


Gadget - Configurando o CSS

Com os códigos css que serão passados a seguir é possível configurar o seu gadget há sua maneira.
Cada elemento será descrito informando o que cada um representa.
Os estilos deverão ser aplicados por você.

Vá novamente em  "DESIGN" ->"EDITAR HTML" e então procure pela tag:
]]></b:skin>
O código CSS deverá ser colado logo ACIMA dela, configurando os estilos á sua escolha para cada elemento contido no código que será explicado abaixo:


/* gadget seguir por email*/
#FollowByEmail1{
border:1px solid #000;   /* Editar a borda*/
padding:10px;
background:#fff; /* Editar a cor de fundo*/
}
A propriedade FollowByEmail1 diz respeito a área total do gadget.

Após configurar a caixa no total, vamos configurar o campo de texto onde o usuário deve digitar seu e-mail.
Ainda em "DESIGN" ->"EDITAR HTML" agora clique em "Expandir modelos de widgets" e procure por:
<input class='follow-by-email-address' name='email' placeholder='Email address...' type='text'/>

Ao encontrar, subistitua o codigo por este novo:
<input onfocus="if(this.value==this.defaultValue)this.value=&quot;&quot;;" value="Digite Seu Email..." type="text" class='follow-by-email-address'
onblur="if(this.value==&quot;&quot;)this.value=this.defaultValue;" name="email"/>
Para personalizar demais propriedades como a cor do texto, vá novamente em "DESIGN" ->"EDITAR HTML" e procure pela tag;
]]></b:skin>
Colocando o codigo abaixo ANTES dela:


.follow-by-email-address{
   color:#818181;
   background-color: #000;
}

Agora vamos personalizar o botão de envio (SUBMIT), para os ajustes marque "expandir modelos de widget" e procure por:
<input class='follow-by-email-submit' type='submit' value='Submit'/>
E substitua por:
<input class='follow-by-email-submit' style='color:#333;background:#ccc;border:1px solid #000;' name='button' type='submit' value='Enviar'/>

color:#333; => define a cor da palavra do botão.
background:#ccc; => define a cor de fundo do botão.
border:1px solid #000; => define a borda do botão.

 E caso queira adicionar uma imagem logo depois ou abaixo do botão basta inserir o codigo normal de uma imagem, veja ambos os codigos e resultados finais do nosso gadget:

Imagem pequena ao lado do botão:
<input class='follow-by-email-submit' style='color:#333;background:#ccc;border:1px solid #000;' name='button' type='submit' value='Enviar'/><img alt="feed kassio romulo" title="feed kassio romulo" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkd_S0P7vL33C2qufoemX3nWPcAvn4MVcWDOodDmwWfdUziTWnQEq8YYG70TYgnA7DXKySpMLY_KFCCjJX2pgj8POybXDBamj9ZP6O34wmRgcsDOOl1vwSvt101dxSRbsjjAWgDAikp4-V/s0/feed-rss.png" width="30" height="30"/>

Imagem grande abaixo da caixa de subscrição:

<input class='follow-by-email-submit' style='color:#333;background:#ccc;border:1px solid #000;' name='button' type='submit' value='Enviar'/><br/><img alt="feed kassio romulo" title="feed kassio romulo" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkd_S0P7vL33C2qufoemX3nWPcAvn4MVcWDOodDmwWfdUziTWnQEq8YYG70TYgnA7DXKySpMLY_KFCCjJX2pgj8POybXDBamj9ZP6O34wmRgcsDOOl1vwSvt101dxSRbsjjAWgDAikp4-V/s0/feed-rss.png" />
Agora todos os 3 resultados:
Caixa com as configurações e sem imagem:

Caixa com as configurações e imagem pequena ao lado:
Caixa com configurações e imagem grande abaixo:

Agora basta usar sua criatividade e pesquisar um pouco sobre elementos CSS aqui e configurar seu gadget da melhor maneira possível.

Obs.: Sempre salve seu template antes de qualquer modificação ou então visualize antes de salvar.