HammerGarita
Gamma
Marketing
Verificación en dos pasos activada
A inscrição por e-mail é algo que todo site deve oferecer aos seus leitores, já que há muitas pessoas que são fiéis ao seu blog e gostam de receber notificações sempre que você publica conteúdo novo.
Neste tutorial, vou mostrar como você pode oferecer este serviço de uma maneira agradável para o leitor do seu blog, com um design simples e elegante que tenho certeza que ajudará você a aumentar seus inscritos.
O que é a primeira coisa que devo fazer?
A primeira coisa que faremos será acessar o FeedBurner.com. Por ser um serviço do Google, ele está integrado à sua conta do Gmail, então você deve fazer login para poder adicionar seu Feed.
Uma vez que você tenha feito login, encontrará uma tela como a seguinte, na qual a única coisa que deve fazer é inserir a URL do seu blog.
Posteriormente, ele nos enviará para outra tela onde pedirá o Título do Feed, mas como podem notar, ele obtém automaticamente o título do blog, neste caso do Fórum. Vocês optarão por deixá-lo igual ou mudar e simplesmente clicarão no botão seguinte.
Você encontrará esta tela onde confirmará que seu Feed já foi criado, agora só nos resta seguir dois passos simples.
Certo, certo, agora sim já temos nosso Feed criado. Agora utilizaremos uma das funções que o FeedBurner nos oferece, que é a de inscrição por e-mail, então ativaremos este serviço indo em Publicize > Suscripciones por Email e clicaremos no botão de ativar.
Assim que ativarmos o serviço, ele gera um código que devemos copiar e colar em nosso site (eu recomendo ao final do nosso artigo). Além disso, temos a opção de selecionar o idioma; se o seu site está em espanhol, você deverá escolher este idioma, para maior comodidade dos seus inscritos.
Quando você inserir o código que o FeedBurner forneceu, certamente notará que ele tem um design bastante simples e nada atraente para nossos seguidores.
Como posso melhorar a aparência do meu formulário de inscrição?
É hora de colocar a mão na massa para dar estilos a este formulário. Se você não sabe muito de CSS, não se preocupe, pois explicarei da forma mais detalhada possível para que você possa adaptá-lo ao seu blog. Então, vamos começar.
Passo 1:
O primeiro será criar uma div à qual atribuiremos um identificador, neste caso chamei de "suscripcion". Estes identificadores devem ser únicos em toda a sua estrutura HTML, então certifique-se de que não exista outro igual. Dentro desta Div, colocaremos o código que o FeedBurner nos deu.
HTML:
<div id="suscripcion">
<!-- Código que te proporciona Feedburner -->
</div>Passo 2:
O próximo passo será eliminar todas as etiquetas <p> do código que o FeedBurner nos forneceu. De forma que nosso código fique da seguinte maneira:
HTML:
<!-- Código de ejemplo -->
<div id="suscripcion">
<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=URL', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input type="text" style="width:140px" name="email"/>
<input type="hidden" value="TuValue" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>
<input type="submit" value="Subscribe" />
</form>
</div>Passo 3:
Agora, se analisarmos detalhadamente o código que o FeedBurner nos dá, podemos notar que ele adiciona alguns estilos por padrão. O que faremos será identificar a etiqueta <form style=""> e eliminaremos a borda que ele coloca (border), já que não fica muito estética, embora isso seja opcional.
HTML:
<!-- Este es el pedazo de código que debemos eliminar (border:1px solid #ccc;) -->
<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=URL', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<!-- Quedando nuestro código así -->
<form style="padding:3px;text-align:center;" action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=URL', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">Passo 3:
Identificaremos a etiqueta input do tipo text com o nome email, apagaremos o estilo que estiver definido e adicionaremos outras propriedades.
HTML:
<!-- Etiqueta original -->
<input type="text" style="width:140px" name="email"/>
<!-- Etiqueta modificada -->
<input type="text" placeholder="Dirección de correo electrónico..." required="required" name="email"/>As propriedades que foram adicionadas são as de placeholder, que é um texto que aparece dentro do campo de texto antes de ser inserido conteúdo, e a propriedade required, que não permite que o campo de texto fique vazio.
Passo 4:
Agora buscaremos e identificaremos a etiqueta input do tipo submit, que é o botão do nosso formulário. O que faremos aqui será adicionar a classe submit, com a finalidade de poder dar estilos a ele.
HTML:
<!-- Etiqueta original -->
<input type="submit" value="Subscribe" />
<!-- Etiqueta modificada -->
<input class="submit" type="submit" value="Subscribe" />Agora sim, já temos nosso formulário pronto para receber estilos e uma aparência melhor. Seu código deve ser similar ao que é mostrado a seguir; se não for, é porque você pulou algum passo.
HTML:
<div id="suscripcion">
<form style="padding:3px;text-align:center;" action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=tuURL', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input type="text" placeholder="Dirección de correo electrónico..." required="required" name="email"/>
<input type="hidden" value="tuValue" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>
<input class="submit" type="submit" value="Subscribe" />
</form>
</div>Adicionando Estilos CSS
Já definimos a estrutura HTML do nosso formulário, agora é hora de dar estilos para finalizar a personalização da nossa caixa de inscrição.
O que faremos será adicionar os seguintes estilos ao arquivo .CSS do nosso site. Em um instante explicarei como modificá-lo.
Inserir CODE, HTML ou PHP:
/* Damos estilo a todas las etiquetas input que se encuentren
dentro del div suscripcion que creamos en el Paso 1 */
#suscripcion input {
border: medium none;
border-radius: 5px 5px 5px 5px;
box-shadow: 0 0 5px #c2c2c2 inset;
color: #fff00;
font-family: arial;
font-size: 14px;
margin-bottom: 25px;
padding: 15px;
width: 280px;
}
/* Damos estilo a la clase submit que creamos en el paso 4 */
#suscripcion .submit {
background: none repeat scroll 0 0 #E8550B;
border-radius: 5px 5px 5px 5px;
box-shadow: 0 1px 2px #b6b6b6;
color: #FFF;
cursor: pointer;
font-weight: 100;
margin: 0 auto;
width: 180px;
transition: all .3s ease-out;
}
/* Damos estilo estilo a nuestro botón cada que el puntero pasa por encima */
#suscripcion .submit:hover{
background-color: #ec773b;
};Este código você pode editar a seu gosto. Se o que você quer é modificar a cor do botão, simplesmente procure as propriedades de background e background color e modifique os códigos hexadecimais (#FFFFFF), os quais você pode obter no Photoshop ou em ferramentas online.
Inserir CODE, HTML ou PHP:
#suscripcion .submit {
background: none repeat scroll 0 0 #E8550B;
}
#suscripcion .submit:hover{
background-color: #ec773b;
};Resultados:
Qualquer dúvida, responderei com prazer. Espero que gostem deste tutorial. Como podem ver, melhoramos radicalmente o design do nosso formulário de inscrição, e isso se traduz em novos inscritos no nosso blog, já que se torna mais atraente para o leitor.
Última edição:
