Caixa (ou box) personalizada para assinar o feed do blog - * Blog Elaine Gaspareto *

Caixa (ou box) personalizada para assinar o feed do blog

em 25/09/2017


Você tem (ou deseja ter) em seu blog a caixinha, ou box, que permite assinar o feed do blog e que dá ao leitor a oportunidade de receber seus posts por email tão logo eles sejam publicados?
Então esse tutorial é pra ti, querido leitor!

Antes de mais nada é preciso ativar o feed de seu blog através do Feedburner, caso ainda não tenha o recurso em seu blog.
Se você já tiver pode pular essa etapa, ok?


Ativar o feed do blog via Feedburner


Vou mostrar o modo mais simples, ok?
Faça assim: clique em Layout, no painel de seu blog.
A seguir clique em Adicionar um gadget e dentre as opções que aparecerem escolha Follow by email.
Vai abrir uma janela assim (claro que com as informações de seu blog):

O endereço que aparece após http://feeds.feedburner.com/ é o endereço do feed de seu blog. No caso do meu exemplo é BlogDeTestesDaElaine. Isso é importante, inclusive respeite as letras maiúsculas se houver, ok?

Deixe essa janela aberta e clique em Visualizar estatísticas e mais informações.
Vai abrir então a página no Feedburner, que é um serviço Google para gerar o feed dos blogs.
Na página inicial terá o endereço do feed que você acabou de criar.
Clique nele.
Vai abrir outra página, clique em Publicar (ou Publicize, se estiver em inglês).
Quando abrir a aba clique então em Emails Subscriptions, que estará na lateral esquerda da página.
Na próxima página que abrir clique em Ativar (ou Activate se estiver em inglês). Feito isso clique em Salvar.
O código que aparece é o código da caixa padrão do Feedburner. Se quiser usa-la copie o código e cole em seu blog como gadget HTML/JAVASCRIPT.
Ela ficará assim:



Eu já mostrei aqui no blog algumas opções de personalização dessa caixa.
Recorde:
Como personalizar o box de envio do feed do blog?

Vou te mostrar hoje mais uma forma de personalizar essa caixa. Bem legal, com ícones de suas redes sociais, bem moderna e lindinha.
Assim:

Demonstração do tutorial


Importante: caso opte por usar o código que vou disponibilizar abaixo não precisa inserir essa padrão, ok? Guarde apenas o ID de seu feed.


Como personalizar a caixa de envio do feed?


Para colocar em seu blog é bem simples: acesse a página com os códigos necessários a execução do tutorial:


Copiar o código


A seguir copie o código de personalização e vá ao painel de seu blog.
Clique em Layout e a seguir clique em Adicionar um gagdet.
Escolha a opção HTML/JAVASCRIPT  e dentro da caixinha que expandir cole o código copiado anteriormente.

Você verá, no código, que deixei marcados alguns campos em CAPSLOCK.
Esses campos precisam ser editados, indispensavelmente.

São os campos onde você coloca o endereço de seu feed (lembra que pedi pra manter a janela do feed aberta?
Copie o final do endereço, (que no meu exemplo é BlogDeTestesDaElaine) e cole no campo ID DO FEED. Aparece 2 vezes no código, substitua em ambas, ok?

Também deixei marcado ENDEREÇO HTTP DE SEU LOGO. Substitua pelo endereço http do logo de seu blog.
Caso não tenha logo basta apagar o trecho todo, de  <img border até width="100" />

As cores e fontes são personalizáveis. 
A fonte que coloquei é Open Sans, mas você pode trocar pela que desejar.
As cores são sempre trocadas mudando o código hexadecimal de cada item. Sempre que aparecer no código um sinal # seguido do código hexadecimal significa que é o código da cor daquele item. Para trocar a cor troque o código dela.
Aqui tem uma tabela de cores e seus códigos hexadecimais.

Também deixei marcado no código o local onde inserir os links de suas redes sociais.
Caso queira apagar alguma rede social basta apagar a linha que corresponde a ela.
Por exemplo, vamos supor que eu quira apagar o link para o Twitter. Eu apago isso:
<li><a href="LINK TWITTER" target="_blank"><i class="fa fa-twitter"></i></a></li>
E assim sucessivamente, para cada rede social que queira deletar.


E é só isso!
Bem simples, o maior trabalho é copiar e colar os links, né?
Se tiver qualquer pergunta deixe aí nos comentários e eu respondo :)

E aproveitando que tamo papeando, quer assinar o feed do blog e conhecer nossas redes sociais?



Subcribe
Assine o feed do blog!
Fique tranquilo, nunca compartilharei sua informação com ninguém!

10 comentários via Blogger
comentários via Facebook

10 comentários:

  1. Eu amei, mas aqui no celular ficou muito largo. É possível tornar responsivo?
    Bjk!

    ResponderExcluir
    Respostas
    1. Meri, não testei mas em tese, se trocar os valores fixos em px por valores fluidos em .em ou porcentagem ele pode assumir a largura da área onde for colocado.
      Experimente trocar width: 230px por width: 100%, ele vai assumir a largura da área, e aí é só reduzir de acordo com a tela...

      Excluir
    2. Oxi... É meeeeessmo!
      Vou ver isso aí.
      Ah! Aquele código pra paginação não deu no meu blog, mas acho que é por que ele já tem vários scripts e algum deles deve interferir. Paciência. Obrigada mesmo assim, sempre!
      Bjk...

      Excluir
  2. Oi, eu adorei, mas no meu blog o texto Assine o feed do blog!fica grudado na caixa branca... Não sei como arrumar isso...

    Adoro seu blog e seus tutoriais, estão me ajudando muito.

    ResponderExcluir
    Respostas
    1. Marina, qual o seu blog? Pode ser algum conflito, seu template é responsivo?

      Excluir
    2. Oi, sim é responsivo...
      Meu blog é este: https://menosgluten.blogspot.com.br/
      Ainda estou configurando, mas estou tendo alguns problemas, ontem sumiu as postagens recentes que veio com o template...

      Excluir
    3. Marina, sabe qual o problema? Vc esqueceu de inserir a url de seu logo ou foto de perfil. Quando fizer isso ela vai ocupar o espaço e rudo vai encaixar. Experimenta e me diz 😊bjsssss

      Excluir
    4. Marina, tem que colocar o logo, senão o espaço não dá certo. Copie de novo o código e coloque uma imagem que apareça...

      Excluir
  3. Elaine o que eu faço com o gagdeg de email que abriu? Se eu deixar vai ficar as duas opçoes de feed e eu só quero a personalizada, mas quando eu apago o gadget de feed original não da pra assinar pelo personalizado. Diz que não está ativado mas tá sim tanto é que pelo gadget de email normal ele mostra direitinho para assinar. ME AJUDA POR FAVOR

    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…



No Instagram