Caso alguma imagem do blog não esteja aparecendo, por favor, avise nos comentários da postagem em questão!

17/10/2013

Tutorial - Personalizar o gadget "Seguir por e-mail" (completamente)

Personalizar o gadget "Seguir por e-mail"
Alados, hoje vou ensinar para vocês como ter o seu "Seguir por e-mail" completamente personalizado! Falarei sobre como podemos trocar a cor, o idioma, a mensagem de confirmação, o estilo dos e-mails que chegam para seus seguidores, como fazer para que a postagem não chegue inteira no e-mail de quem lhe segue; enfim, tudo o que você precisa saber sobre este recurso!
Se seu blog é do Blogger pode ter este gadget indo em Layout > Adicionar um gadget > Seguir por email. Se seu blog é de outra plataforma, você também pode se cadastrar no site http://feedburner.google.com e criar sua conta.

Mas primeiro, convido você a me seguir também, ué! A caixinha de seguir por e-mail aqui do DSA está logo ali na coluna da direita, num quadradinho roxo bem no começo da sidebar!

Personalizando cores, fontes e estilos do gadget (somente para blogs do Blogger):

Primeiro falarei sobre como personalizar o gadget que fica instalado no nosso blog. Eu, pessoalmente, gosto de deixá-lo do jeito padrão mesmo, mas se você quiser trocar as cores e outros aspectos do seu, vou dizer como nos tutoriais abaixo.

Para sua segurança, salve um backup do seu template antes de fazer as modificações a seguir.

Personalizar o fundo do gadget:

Primeiro vamos aprender a colocar um fundo simples por trás do gadget. Para isso, entre no seu painel do Blogger e vá para a aba Modelo e clique no botão branco "HTML". Quando o código do seu template abrir, clique em qualquer parte do código e aperte "Ctrl + F" no seu teclado. Na caixinha que apareceu, cole o seguinte código: ]]></b:skin> e aperte a tecla "Enter" no seu teclado.
Antes do código que ficou em destaque, cole o seguinte código:
#FollowByEmail1{
border: 1px solid #000; /*Borda do gadget*/
padding:10px;
background: #CCC; /*Fundo do gadget*/
 }
Os valores em negrito são os que você pode modificar (a explicação está logo ao lado deles). Você também pode acrescentar mais códigos se quiser, de acordo com o seu conhecimento de CSS.

Visualize para ver se está tudo OK e depois clique em "Salvar Alterações".

Personalizar o botão "Submit":

Agora vamos aprender a mudar o botãozinho quadrado chamado "Submit". Para isso, entre no seu painel do Blogger e vá para a aba Modelo e clique no botão branco "HTML". Quando o código do seu template abrir, clique em qualquer parte do código e aperte "Ctrl + F" no seu teclado. Na caixinha que apereceu, cole o seguinte código:  
<input class='follow-by-email-submit' type='submit' value='Submit'/>
 E aperte a tecla "Enter" no seu teclado. Substitua todo o trecho em destaque pelo seguinte:
<input class='follow-by-email-submit' style='color:#333; background:#ccc; border:1px solid #000;' name='button' type='submit' value='Seguir!'/>
O valor em rosa é a cor da fonte. O valor em vermelho é a cor do fundo. O valor em verde modifica a borda. A palavra em azul é o texto do botão (pode escrever o que você quiser).

Visualize para ver se está tudo OK e depois clique em "Salvar Alterações".

Personalizando cores, fontes, estilos e títulos dos e-mails:

Quer personalizar oa e-mails contendo as novidades do seu blog que chegarão nos e-mails dos seus seguidores? Basta seguir o passo a passo a seguir!

Primeiro, vá ao site http://feedburner.google.com. Lá abrirá uma tela parecida com a do print abaixo. Clique no nome do blog que você deseja personalizar os e-mails do gadget.


Na janela que abriu, clique na aba "Publicize":


Na janela que abriu, clique em "Email Subscriptions", o link indicado na foto abaixo:


Clique, agora, no link "Email Branding", o terceiro dos que apareceram:


A primeira parte da tela é a seguinte:


Em "Email Subject/Title", você pode determinar qual será o assunto do e-mail que chegará para os seus seguidores, escreva o que você quiser. Uma boa dica é usar o código ${latestItemTitle}, que adiciona ao assunto do e-mail o título que você colocou no post do dia. Eu coloquei da seguinte forma:

