Dominio: mundoblogger.com.br
Chave: 6750f38d68212cb9ffc85aee2a0ef61d0ebf4f04
Hora do cache: 1487184857
Vida do cache: 1488480853
Status: 1
Mensagem: Licença válida
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Hospedagem - 728 x 90

Gerenciamento Widget

Personalizar Gadget Seguir por Email

Ontem eu publiquei um tutorial ensinando a instalar o novo gadget “Seguir por email”, padrão do Blogger.
Hoje veremos como personalizar este gadget, aplicando alguns estilos CSS a ele.

Sem muito blábláblá, vamos ao que interessa.
Segue abaixo algumas opções de personalização que eu encontrei, escolha a que preferir e personalize, editando as cores de acordo com o seu gosto.

1. Personalizar o container geral do gadget:

Entre no modo >> Editar HTML” e procure pela tag ]]></b:skin>
e cole ANTES dela:

 /* gadget seguir por email*/ 
#FollowByEmail1{ 
border:1px solid #000;   /*-- edite borda--*/
padding:10px; 
background:#fff;  /*-- edite cor de fundo--*/
 } 

2. Personalizar a caixa onde o leitor deve digitar o email:

Marque a caixinha “expandir modelos de widget” e procure por:

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

E substitua por:

 
<input class='follow-by-email-address' name='email' value='Digite seu email...' type='text'/> 

Caso queira personalizar a cor do texto, vá até “modelo >> Editar HTML” e procure pela tag ]]></b:skin>
e cole ANTES dela:

 
/*caixa onde digita o email*/ 
.follow-by-email-address{ color:#818181;   /*-- edite cor do texto--*/
 } 

3. Personalizar o botão de envio:

Marque a caixinha “expandir modelos de widget” e procure por:

 
<input class='follow-by-email-submit' type='submit' value='Submit'/> 

E substitua por:

 
<input class='follow-by-email-submit' style='color:#333;
background:#ccc;
border:1px solid #000;' name='button' type='submit' value='Enviar'/> 

O trecho destacados na cor azul corresponde a cor do texto do botão.
O trecho destacado na cor vermelha, correspnde a cor de fundo do botão.
O trecho destacado na cor verde, corresponde a borda.
Edite as cores como preferir.

4. Personalizar o idioma do requerimento de cadastro para o português:

Marque a caixinha “expandir modelos de widget” e procure por:

 
<input name='loc' type='hidden' value='en_US'/> 

E substitua por:

 
<input name='loc' type='hidden' value='pt_BR'/> 

Veja como ficou minha personalização na imagem demonstrativa abaixo:

Bom, essas foram as opções de personalização que eu encontrei, caso alguém conheça outras formas, por favor, compartilhe conosco.



De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

