Blogger: Newsletter personalizada (6 modelos) | Follow your dreams
Blogosfera

Blogger: Newsletter personalizada (6 modelos)

Oi pessoal, como estão?

Vocês pediram lá no grupo do blog, então pesquisei e cá estou eu com o tutorial de newsletter personalizada para o Blogger. Fiz 6 modelinhos pra vocês, não coloquei mais para o post não ficar muito longo (o código é grandinho), mas se vocês gostarem e quiserem pedir um modelinho/cor deixem um comentário que eu faço outro post com mais opções. :)

Os modelos são esses:

Blogger Newsletter personalizada (6 modelos)

Coracao8 1 – No painel do Blogger vá em LAYOUT. Adicione um novo Gadget de HTML/Java Script e dentro dele cole o código do modelo desejado (deixe o título em branco).

Modelo 1

<style type=”text/css”>
#LS-Newsletter4-Box {
background: url(https://lh3.googleusercontent.com/-VrmTAll-DTI/Vk4YtnIwPMI/AAAAAAAAD_k/jfxkZQAMOCI/s300-Ic42/Newsletter1.png) no-repeat scroll center center transparent;
height: 300px;
width: 300px;
}
form#LS-Newsletter4-Form {
display: block;
margin: 0;
padding-left: 50px;
padding-top: 80px;
}
form#LS-Newsletter4-Form #s {
background: transparent;
border: none;
color: #444242;
font-family: Arial;
font-size: 14px;
font-style: italic;
height: 28px;
margin-top: 37px;
vertical-align: top;
width: 240px;
outline:0px;
position: relative;
left: -25px;
}
form#LS-Newsletter4-Form #d {
background: transparent;
border: none;
color: #444242;
font-family: Arial;
font-size: 14px;
font-style: italic;
height: 28px;
margin-top: 38px;
vertical-align: top;
width: 240px;
outline:0px;
position: relative;
left: -25px;
}
form#LS-Newsletter4-Form #sbutton {
background: transparent;
border: none;
cursor: pointer;
height: 43px;
position: relative;
left: 32px;
top: 25px;
width: 140px;
border-radius: 5px;
}

</style>
<div id=”LS-Newsletter4-Box”>
<form id=”LS-Newsletter4-Form” action=”https://feedburner.google.com/fb/a/mailverify?uri=blogspot/FEED-ID” method=”post”>
<input id=”d” name=”name” value=”Seu nome”
onfocus=’if (this.value == “Seu nome”) {this.value = “”}’
onblur=’if (this.value == “”) {this.value = “Seu nome”;}’/>
<input type=”email” id=”s” name=”email” value=”Seu e-mail”
onfocus=’if (this.value == “Seu e-mail”) {this.value = “”}’
onblur=’if (this.value == “”) {this.value = “Seu e-mail”;}’/>
<input type=”image” src=”http://3.bp.blogspot.com/-D4DL8TMRtd0/UCuQt-AVn3I/AAAAAAAAJz8/K1sjzXIxyQk/s1600/blank.gif” id=”sbutton”/>
</form>
</div>

 

Modelo 2

<style type=”text/css”>
#LS-Newsletter4-Box {
background: url(https://lh3.googleusercontent.com/-D04JEb3wkAQ/Vk4bO46yAqI/AAAAAAAAD_0/ak5T8Dnpow4/s300-Ic42/Newsletter2.png) no-repeat scroll center center transparent;
height: 300px;
width: 300px;
}
form#LS-Newsletter4-Form {
display: block;
margin: 0;
padding-left: 50px;
padding-top: 80px;
}
form#LS-Newsletter4-Form #s {
background: transparent;
border: none;
color: #444242;
font-family: Arial;
font-size: 14px;
font-style: italic;
height: 28px;
margin-top: 37px;
vertical-align: top;
width: 240px;
outline:0px;
position: relative;
left: -25px;
}
form#LS-Newsletter4-Form #d {
background: transparent;
border: none;
color: #444242;
font-family: Arial;
font-size: 14px;
font-style: italic;
height: 28px;
margin-top: 38px;
vertical-align: top;
width: 240px;
outline:0px;
position: relative;
left: -25px;
}
form#LS-Newsletter4-Form #sbutton {
background: transparent;
border: none;
cursor: pointer;
height: 43px;
position: relative;
left: 32px;
top: 25px;
width: 140px;
border-radius: 5px;
}