Hoje no DSA: ${latestItemTitle}

Marque a caixa "Change Subject when an email has 2 or more items" se você quiser que, quando houver mais de uma postagem no dia em questão, que o assunto do e-mail seja diferente. Nesse caso, você pode usar no meio da frase do assunto o código ${n} que adiciona o número de postagens que foram publicadas. No meu caso, eu escrevi assim:

Hoje no DSA temos ${n} posts incríveis!

Em "Logo URL" você pode colocar o endereço de uma imagem para que ela fique à direita do header do e-mail. Você pode colocar o logo do seu blog, por exemplo. Mas lembre-se de que precisa ser uma imagem em jpg, png ou gif; e que tenha menos de 200x200px.
Se não sabe como hospedar imagens, clique neste link e confira os melhores sites de hospedagem de imagens.

Descendo mais a tela, há as opções de mudar as cores e fontes, edite-as de acordo com o seu gosto. Para mudar as cores, clique em "Choose from palette", como está assinalado na foto abaixo:


No fim da página há uma visualização de como ficará seu e-mail. Quando tudo estiver pronto, clique em "Save".
Aqui está um exemplo de como ficará o e-mail que seus seguidores receberão (esse foi o da minha postagem de ontem):


Configurando o idioma do gadget:

Por padrão, o Seguir por email abre uma janela poup-up de inscrição em inglês. Vamos aprender agora como mudar o idioma para o português?

Para sua segurança, salve um backup do seu template antes de fazer as modificações a seguir.

Para isso, entre no seu painel do Blogger e vá para a aba Modelo e clique no botão branco "HTML". Quando o código do seu template abrir, clique em qualquer parte do código e aperte "Ctrl + F" no seu teclado. Na caixinha que apareceu, cole o seguinte código:
<input name='loc' type='hidden' value='en_US'/>
E aperte a tecla "Enter" no seu teclado. O trecho que está em vermelho no código acima é o que coloca a poup-up em inglês, troque ele para pt_BR. O código ficará assim:
<input name='loc' type='hidden' value='pt_BR'/>
Depois é só clicar em "Salvar Alterações".

Você também pode mudar para português o texto da caixinha que diz “Email address…”. Para isto, basta continuar no seu HTML, clicar em qualquer parte do código e apertar "Ctrl + F" no seu teclado. Na caixinha que apereceu, cole o seguinte código:

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

O trecho que está em vermelho é o que modifica o que está escrito dentro da caixinha do gadget. Troque ele pela frase que você quiser. Eu usei a frase "Seu e-mail"; então o meu código ficou assim:

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

Por último, clique em "Salvar Alterações".

Mudando o idioma do e-mail de confirmação:

Sabe o e-mail que o seu seguidor recebe para confirmar a inscrição? Sabia que tem como personalizar esta mensagem para que ela fique em português e com o texto que você quiser?
Para fazer isso, é bem simples, apenas vá ao site http://feedburner.google.com. Lá abrirá uma tela parecida com a do print abaixo. Clique no nome do blog que você deseja personalizar:


Na janela que abriu, clique na aba "Publicize":


Na janela que abriu, clique em "Email Subscriptions", o link indicado na foto abaixo:


Clique agora no link "Communication Preferences", indicado na foto abaixo:



Abrirá a seguinte tela:


No campo "Email “From” Address" você pode colocar o seu e-mail, para que as atualizações do seu blog tenham o seu e-mail como emissor.
Em "Confirmation Email Subject" você deve colocar o assunto que terá seu e-mail de confirmação. Eu coloquei assim:

Ative o recebimento de atualizações do Doce Sonho Alado!

Em "Confirmation Email Body" é que você editará como será o corpo do e-mail de confirmação. É importante que no meio da sua mensagem você inclua o código ${confirmlink}, para que seja adicionado o link de confirmação. Um exemplo de mensagem básica seria a seguinte:

Olá, seguidor!

Ative o recebimento das atualizações do meu blog clicando no link abaixo:

${confirmlink}

Caso ele não funcione, copie e cole o endereço no seu navegador.

