quarta-feira, 25 de maio de 2011

Personalizar Gadget Seguir por Email

Ontem eu publiquei um tutorial ensinando a instalar o novo gadget "Seguir por email", padrão do Blogger.
Hoje veremos como personalizar este gadget, aplicando alguns estilos CSS a ele.

Sem muito blábláblá, vamos ao que interessa.
Segue abaixo algumas opções de personalização que eu encontrei, escolha a que preferir e personalize, editando as cores de acordo com o seu gosto.

1. Personalizar o container geral do gadget:


Vá na aba "Design >> Editar HTML" e procure pela tag ]]></b:skin>
e cole ANTES dela:

/* gadget seguir por email*/
#FollowByEmail1{
border:1px solid #000; /* edite borda*/
padding:10px;
background:#fff; /* edite cor de fundo*/
}


2. Personalizar a caixa onde o leitor deve digitar o email:


Marque a caixinha "expandir modelos de widget" e procure por:

<input class='follow-by-email-address' name='email' placeholder='Email address...' type='text'/>


E substitua por:

<input class='follow-by-email-address' name='email' value='Digite seu email...' type='text'/>

Caso queira personalizar a cor do texto, vá na aba "Design >> Editar HTML" e procure pela tag ]]></b:skin>
e cole ANTES dela:

/*caixa onde digita o email*/
.follow-by-email-address{
color:#818181; /* edite cor do texto*/
}


3. Personalizar o botão de envio:


Marque a caixinha "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'/>


O trecho destacados na cor azul corresponde a cor do texto do botão.
O trecho destacado na cor vermelha, correspnde a cor de fundo do botão.
O trecho destacado na cor verde, corresponde a borda.
Edite as cores como preferir.

4. Personalizar o idioma do requerimento de cadastro para o português:


Marque a caixinha "expandir modelos de widget" e procure por:

<input name='loc' type='hidden' value='en_US'/>

E substitua por:

<input name='loc' type='hidden' value='pt_BR'/>


Veja como ficou minha personalização na imagem demonstrativa abaixo:


Bom, essas foram as opções de personalização que eu encontrei, caso alguém conheça outras formas, por favor, compartilhe conosco.

0 comentários:

Postar um comentário