</style>
<div id=”LS-Newsletter4-Box”>
<form id=”LS-Newsletter4-Form” action=”https://feedburner.google.com/fb/a/mailverify?uri=blogspot/FEED-ID” method=”post”>
<input id=”d” name=”name” value=”Seu nome”
onfocus=’if (this.value == “Seu nome”) {this.value = “”}’
onblur=’if (this.value == “”) {this.value = “Seu nome”;}’/>
<input type=”email” id=”s” name=”email” value=”Seu e-mail”
onfocus=’if (this.value == “Seu e-mail”) {this.value = “”}’
onblur=’if (this.value == “”) {this.value = “Seu e-mail”;}’/>
<input type=”image” src=”http://3.bp.blogspot.com/-D4DL8TMRtd0/UCuQt-AVn3I/AAAAAAAAJz8/K1sjzXIxyQk/s1600/blank.gif” id=”sbutton”/>
</form>
</div>

 

Modelo 3

<style type=”text/css”>
#LS-Newsletter4-Box {
background: url(https://lh3.googleusercontent.com/-7ahSjrcN0eA/Vk4bPDV2B0I/AAAAAAAAD_8/ia9aD4Ctc98/s300-Ic42/Newsletter3.png) no-repeat scroll center center transparent;
height: 300px;
width: 300px;
}
form#LS-Newsletter4-Form {
display: block;
margin: 0;
padding-left: 50px;
padding-top: 80px;
}
form#LS-Newsletter4-Form #s {
background: transparent;
border: none;
color: #444242;
font-family: Arial;
font-size: 14px;
font-style: italic;
height: 28px;
margin-top: 37px;
vertical-align: top;
width: 240px;
outline:0px;
position: relative;
left: -25px;
}
form#LS-Newsletter4-Form #d {
background: transparent;
border: none;
color: #444242;
font-family: Arial;
font-size: 14px;
font-style: italic;
height: 28px;
margin-top: 38px;
vertical-align: top;
width: 240px;
outline:0px;
position: relative;
left: -25px;
}
form#LS-Newsletter4-Form #sbutton {
background: transparent;
border: none;
cursor: pointer;
height: 43px;
position: relative;
left: 32px;
top: 25px;
width: 140px;
border-radius: 5px;
}

</style>
<div id=”LS-Newsletter4-Box”>
<form id=”LS-Newsletter4-Form” action=”https://feedburner.google.com/fb/a/mailverify?uri=blogspot/FEED-ID” method=”post”>
<input id=”d” name=”name” value=”Seu nome”
onfocus=’if (this.value == “Seu nome”) {this.value = “”}’
onblur=’if (this.value == “”) {this.value = “Seu nome”;}’/>
<input type=”email” id=”s” name=”email” value=”Seu e-mail”
onfocus=’if (this.value == “Seu e-mail”) {this.value = “”}’
onblur=’if (this.value == “”) {this.value = “Seu e-mail”;}’/>
<input type=”image” src=”http://3.bp.blogspot.com/-D4DL8TMRtd0/UCuQt-AVn3I/AAAAAAAAJz8/K1sjzXIxyQk/s1600/blank.gif” id=”sbutton”/>
</form>
</div>

 

Modelo 4

<style type=”text/css”>
#LS-Newsletter4-Box {
background: url(https://lh3.googleusercontent.com/-f1c0VdFOvvc/Vk4bPAlBU7I/AAAAAAAAEAE/3q8vf4Sn2DI/s300-Ic42/Newsletter4.png) no-repeat scroll center center transparent;
height: 300px;
width: 300px;
}
form#LS-Newsletter4-Form {
display: block;
margin: 0;
padding-left: 50px;
padding-top: 80px;
}
form#LS-Newsletter4-Form #s {
background: transparent;
border: none;
color: #444242;
font-family: Arial;
font-size: 14px;
font-style: italic;
height: 28px;
margin-top: 37px;
vertical-align: top;
width: 240px;
outline:0px;
position: relative;
left: -25px;
}
form#LS-Newsletter4-Form #d {
background: transparent;
border: none;
color: #444242;
font-family: Arial;
font-size: 14px;
font-style: italic;
height: 28px;
margin-top: 38px;
vertical-align: top;
width: 240px;
outline:0px;
position: relative;
left: -25px;
}
form#LS-Newsletter4-Form #sbutton {
background: transparent;
border: none;
cursor: pointer;
height: 43px;
position: relative;
left: 32px;
top: 25px;
width: 140px;
border-radius: 5px;
}