Atenciosamente,
Fulano de Tal.
Não coloque nada em HTML, senão vai dar errado. Se você quiser ver uma versão bem caprichada dessa mensagem, inscreva-se no Seguir por e-mail aqui do DSA. Você vai ver como eu fiz a minha mensagem (que é bem fofinha, aliás).
Depois de tudo pronto, clique em "Save".

Configurar a hora que as atualizações chegarão:

Para determinar a que horas os e-mails contendo as atualizações do seu cantinho chegarão para seus seguidores, basta continuar na aba "Publicize > Email Subscriptions" e clicar no link "Delivery Options", como indicado no print abaixo:


Na opção "Select Timezone" escolha "(GMT -3:30) Brasilia". Em "Schedule Email Delivery" escolha o horário de sua preferência. Note que há horários na parte da manhã (am) e na parte da tarde (pm). Por fim, clique em "Save".

Colocar links de compartilhamento nos e-mails:

Se você quiser, pode adicionar alguns links para que os seguidores compartilhem suas postagens direto do e-mail que receberem. Para isso, clique na aba "Optimize", como na foto abaixo:


Na tela que abriu, clique no link "FeedFlare", indicado na foto abaixo. Eu recomendo que você escolha as mesmas opções que eu selecionei na foto, pois são as mais importantes (clique na foto para ver quais foram):


Por último, clique em "Activate".

Configurar para que apenas uma parte da postagem chegue nos e-mails:

Por padrão, sempre são enviadas as postagens na íntegra para os seguidores. Isso não é muita vantagem para nós; pois pode ser que eles apenas leiam tudo no e-mail e não queiram visitar o blog, o que nos faz perder visitas e comentários.
Mas há uma forma de configurar os e-mails para que apenas parte da postagem chegue para os seus seguidores, o que os obrigará a ir ao seu blog para ler o resto do post.
Para ativar esta função, continue na aba "Optimize" e clique no último link da lista à esquerda, que é "Summary Burner". Abrirá a seguinte tela:



Em "Maximum length" coloque quantos caracteres terá em cada e-mail. Na minha opinião, o número 550 basta, mas você pode colocar o valor que quiser.
Em "Teaser", coloque uma mensagem para avisar ao seu seguidor de que o texto é apenas uma amostra da sua postagem do dia. Eu coloquei, por exemplo, o seguinte:

Este é apenas um resumo do que está rolando hoje. Passe no www.docesonhoalado.com para conferir a postagem completa!
Só não é permitido colocar nenhum HTML, escreva o texto sem nenhuma formatação, OK?
Por último, clique em "Activate".

Por hoje é só. Espero que tenham gostado do tutorial e que sigam o DSA por e-mail também!!!

Beijinhos Alados,

8 Comentários
Comentários

8 comentários:

  1. Olá, meu nome é Douglas.. possuo o blog: http://topsinglesworld.blogspot.com.br/. E coloquei o feedburner, porém algumas pessoas que possuem o e-mail do hotmail, não recebem o e-mail para confirmação do feed. Com você já aconteceu isso? Se sim, sabe alguma forma para resolver? Qualquer coisa, pode me enviar e-mail: topsinglesworld@gmail.com

    E obrigado por esse tutorial, realmente está excelente! Blog muito bom!

    ResponderExcluir
  2. Parabéns post mega perfeito!!!! Só consegui ativar o do meu blog graças a sua postagem, parabéns!!!

    ResponderExcluir
  3. Amiga, adorei o tutorial, porem o meu como eu entro na minha conta https://feedburner.google.com/ informa que nao tenho NENHUM assinante, sendo que eu mesmo ja cadastrei alguns emails, recebi a confirmação deles no email e cliquei no link, mas na minha conta não mostra nenhuma pessoa que se escreveu, o que pode ser? Pode me ajudar

    ResponderExcluir
  4. Várias imagens não estão aparecendo aqui. Mesmo assim, amei o post, Muito bem explicado. Só falta consertar as imagens e ficará perfeito!

    ResponderExcluir
  5. Horrível! não dá para copiar nada aparece as imagem de rede social que bosta!

    ResponderExcluir
  6. melhor post sobre o assunto. mt obrigada!

    ResponderExcluir

Related Posts Plugin for WordPress, Blogger...
Posts relacionados