Gerenciamento Widget Vanessa S.
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.
Oi Vanessa,
Como eu faço para colocar o botão Enviar embaixo da caixa de email?
Obrigada!
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 🙂
Admiro muito o teu trabalho viu Clau..parabéns!
Amei a Dica, Obrigada!
Adorei. Só mudei o idioma!
Obrigada , beijo ;*
Gostei e já estou usando os estilos no meu feed. Deu super certo. Parabéns pelo tutorial! =)
n deu certo, eu procurei lá mas n acho nada.
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.
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!
valeu pela grande ajuda
Perfect, agora só falta o sistema de comentarios do blogger mudar
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.
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!
Parabéns pelo blog!!!
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!
Oun, vlw Clau, perfeito. Belo site. Até mais!
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.
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…:)
Clau Obrigada mais eu ja consegui beijossss
Clau… O botão enviar está embaixo e é assim que gosto, porém gpstaria que ficasse coladinho com a caixinha. Como faço isso?
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.
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
Clau, ensina como responder comentários que nem aqui, pra aparecer a resposta em baixo do comentário?
Obrigada desde já! ^^
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
Olá. Seu site é muito legal!!!
Gostaria de saber se há como colocar links de postagens mais antigas em templates do modelo clássico?
bjus
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.
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…
Clau,
aproveitando o espaço para agradecer ao Euzebio valeu! Está tudo certo agora! =)
[]'s geraes no6!
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
Tenho aprendido muito sobre a plataforma blogger através desse blog.
Tudo o que eu tenho a dizer é: muito obrigado!
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'/>
</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!
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!!
~~~
OPS!
O botão "Assinar" mudou de posição, era ao lado da caixinha, agora aparece abaixo da mesma… O_o
Tem como "ajeitar"?
Mais uma vez, obrigado clau!
Oi Clau,
como faço para inserir uma imagem ao lado da caixinha?
Obrigado.
nota 1000 e bem na hora que eu estava presizando. obrigado
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+
Oii Cláu!
Esse post me ajudou muito… e já implantei a dica do Euzebio, que realmente funcionou!
Muito obrigado!
Beijão!
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!
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.
Adorei,Clau!
Adorei!! Beijo!
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 !!
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
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
Estou tentando adicionar uma imagem de fundo somente no Gadget. Se der tudo certo, comento aqui ensinando.
Tutorial Muito Bom. Parabéns Clau.
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
Ótima dica ;D
Ja fiz no meu.
Sua dicza foi de grande ajuda vlw
Entre no blog http://www.hatesosweet.blgspot.com e veja se curte.
E seja nosso seguidor.
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 😉
Euzebio
Valeu pela dica, depois eu vou testar. Valeu mesmo 😉
livroslegaisdeler
Vc realmente LEU este tutorial? Pelo menos o titulo?
Adoreiii.. ótima dica
bjss
Ficou massa.
Valew pela dica, eu traduzir o meu..
Muito boa dica, parabéns.
Muito legal! Adorei, estava mesmo precisando disso, mas eu gostaria de personalizar, você sabe como?
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!
Que legal, eu estav procurando como fazer isso!
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="";"
value="Digite Seu Email…" type="text" class='follow-by-email-address'
onblur="if(this.value=="")this.value=this.defaultValue;"
name="email"/>"
Espero ter ajudado!
Abraços!
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!
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
Adorei Clau, achei esse mais bonito que o do Feed.
Bom fim de semana!!