</style>
<div id=”LS-Newsletter4-Box”>
<form id=”LS-Newsletter4-Form” action=”https://feedburner.google.com/fb/a/mailverify?uri=blogspot/FEED-ID” method=”post”>
<input id=”d” name=”name” value=”Seu nome”
onfocus=’if (this.value == “Seu nome”) {this.value = “”}’
onblur=’if (this.value == “”) {this.value = “Seu nome”;}’/>
<input type=”email” id=”s” name=”email” value=”Seu e-mail”
onfocus=’if (this.value == “Seu e-mail”) {this.value = “”}’
onblur=’if (this.value == “”) {this.value = “Seu e-mail”;}’/>
<input type=”image” src=”http://3.bp.blogspot.com/-D4DL8TMRtd0/UCuQt-AVn3I/AAAAAAAAJz8/K1sjzXIxyQk/s1600/blank.gif” id=”sbutton”/>
</form>
</div>

 

Modelo 5

<style type=”text/css”>
#LS-Newsletter4-Box {
background: url(https://lh3.googleusercontent.com/-g9iEZybUv2Y/Vk4bPTfuuAI/AAAAAAAAEAI/2di8gNFsU58/s300-Ic42/Newsletter5.png) no-repeat scroll center center transparent;
height: 300px;
width: 300px;
}
form#LS-Newsletter4-Form {
display: block;
margin: 0;
padding-left: 50px;
padding-top: 80px;
}
form#LS-Newsletter4-Form #s {
background: transparent;
border: none;
color: #444242;
font-family: Arial;
font-size: 14px;
font-style: italic;
height: 28px;
margin-top: 37px;
vertical-align: top;
width: 240px;
outline:0px;
position: relative;
left: -25px;
}
form#LS-Newsletter4-Form #d {
background: transparent;
border: none;
color: #444242;
font-family: Arial;
font-size: 14px;
font-style: italic;
height: 28px;
margin-top: 38px;
vertical-align: top;
width: 240px;
outline:0px;
position: relative;
left: -25px;
}
form#LS-Newsletter4-Form #sbutton {
background: transparent;
border: none;
cursor: pointer;
height: 43px;
position: relative;
left: 32px;
top: 25px;
width: 140px;
border-radius: 5px;
}

</style>
<div id=”LS-Newsletter4-Box”>
<form id=”LS-Newsletter4-Form” action=”https://feedburner.google.com/fb/a/mailverify?uri=blogspot/FEED-ID” method=”post”>
<input id=”d” name=”name” value=”Seu nome”
onfocus=’if (this.value == “Seu nome”) {this.value = “”}’
onblur=’if (this.value == “”) {this.value = “Seu nome”;}’/>
<input type=”email” id=”s” name=”email” value=”Seu e-mail”
onfocus=’if (this.value == “Seu e-mail”) {this.value = “”}’
onblur=’if (this.value == “”) {this.value = “Seu e-mail”;}’/>
<input type=”image” src=”http://3.bp.blogspot.com/-D4DL8TMRtd0/UCuQt-AVn3I/AAAAAAAAJz8/K1sjzXIxyQk/s1600/blank.gif” id=”sbutton”/>
</form>
</div>

 

Modelo 6