62 Comentários

  1. Carla Schons disse:

    Oi Vanessa,
    Como eu faço para colocar o botão Enviar embaixo da caixa de email?
    Obrigada!

  2. claudia disse:

    ola, tudo bem? tenho uma duvida, mveja se pode me ajudar… eu coloquei esse gadget de seguir por email no meu blog , mas me arrependi e quero retirar. ja retirei o gadget no layout, mas os enails com as atualizacoes continuam chegando… tem como fazer isso acbaar? agradeco muito! se possivel, me responda por enail! obrigada :)

  3. Cheburguer - Hamburgueria disse:

    Admiro muito o teu trabalho viu Clau..parabéns!

  4. Jaciara Amorim disse:

    Amei a Dica, Obrigada!

  5. Liege Karina disse:

    Adorei. Só mudei o idioma!
    Obrigada , beijo ;*

  6. @CelioSReis disse:

    Gostei e já estou usando os estilos no meu feed. Deu super certo. Parabéns pelo tutorial! =)

  7. Arrison disse:

    n deu certo, eu procurei lá mas n acho nada.

  8. .:: Clau ::. disse:

    Fraan
    Alguns recursos podem sim variar de template para template, mas qdo vc for editar algo no seu, não precisa necessariamente trocar o modelo não…o importante é sempre fazer um backup do modelo que vc usa, antes de fazer quaisquer alterações. Sobre a navbar, eu uso menu, e não navbar. No marcador "Menu" existem vários tutoriais com modelos de menus, faça uma busca nos artigos, pode ser que vc encontre um do seu gosto.

  9. Fraan Simas disse:

    Clau, estou tendo vários problemas…
    Muitas dos códigos que vc fala pra procurar, quando tem que colcar algo antes ou depois, ou substituir e tals, não existem no meu bog :(
    Eu estou utilizando o novo modelo, sabe me dizer se o problema é por causa disso, e quando eu quiser fazer alguma edição tenho que voltar no blog antigo?

    E como já havia dito em outro comentário, há como personalizar a NAVBAR? Assim como no seu blog, e em muitos outros, no lugar da Navbar há esta barra, com várias opções…

    Beijos, aguardo sua resposta!

  10. Wallace Silva disse:

    valeu pela grande ajuda

  11. agnaldo disse:

    Perfect, agora só falta o sistema de comentarios do blogger mudar

  12. Rinaldo Camurugy disse:

    Poxa, ótima dica. Estava procurando algo assim para alterar a cor do botão no meu blog, pois o template dele tem o botão da caixa de pesquisa preto com texto branco.

    Valeu também Euzebio Alves, com o seu complemento o post ficou perfeito.

  13. Notlad7 disse:

    Oi Clau, primeiramente gostaria de dizer que seu blog eh muito bom, ja aprendi muito com ele, desde o tempo do Mundo Darkness! E agradecer tambem por esta dica que foi muito boa!

    Gostaria de saber como faz para mudar o tamanho da caixa branca onde o leitor ira escrever seu email, e tambem como faz para colocar ela mais para a esquerda ou para a direita, para que fique centralizada na sidebar! Gostaria tambem de mudar a cor interna da caixa para outra cor ao inves de branco, alguem pode me ajudar?

    Obrigado!

  14. Marcos França disse:

    Parabéns pelo blog!!!

  15. Henrique disse:

    Eu até coloquei uma mensagem antes da caixa de texto, pois no HTML, eu coloquei a mensagem logo após a tag < div class='follow-by-email-inner'>, e não tive problemas após fazer isso!

  16. Adriano Freitas disse:

    Oun, vlw Clau, perfeito. Belo site. Até mais!

  17. Kassio Romulo disse:

    Olá clau, como sempre seu blog de parabéns me ajuda bastante há anos e me ajudou a ganhar experiência no mundo do blogger.

  18. .:: Clau ::. disse:

    Natália
    O Euzébio postou uma dica logo acima, dá uma lida e vê se te ajuda.

    Euzébio
    Valeu pela ajuda…valeu mesmo…obrigadona viu? Volte sempre heim…:)

  19. (sumello) disse:

    Clau Obrigada mais eu ja consegui beijossss

  20. Natália disse:

    Clau… O botão enviar está embaixo e é assim que gosto, porém gpstaria que ficasse coladinho com a caixinha. Como faço isso?

  21. Proª Thays disse:

    Olá,
    Primeiro, paranéns pelo Blog… Muito claro e didático!

    Estou tendo dificuldades nessa função autolimpante que o Euzébio comentou.
    Aparece o seguinte erro:
    Mensagem de erro em XML: Element type "input" must be followed by either attribute specifications, ">" or "/>".

    Quando coloco o código que a Clau postou dá certo… Quando substituo pelo que foi fornecido por Euzébio, aí é que aparece o erro.

    Alguém faz ideia de onde está o erro?!

    Desde já agradeço,
    Thays.

  22. (sumello) disse:

    Ola Clau amo seu blog viu , bom primeiramente quero falar que gostei muito desse tutorial de prsonalizar , mas eu estou com um problemão em um blog de uma amiga quando vou colocar para assinar o blog Aparece uma mensagem: Por algum motivo, não conseguimos encontrar ou criar um feed do FeedBurner para o seu blog. Tente novamente mais tarde. ja tentei varias vezes eu não consigo o que seria isso pode me ajuda? e la no site do FeedBurner não tem como adicionar o feed do blog pois da erro

  23. HeyLiah disse:

    Clau, ensina como responder comentários que nem aqui, pra aparecer a resposta em baixo do comentário?
    Obrigada desde já! ^^

  24. Carolina Messias disse:

    Olá, gostei muito do blog, e principalmente desse post que me ajudou muito. Já coloquei no meu blog, não ficou bonitinho, mas consegui colocar. Concerteza voltarei outras vezes. Obrigada. Bjus

  25. Roberta disse:

    Olá. Seu site é muito legal!!!
    Gostaria de saber se há como colocar links de postagens mais antigas em templates do modelo clássico?
    bjus

  26. .:: Lu .::. disse:

    Olá Clau,

    Estou passando aqui para dizer que o teu blog é ótimo, você está de parábens!
    Estou reformulando o meu blog e as tuas dicas estão me ajudando bastante. No momento ele está fora do ar (devido as modificações que estou fazendo), vou colocar uma página de aviso nele, do tipo "site em manutenção".
    Acredito que logo ele voltará ao ar: http://www.vaidadesevariedades.com

    Bjs,
    Lu.

  27. Vivi disse:

    Estou frustrada porque nunca consigo colocar o item seguir no face book, Twitter, etc., mo meu Blog! Sigo as instruções, mas não funciona…

  28. Arierom disse:

    Clau,

    aproveitando o espaço para agradecer ao Euzebio valeu! Está tudo certo agora! =)

    []'s geraes no6!

  29. Márcio Perrone disse:

    Ola, primeiramente parabéns pelo blog, seus tutoriais foram de grande ajuda, contudo tenho duas duvidas que gostaria que me ajudasse, a primeira foi que fiz a caixa de seguir por e-mail no meu blog mas ela deu um pequeno erro no layout a segunda que o layout do meu blog esta aparecendo 2 menus um na barra superior e um com erro na barra lateral do blog, que não estou conseguindo remover. O endereço do meu blog é tstgbi.blogspot.com se possível passa la e da uma olhada gostaria muito que pudesse me ajudar.
    Grande abraço.

    Marcio Perrone

  30. Kid Bentinho disse:

    Tenho aprendido muito sobre a plataforma blogger através desse blog.
    Tudo o que eu tenho a dizer é: muito obrigado!

  31. Euzebio Alves disse:

    Olá Clau…

    Eu vi pelos comentários que algumas pessoas gostaram da minha dica. Fico feliz em poder ajudar!

    Eu vi também o comentário do Arierom dizendo que o botão de envio mudou de lugar… Esse problema pode ser facilmente resolvido trocando todos os códigos do campo de envio por este código:

    <table width='100%'>
    <tr>
    <td width='75%'>
    <input class='follow-by-email-address' name='email' placeholder='Digite Seu Email…' type='text'/>
    </td>
    <td width='64px'>
    <input class='follow-by-email-submit' type='submit' value='Enviar'/>
    </td>
    </tr>
    </table>

    Ou seja você coloca o código acima ao invés de colocar estes:

    <input class='follow-by-email-address' name='email' value='Digite seu email…' type='text'/>

    <input class='follow-by-email-submit' style='color:#333;background:#ccc;border:1px solid #000;' name='button' type='submit' value='Enviar'/>

    E aproveito também para responder a dúvida de hightechnews.com.br. Para colocar uma imagem ao lado do formulário, basta utilizar este código ou adicionar a parte referente à imagem no código que você já utiliza…

    <table width='100%'>
    <tr>
    <td width='10%'>
    <img width='20px' src='http://www.vwantigo.net/shop/images/icons/rss_icon.jpg'/&gt;
    </td>
    <td width='55%'>
    <input class='follow-by-email-address' name='email' placeholder='Digite Seu Email…' type='text'/>
    </td>
    <td width='64px'>
    <input class='follow-by-email-submit' type='submit' value='Enviar'/>
    </td>
    </tr>
    </table>

    Acredito que por enquanto seja isso.
    Qualquer outra novidade que eu consegui volto aqui e compartilho com vocês!
    Abraços a todos!

    Valeu!

  32. ~Ana Paula~A Católica disse:

    Clau e Internautas do Mundo Blogger,
    Saudações de Belo Horizonte!!

    Obrigada por este Post maravilhoso! Acabei de implementar a opção 2 "Digite o seu e-mail…" e segui também a DICA PRECIOSA do internauta Euzebio Alves (Deus lhe Pague!).

    Quanto à opção 4, transformar "Submit" em "Enviar", NÃO deu certo de jeito nenhum no meu Blog, A CATÓLICA… Por que será?

    Um abraço e Saúde e Paz a Todos!!

    ~~~

  33. Arierom disse:

    OPS!

    O botão "Assinar" mudou de posição, era ao lado da caixinha, agora aparece abaixo da mesma… O_o

    Tem como "ajeitar"?

  34. Franklin disse:

    Mais uma vez, obrigado clau!

  35. hightechnews.com.br disse:

    Oi Clau,
    como faço para inserir uma imagem ao lado da caixinha?
    Obrigado.

  36. Andson disse:

    nota 1000 e bem na hora que eu estava presizando. obrigado

  37. James Blunt's Fan disse:

    Oi Clau.. Nossa vou confessar que eu sou meio amador quando o assunto é blog.. rsrs mas eu fiz um e a maioria xdas coisas que tem la eu vi explicando aqui… Quero agradecer mesmo.. eu queria que vc desse um pulinho aqui no meu blog pra ver como ficou, pode ser? valeo mesmo! vc é d+

  38. Otics Padre Miguel disse:

    Oii Cláu!

    Esse post me ajudou muito… e já implantei a dica do Euzebio, que realmente funcionou!
    Muito obrigado!

    Beijão!

  39. Arierom disse:

    Clau,

    rolou muito bem! Até a dica do Euzebio! Só não consegui mudar a cor da borda e a cor texto da caixinha :(
    A cor do botão de envio deu certo. Muito bom!!

    Abraços!

  40. Tonný disse:

    OI Clau, tenho uma duvida sobre um template do seu blog, sempre quando faço o upload dele, o blogger diz que esta vazio, como posso sava-lo? obrigado.

  41. Jô Angel disse:

    Adorei,Clau!

  42. Jô Angel disse:

    Adorei!! Beijo!

  43. l?is ??stavs disse:

    Ja estou utilizando o widget ! , função auto limpante é quando ja tem um texo na caixa , vc clica e ele some para qe você coloque seu texto , é +/- isso :)
    fiz umas modificações no codigo !! veja ? wonder-help.com !!

  44. fazerblogger.com disse:

    Gostei muito Clau, tinha colocado em meu blog, mas não gostei pois estava todo em ingles, mais com sua dica eu vou colocar e fazer as pessonalizações de acordo com meu templates

  45. Douglas C. R. Paes disse:

    Euzebio Alves, fiz a alteração que você comentou… agora sim ficou legal

    mundodadanca1, a alteração que o Euzebio Alves comentou faz com que o texto "Digite seu email…" desapareça quando o visitante clica no campo para digitar o email

  46. rafaellara disse:

    Estou tentando adicionar uma imagem de fundo somente no Gadget. Se der tudo certo, comento aqui ensinando.

    Tutorial Muito Bom. Parabéns Clau.

  47. mundodadanca1 disse:

    Olá Clau!

    Já faz um tempinho que não comento aqui no Mundo Blogger.
    Hoje só tenho a dizer que adorei a iniciativa e já implantei todas as modificações que citou na postagem.

    Excelentes dicas, mas só tenho uma pergunta. O que é função auto limpante que é citado pelo Euzebio Alves.

    Abraço.
    Roger Dance

  48. fabioroncato.com disse:

    Ótima dica ;D
    Ja fiz no meu.

  49. Pedro Antunes disse:

    Sua dicza foi de grande ajuda vlw
    Entre no blog http://www.hatesosweet.blgspot.com e veja se curte.
    E seja nosso seguidor.

  50. .:: Clau ::. disse:

    Cláudia Charão,Douglas C. R. Paes,Márlon,João,Marcelo,Clodoaldo,obomdoacupe.com,Thammy
    Que bom que vcs gostaram. Obrigada pelos comentários 😉

  51. .:: Clau ::. disse:

    Euzebio
    Valeu pela dica, depois eu vou testar. Valeu mesmo 😉

  52. .:: Clau ::. disse:

    livroslegaisdeler
    Vc realmente LEU este tutorial? Pelo menos o titulo?

  53. ? .*?. thammy .*?. ? disse:

    Adoreiii.. ótima dica
    bjss

  54. obomdoacupe.com disse:

    Ficou massa.
    Valew pela dica, eu traduzir o meu..

  55. Clodoaldo de Oliveira Lemes disse:

    Muito boa dica, parabéns.

  56. livroslegaisdeler disse:

    Muito legal! Adorei, estava mesmo precisando disso, mas eu gostaria de personalizar, você sabe como?

  57. Marcelo Souza disse:

    Super legal as novidades que o blogger vem apresentando. Só falta agora o sistema de comentários, que tanto reclamamos.
    Abração Clau e tenha um excelente fim de semana!

  58. João Neto disse:

    Que legal, eu estav procurando como fazer isso!

  59. Euzebio Alves disse:

    Excelente dica, mas nos dias atuais seria interessante disponibilizar uma caixa com a famosa dica auto-limpante.
    Eu mexi uns pausinhos aqui e consegui fazer funcionar, basta, ao invéz de colocar este código:
    "<input class='follow-by-email-address' name='email' value='Digite seu email…' type='text'/>"

    Colocar Este:

    "         
    <input
    onfocus="if(this.value==this.defaultValue)this.value=&quot;&quot;;"
    value="Digite Seu Email…" type="text" class='follow-by-email-address'
    onblur="if(this.value==&quot;&quot;)this.value=this.defaultValue;"
    name="email"/>
    "

    Espero ter ajudado!
    Abraços!

  60. Márlon Silva disse:

    Acho até mais compensador do que assinar feeds, que é uma coisa que poucos se dão o trabalho de conferir. E vc tão rápida quanto a Google, já personalizou o gadget.

    Valeu Clau!

  61. Douglas C. R. Paes disse:

    Excelente dica

    Eu havia instalado esse gadget, mas confesso que fiquei meio incomodado com a forma que ele apareceu

    Vou dar uma fuçada melhor depois, mas acho que agora já ficou bem melhor..

    Valeu

  62. Cláudia Charão disse:

    Adorei Clau, achei esse mais bonito que o do Feed.

    Bom fim de semana!!

Desculpe, os comentários deste artigo estão desativados.

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.