Caixa de Assinatura Rss via Email Personalizada

Todo blogueiro que almeja alcançar o sucesso e ganhar dinheiro tem que disponibilizar em seu blog formas de subscrição Rss para seus leitores. Quando escrevi o artigo estratégias para aumentar sua lista de assinantes do blog falei de vários fatores importantes para quem deseja conseguir sucesso e ganhar dinheiro com blogs. Fidelizar seus leitores e conseguir suas assinaturas são de grande importância para mante-lo informado sem que ele precise vir até seu blog para ler seus artigos, e ainda serve para futuramente fazer campanhas de Email Marketing que hoje em dia vem sendo uma das formas mais eficiente de ganhar dinheiro na internet.

Vou disponibilizar para você uma caixa de subscrição personalizada para que você coloque em seu blog e comece a juntar seus fieis assinantes. A caixa é como essa que está na imagem abaixo.

Essa caixa é colocada na barra lateral, mas se você quiser colocar em outro local de seu blog não tem problema algum.

Vamos agora ver o código para o funcionamento da caixa de subscrição. O código abaixo você deve colocar dentro de um Widget do tipo Html/JavaScript. O caminho para adicionar o widget é o seguinte: vá até o painel de seu blog e clique em Layout >> depois clique em Adicionar um gadget >> ai escolha o gadget do tipo Html/JavaScript copie o código abaixo cole dentro do gadget.

<div id="assinar-feed-rss" style="background: whiteSmoke url(http://i1212.photobucket.com/albums/cc447/wesleyextreme/alternativa%20extreme%20menu/email-feed-rss-subscrio.png) no-repeat left;width:370px; height: 20px;margin-bottom: 10px;color: #5A5A5A;padding-left: 10px;line-height: 15px;font-size: 14px;">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" style="font-size:13px;padding-bottom: 4px;width: 312px;float: right;margin-top: -7px;margin-right: 10px;" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=NOME DO SEU FEED', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input style="display: initial;width: 200px;height: 12px;float: left;margin-right: 8px;border: 1px solid #CCC;font-size: 12px;" placeholder="Digite aqui seu e-mail" id="input-rss" class="input-rss" type="text" name="email"/>
<input type="hidden" value="NOME DO SEU FEED" name="uri"/>
<input type="hidden" name="loc" value="pt_BR"/>
<input id="continuar-lendo" class="mais" style="width: 85px;margin-top: 1px;float: right;font-size: 15px;height: 28px;line-height: 10px;float: left;padding-left: 5px;padding-right: 5px;" type="submit" value=" ASSINAR "/>
</form></div>

Você pode alterar as marcações da seguinte forma: onde está em laranja é a url da imagem do envelope, você pode trocar por outro do seu gosto, o tamanho é 48x48 px, ou se preferir pode removê-la apagando o código em laranja.

A primeira marcação em vermelho é o tamanho total da caixa, ali você pode aumentar ou diminuir conforme sua necessidade. As demais marcações em vermelho se referem ao local onde o leitor vai digitar o email, se for preciso alterar pocure usar sempre os mesmos valores , por exemplo: se for aumentar 20px ficaria assim: 332px e 220px ou se for diminuir 20px ai ficaria assim 292px e 180px.

Onde está marcado em azul você deve colocar o nome do seu feed rss. após terminar as alterações clique em salvar e vamos ao próximo passo.

Agora vamos colocar as regras Css em seu template. Você deve ir em seu painel e clicar em Modelo >> depois Editar Html >> e procurar pelo seguite código  ]]></b:skin> após encontrar a skin cole o código da Css acima dela.

#assinar-feed-rss {background: whiteSmoke;
padding: 12px 0 8px;
border-bottom: 1px solid #CCC;
margin: 0 -11px 0px -11px;
border-top: 1px solid #CCC;
margin-top: 24px;
border: 1px solid #CCC;
}

#continuar-lendo {cursor: pointer;
margin-top: -7px;
height: 31px;
color: white!important;
background: #5F729D url(http://www.blogandocomfacilidade.com/wp-content/themes/v3/images/repeat-botao.jpg) repeat-x;
border: 1px solid #134F5C;
text-decoration: none;
outline: none;
-goog-ms-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: 0 0 .4px #D9D9D9;
-moz-box-shadow: 0 0 .4px #D9D9D9;
box-shadow: 0 1px .3px #D9D9D9;
text-shadow: 0 1px 1px black;
width: 155px;
float: right;
display: block;
text-transform: uppercase;
font-weight: 700;
line-height: 31px;
font-size: 14px;
border-image: initial;
padding: 0 10px;
}

#input-rss {
padding: 8px;
}

Após colar o código agora é só salvar e ver como ficou. O código foi encontrado no blog Blogando com Facilidade e foi postado por Iago Melanias, as alterações que fiz foram minimas então todos os créditos vão para o Iago.

Não vai se esquecer de colocar o nome do seu Feed Rss no primeiro código para que funcione corretamente. Pondere também ler alguns de nossos artigos para melhorar sua experiência e interação conosco.

          . PopUp de Subscrição e Redes Sociais Para Blogger
          . Estratégias Para Aumentar Sua Lista de Assinantes do Blog
          . Como Ter um Bom Blog e Ser um Grande Blogueiro
          . Leitores ou Buscadores? Para Quem devemos Escrever em Nosso Blog
          . Movimento Blogs Unidos - Participe Dessa Corrente
          . Adicionar Subscrição de Feed Rss no Blog

Gostou? Então deixe seu comentário e aproveite para assinar nosso blog e receber nossas atualizações.

Até mais!