Como personalizar o box de envio do feed no blog? - * Blog Elaine Gaspareto *

Como personalizar o box de envio do feed no blog?

em 24/06/2015


Há alguns dias eu publiquei a primeira parte deste tutorial, relembre aqui:
Tudo sobre feed- como configurar e como usar à favor do blog
Paramos na parte em que eu prometi mostrar como personalizar a caixinha Seguir por email e como configurar o feed para exibir apenas o resumo do post, com mensagem ao leitor.
Vamos cumprir a promessa e concluir?

Claro que, antes de mais nada, você precisa ter feito a primeira parte do tutorial:
Tudo sobre feed- como configurar e como usar à favor do blog.
Caso não tenha lido/feito, vá lá, eu te espero...
Tic-tac
                        Tic-tac
Tic-tac

Depois de tudo pronto e de ter  configurado o feed de seu blog corretamente e inserido a opção do leitor cadastrar o email para receber seus posts vamos personalizar essa caixinha de cadastro de email.

A caixinha original, sem personalização alguma, é assim:

Enter your email address:


Delivered by FeedBurner

Como personalizar o box Seguir por email?


Vamos aprender a personalizar?
Para começar, um modo simples, que é editando o próprio código.
Ele é assim:

<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=AQUI O NOME DE SEU FEED', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Enter your email address:</p><p><input type="text" style="width:140px" name="email"/></p><input type="hidden" value="AQUI O NOME DE SEU FEED" name="uri"/><input type="hidden" name="loc" value="en_US"/><input type="submit" value="Subscribe" /><p>Delivered by <a href="https://feedburner.google.com" target="_blank">FeedBurner</a></p></form>

Você pode:

  • Alterar a cor e o tipo da borda: 1px solid #ccc define que a borda é sólida, mede 1 pixel de largura e tem a cor cinza.
  • Trocar a borda tipo solid por dashed (tracejado), dotted (pontilhado), double (duplo). Troque a espessura 1px por uma maior. Troque a cor #ccc por outra.Aqui tem uma tabela de cores.
  • Trocar a frase Enter your email address por outra de sua preferência.
  • Trocar a palavra Subscribe por outra de sua preferência, tipo Assinar agora, Cadastrar email, etc.

Seja criativo!
Caso queira retirar o link do Feedburner basta apagar o trecho final que começa com <p> e termina com </p>
Olha como já muda:

Digite seu endereço de email:


Além de personalizar o próprio código gerado pelo Feedburner vou deixar 3 códigos prontos que você pode usar.
São modelinhos mais estilosos e personalizados.
Para usar em seu blog escolha o modelo que preferir, copie o código dele e insira em seu blog, sempre da mesma forma, assim:

Depois do feed criado copie o endereço dele. É essencial para que funcione.
A seguir vá ao painel administrativo de seu blog e clique em Design.
Escolha Adicionar um gadget e selecione a opção HTML/JAVASCRIPT.
Dentro da caixa que abrir cole o código do modelo escolhido.
Altere os campos marcados para que a aparência combine com seu blog.
Em geral podem ser alterados cor do botão, fontes, largura, etc. Leia o código para entender.

Essas alterações são opcionais, mas o campo SEU FEED ID é indispensável que seja alterado. Coloque o nome de seu feed, ok?
Depois de pronto, salve, arraste para onde quer que fique e salve as alterações do layout.


Veja os modelos, escolha o seu!


Modelo 1
Usei por um tempo em meu blog, editado com base no nativo do Blogger.

Copiar o código deste modelo


Modelo 2
Este modelo foi desenvolvido para Wordpress, mas dá certo no Blogger. 
Tem links para as redes sociais.
Créditos deste widget: http://mashable.com/

Copiar o código deste modelo



Modelo 3
Créditos deste widget: http://ndorokakung.com/
Adicionei o contador do Twitter e o ícone do G+.

Copiar o código deste modelo



Configurando o feed para entregar apenas o resumo do post


Quem recebe meus posts por email ou via algum agregador de feed já reparou que não chega o texto inteiro, mas apenas o título e a primeira frase, seguida de uma mensagem que pede para clicar no título do post para lê-lo inteiro.

Não é o ideal mas como eu vinha sofrendo muitos casos de cópias, com posts inteiros copiados e postados em dezenas de blogs tomei essa medida para reduzir um pouco os casos de plágio.
Repito: não é o ideal, legal mesmo é o post inteiro chegar por email para o leitor, e lamento muito ter sido forçada a tomar essa atitude.

Para quem me perguntou como fazer, é simples.
Para começar vá ao Feedburner, faça login e acesse a área administrativa de seu feed.
Clique na aba Optimizar. No menu lateral esquerdo localize o item Summary Burner.
Ao clicar vai aparecer uma caixinha.
Digite nela a mensagem que quiser, usando até 200 caracteres, clique em Ativar.
Confira a frase, veja se não contém erros de grafia, e clique em Salvar.
Tá feito.
Caso um dia não queira mais enviar só o resumo basta desativar essa opção.


Gostou do tutorial?
Clique em Compartilhar, ou recomende no Google+.
Assim o post alcança mais pessoas, ajuda mais gente e faz o blog crescer.
E eu fico feliz e agradecida...
18 comentários via Blogger
comentários via Facebook

