26 fevereiro, 2017

Blogger | Newsletter Personalizada

E ai pessoal...

Prontas para começar a personalizar o layout de vocês? Ah, primeiro quero que me digam.  Qual é a plataforma de vocês? Blogger, WordPress ou Wix. Para nos próximos trazermos um post para todas vocês ok?!
Hoje vamos aprender a fazer um newsletter personalizada para o Blogger, os créditos desse tutorial vai para o blog Follow your dreams.

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>

Ela disponibilizou outros também, depois que terminar de ler esse post é só dar uma passadinha lá ok?!

MODELO 3


<style type="text/css">#LS-Newsletter4-Box {
background: url(https://3.bp.blogspot.com/-wHS6bBLyAxw/WLC5h5S_aOI/AAAAAAAAAQk/18JcXiVY2nsMp1GhxvbITwZAhpAqzn1sQCLcB/s1600/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>

MODELO 4 


<style type="text/css">#LS-Newsletter4-Box {
background: url(https://4.bp.blogspot.com/-wJUjiSP0XTg/WLC5iO18_gI/AAAAAAAAAQo/r75UgAcnOwcYHTR6upxzaOQmN2kuiCDFgCLcB/s1600/sadsad.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>

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/. Depois disso salve.

3 - Salve o gadget da newsletter personalizada e pronto! :)

4 - O gadget de Seguir por e-mail pode ser removido do blog, a newsletter continuará funcionando.

Bom pessoal espero que tenham gostado desse post, qualquer duvida é só deixar nos comentários ok?! Se tem algum post que queira ver por aqui deixa o seu comentário que faremos com muito prazer, beijokas....


Postado por: Leticia Miranda
Do blog: Miranda Bastos

16 comentários:

  1. Amei. Achei o tutorial muito útil e válido, mas a pessoa aqui não sabe nem como enviar a newsletter (Podiam fazer um tuto disso, né?) Parabéns pelo blog, ele está ficando cada vez mais lindo ❤

    http://rabiscandohistoriass.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Podemos sim, pode deixar que vou anotar aqui para os próximos posts..

      Excluir
  2. Muito bom personalizar ainda mais o blog. Pena que nenhum é no estilo do meu.
    Amei o post.
    Beijos

    ResponderExcluir
    Respostas
    1. Qual é o estilo do seu? podemos fazer e te enviar por email <3

      Excluir
  3. Os modelo são lindos e é sempre bom aprender a mexer no html do blog. Concordo com a Lyta em relação a fazer um tutorial sobre como enviar Newsletters.

    Abraços.

    ResponderExcluir
  4. Eu gosto muito desse tutorial, ele é ótimo e super fácil, fora que aprender a mexer com html é ótimo

    ResponderExcluir
  5. Olá! Achei lindo também, mas confesso que sou meio atrapalhada, rsrsrs! Ótima oportunidade de aprender!

    ResponderExcluir
    Respostas
    1. Sim, sim... é só questão de pratica.

      Excluir
    2. Ameii! acho que isso é de extrema importância nos blogs, pois as pessoas abrem bem mais o email do que um perfil de uma determinada pessoa no goole plus por exemplo. Obrigada por disponibilizar!

      Excluir
    3. Verdade, fica mais fácil as pessoas verem seus posts no e-mail do que no google +

      Excluir
  6. to usando uma lá no meu blog! Amei demaaaaais! Foi super facil de instalar com as dicas de vcs! www.aanneferreira.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Depois posta lá no grupo pra gente dar uma olhadinha tá ? Beijos.

      Excluir
  7. Só tenho que deixar meu muito obrigado ao blogger, muita coisa tenho que aprender, Obrigada por disponibilizar esse lindos banner 😍

    ResponderExcluir

Assessoria Digital Influencer - créditos

Tema Base por Butlariz Persnalizado por Doce Design