<style type=”text/css”>
#LS-Newsletter4-Box {
background: url(https://lh3.googleusercontent.com/-5lpOyjR-4DQ/Vk4bPvtKkuI/AAAAAAAAEAM/IE6VsXu66y0/s300-Ic42/Newsletter6.png) no-repeat scroll center center transparent;
height: 300px;
width: 300px;
}
form#LS-Newsletter4-Form {
display: block;
margin: 0;
padding-left: 50px;
padding-top: 80px;
}
form#LS-Newsletter4-Form #s {
background: transparent;
border: none;
color: #444242;
font-family: Arial;
font-size: 14px;
font-style: italic;
height: 28px;
margin-top: 37px;
vertical-align: top;
width: 240px;
outline:0px;
position: relative;
left: -25px;
}
form#LS-Newsletter4-Form #d {
background: transparent;
border: none;
color: #444242;
font-family: Arial;
font-size: 14px;
font-style: italic;
height: 28px;
margin-top: 38px;
vertical-align: top;
width: 240px;
outline:0px;
position: relative;
left: -25px;
}
form#LS-Newsletter4-Form #sbutton {
background: transparent;
border: none;
cursor: pointer;
height: 43px;
position: relative;
left: 32px;
top: 25px;
width: 140px;
border-radius: 5px;
}

</style>
<div id=”LS-Newsletter4-Box”>
<form id=”LS-Newsletter4-Form” action=”https://feedburner.google.com/fb/a/mailverify?uri=blogspot/FEED-ID” method=”post”>
<input id=”d” name=”name” value=”Seu nome”
onfocus=’if (this.value == “Seu nome”) {this.value = “”}’
onblur=’if (this.value == “”) {this.value = “Seu nome”;}’/>
<input type=”email” id=”s” name=”email” value=”Seu e-mail”
onfocus=’if (this.value == “Seu e-mail”) {this.value = “”}’
onblur=’if (this.value == “”) {this.value = “Seu e-mail”;}’/>
<input type=”image” src=”http://3.bp.blogspot.com/-D4DL8TMRtd0/UCuQt-AVn3I/AAAAAAAAJz8/K1sjzXIxyQk/s1600/blank.gif” id=”sbutton”/>
</form>
</div>

 

Coracao8 2 – Substitua o trecho em vermelho (blogspot/FEED-ID) pelo ID do seu Feed. Para descobri-lo vá em LAYOUT e Adicione um novo Gadget de “Seguir por Email”. O ID do seu Feed aparecerá APÓS o endereço http://feeds.feedburner.com/blogspot/. Exemplo:

Blogger Newsletter personalizada (6 modelos) 2

 

Coracao8 3 – Salve o gadget da newsletter personalizada e pronto! :)
O gadget de Seguir por e-mail pode ser removido do blog, a newsletter continuará funcionando.

 

Espero que tenham gostado. Deixem sugestões de outros tutoriais nos comentários.
Um beijo!

Esse código é do blog WidCraft e foi personalizado por mim.
(Fiz os modelos e adicionei o Feed ID)

Tags : Blogger

