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