18 comentários:

  1. Adoro suas dicas para o blogger Elaine! Beijos

    ResponderExcluir
  2. Segui direitinho desde o primeiro passo no outro post e ficou perfeito, muito obrigada por compartilhar...
    Dicas, Truques e Segredinhos!

    ResponderExcluir
  3. Amei a sua dica estava a procura, mas nenhum deu certo, coloquei meu link feedburner tirei lá que eu tenho no blog tentei todos é dá que não tem esse endereço. poderia me ajuda o que tem de errado? fico aguarda abraço.

    ResponderExcluir
    Respostas
    1. Helen, no campo ID do seu feed, você tem que colocar o nome do seu feed que fica depois da barra. Por exemplo, o link com o endereço completo do meu feed é http://feeds.feedburner.com/BlogQueroIr
      Então o ID do meu feed é BlogQueroIr

      Excluir
  4. Valeu Elaine, salvou minha vida! :D
    Eu tinha pedido esse tutorial há tempos e ele apareceu, fiquei muito feliz, muito obrigada por sempre nos ajudar!

    ResponderExcluir
  5. Ola Elaine admiro muito seu trabalho,fiz e deu certinho,voçe pode me tirar uma duvida quando mexo nas configuraçoes no feed preciso copiar o codigo novamente e colar no meu site ou ja e salva as alteraçoes automaticamente

    ResponderExcluir
    Respostas
    1. Evaneyde, não precisa.
      Ele atualiza sozinho.
      bjsss

      Excluir
  6. Eu coloquei no meu blog. Muito obrigada, eu amo as suas postagens! Beijos

    www.mundoyoung.com.br

    ResponderExcluir
  7. Olá, Elaine.
    Configurei o feed de meus blogs em 2010 e nunca tive problemas.
    Mas a cerca de 1 semana, quem tenta fazer a assinatura recebe a mensagem "The feed does not have subscriptions by email enabled".
    Já acessei a conta no feedburner, conferi os dados (estão corretos) e o serviço consta como ativo. E na aba configurações do blog tudo também está OK.
    Como corrigir este problema?
    Grata, Gisele.

    ResponderExcluir
    Respostas
    1. Gisele, de uns tempos pra cá o Feedburner está instável.
      O serviço parou de receber atualizações depois que foi adquirido pela Google e a tendência é que, cedo ou tarde, pare de funcionar.
      Infelizmente não há o que fazer...

      Excluir
    2. Obrigada, Elaine, por me responder.
      É lamentável esta situação porque, para os nossos leitores, é o nosso nome que está em jogo. Temos um trabalho dobrado para manter a credibilidade junto aos leitores.
      Felizmente já resolvi este problema, fuçando muito. Infelizmente não vou ter resposta de como pode ter acontecido o que me aconteceu.
      Só espero que o Google nos avise sobre o cancelamento do FeedBurner, como fez com o Picasa, e nos dê uma alternativa.
      Muito obrigada por sua gentileza.
      Abraços

      Excluir
  8. Olá, tudo bem? Em primeiro lugar, seu espaço é maravilhoso!

    Estou com uma dificuldade para configurar o segundo modelo. O botão "Cadastrar agora" está mais abaixo da caixa, e os textos não ficam em um tamanho adequado. Peço sua ajuda. Desde já, grato!

    ResponderExcluir
    Respostas
    1. O texto, em geral, vai seguir a definição do seu template.
      O posicionamento do botão depende da largura de sua sidebar; se ela for menor que o box o botão ficará deslocado.
      Nesse caso precisará editar o código, alterar a largura, etc...
      Precisa um pouco de conhecimento em CSS mas dá pra fazer , o código mesmo dirá o que fazer, leia com atenção e vai conseguir.
      Muito obrigada pelo elogio!!!! :)

      Excluir
  9. Obrigadíssima por seu blog! Foi muito bom ter as dicas de como montar meu blog. Tive outros blogs não importantes para mim, a anos atraz, porque não tinham conteúdo e quem os montou, foi uma pessoa que admiro muito, mas na época, eu não me interessei.
    Hoje com uma filha de 7 anos, me pedindo uma história por noite, diferente das já costumeiras, acabei escrevendo um livro entre outras histórinhas pequenas e só posso publicar em um blog... mais rápido, mais prático, mais barato... só não mais seguro. Então, eu mesma estou montando. e preciso de ajuda para o tornar um blog forte, sadio, e que não seja contaminado por rackers, pois é para crianças. As dicas que eu precisava, para iniciar, encontrei aqui.
    Meu muito obrigada.
    www.textosinfantisparatodasidades.blogspot.com.br

    ResponderExcluir
  10. Thanks very much for your tips. After reading your article I would to try it.
    Regards, http://kelinci-ras.blogspot.com

    ResponderExcluir
  11. Ola Eliane adorei esse post. Vc sabe me dizer como botar uma imagem de fundo (background)?
    Obrigada

    ResponderExcluir
    Respostas
    1. Pra colocar uma imagem de fundo, nos modelos mais simples, basta acrescentar, logo antes do fechamento da div (assim que termina o comando de alinhamento do texto, na primeira linha) o comando:
      background: url(aqui você coloca o endereço da imagem que deseja usar) center no-repeat;
      Se quiser que a imagem se repita troque no-repeat por repeat.
      bjssss

      Excluir
  12. Super funcionou direitinho!
    Elaine sem o seu Blog o meu não seria possível.
    Está ficando lindo!
    Há coisas que realmente não consigo fazer, em breve te procurarei!

    ResponderExcluir

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…



Visualizações

Contando...

Dias online
Postagens
comentários