55 Comentários

  1. Adoro seu blog, serve de inspiração pra mim. Uso seu layout aquarela e sempre busco seus tutorias. Infelizmente ainda não deu certo dois =( mas vou continuar tentando!
    Obrigada por nos ajudar com isso tudo! Seu blog está na minha lista de créditos!
    Bjus

  2. Ooi, tudo bom? Caraca, aqui é muito lindo, e cheio de material bom e fofo. Eu nem sei o que é esse newsletter aí, mas me deu vontade de usar só por que é bonito, kkkk. Tô editando meu blog nesse exato momento e acabei encontrando aqui por acaso e já estou virando adepta. Amando muitoooo. Espero te ver lá pelo meu cantinho, pra poder ver como tá ficando com seus tutos. Beijão e sucesso na vida. <3

    1. Oi Gabriel, esse é o gadget de Newsletter, o leitor que assinar receberá uma notificação por e-mail toda vez que você publicar um post. Pode ser útil pois essa notificação pode te gerar uma visita se o leitor resolver clicar para ler o seu post.
      Bjs

    1. Edwin, o envio das notificações para os assinantes é automático! Essa personalização é do sistema de feed padrão do Blogger {Feedburner}. :)

  3. Olá! Não estava conseguindo cadastrar o email no feed, pois aparecia uma mensagem de que o feed não estava ativo. Mas então descobri que como meu blog tem domínio próprio, o “blogspot” ali antes do feed ID, tem que ser usbstituído pelo domínio. Exemplo:

    ttps://feedburner.google.com/fb/a/mailverify?uri=sabrinacastro/AAAA

    Só assim funcionou. :) Enquanto estava com o blogspot, só dava como feed não ativado.

    Mesmo assim, adorei e já estou usando no meu blog (que não é o citado acima). hahaha!

    bjs

  4. Olá, amo seu blog *w* acabei de aprender a colocar arquivos no blog em forma de calendário que vi aqui o tutorial no seu blog. Adorei!! eu uso seu template free aquarela também, amo seu trabalho parabéns e com certeza vou aprender e colocar essa newsletter personalizada *w* bjs

  5. Seu blog é maravilhoso já faz um tempinho que encontrei e li vários posts.Eu mesma estou editando meu blog, e foi assim que te encontrei, e suas dicas foram muito uteis para mim.Usei várias delas e gostei muito sobre várias explicações que você faz para quem é novo no ramo como eu!Se quiser ver o meu blog é este http://blogfuxicabeleza.blogspot.com.br/, não está pronto mais já tem várias de suas dicas super úteis. E antes que esqueça amei a nova carinha do seu blog!!!!

  6. Amei o post pra quem faz parte do blogger, mais tenho um pedido a você Karol.
    sou do wordpress.org e não encontro como fazer uma newsletter para ele então se você pudesse ensinar a fazer essa newsletter cinza linda eu amaria.

    Amei o novo estilo florido do blog ficou bem sua cara sua linda :)

  7. Karol sempre arrasando.
    Adorei e já coloquei no meu blog!

    Não posso deixar de comentar que o novo visual do seu blog ficou fantástico. Já deu vontade de mudar o meu! hahahah Sou daquelas que não consegue ficar quieta, quero mudar sempre.

    1. Oi Laryssa, se for Blogspost não é necessário cadastro, apenas seguir esse tutorial já é o suficiente para sua newsletter funcionar.
      Bjs

    1. Oi Patti, o WordPress não tem newsletter padrão, só instalando plugin.. E nesse caso, pra personalizar vai depender de qual é o plugin/sistema de newsletter.
      Bjs

  8. Oi!! então,quero saber como funciona essa newsletter, tipo se uma leitora assina a minha newsletter, o próprio blog manda recado, ou como funciona? sou lerdinha nessas coisas :3

  9. Olá Karoline,
    Seu blog está me ajudando muito na construção do meu.
    Não consegui realizar a configuração da newsletter, aparece a mensagem “The feed does not have subscriptions by email enabled”
    Tem como me ajudar?
    Abraço e sucesso!

    1. resolvi isso… mudei o tamanho da imagem, deu tudo certo. no dia seguinte o gadget tinha sumido!!!!! e no lugar dele o gadget padrao de follow by email do blogger

  10. Eu amooo seu blog! Sempre sigo suas dicas e tutoriais, é um dos blogs mais lindos e fofos que eu já vi!
    Você podia fazer um tutorial ensinando a colocar os posts relacionados iguais aos seus, na página inicial, abaixo do post! <3

    Feliz ano noooovo! haha
    Continue sempre assim <3

  11. Karoline obrigada! Usei a newsletter modelo 1 e ficou uma gracinha no meu blog. Obrigada mesmo…amo seu blog linda! Beijos

  12. Adorei e já coloquei no blog. Obrigada.

    Meu blog é literário, e gostaria de ter um gadgets onde ficasse as resenhas recentes. Você têm dicas para isto. É como se ficasse as postagem recentes em um só lugar do blog. Eu estava usando um que até girava. Mas parou de funcionar.

    Não sei se deu para entender. haha

    beijos!

  13. karol você poderia ensinar como separar a postagem da descrição do blogger, categoria..
    tipo o seu que é tudo separadinho
    ?

  14. Oi amada, estou apaixonada pelo seu blog e pegando muitas dicas!
    Só que esses modelinhos nenhum fecha com o meu blog :(
    tens como fazer uma amarelinho ou roxinho?
    claro que se não pedir demais.

  15. Olá, gostaria de saber se é possivel personalizar os emails!
    Fiz um teste e cadastrei meu proprio email, quando fiz um post eu recebi esse post no meu email mas recebi desconfigurado. Como se fosse o post sem nenhum estilo!

Deixe uma resposta