Newsletter personalizada para Blogger #MEUBLOGCLEAN
Autor: Raquel Duarte | Publicado: 2017-07-25T13:00:00-03:00





Olá galerinha linda, voltamos com mais um vídeo no canal, depois de séculos sem postar por diversos motivos eu estou de volta firme e forte, dessa vez vou tentar já deixar vários vídeos preparados pra facilitar e não deixar o canal ás moscas.



Vale lembrar que estamos chegando aos 1000 inscritos o que pra mim é uma grande conquista, vamos tentar acelerar e chegar logo? Você pode colaborar se inscrevendo caso ainda não seja um inscrito do meu canalzinho lindo, basta clicar no botão abaixo e ser feliz.





Mas bora pro tutorial, hoje eu ensino como colocar a newsletter personalizada na lateral do blog e disponibilizo dois modelos mais cleans, agora vou começar a postar esses tutoriais mais preto e branco, já que muitas pessoas estão apostando num estilo mais minimalista em seus layouts.

Bora aprender como faz?








Escolha um dos modelos abaixo e siga o passo a passo do vídeo acima

MODELO 1

&lt;style type="text/css"&gt;
#LS-Newsletter4-Box {
&nbsp; &nbsp; background: url(http://i.imgur.com/QEJIPd8.png)no-repeat scroll center center transparent;
&nbsp; &nbsp; height: 220px;
&nbsp; &nbsp; width: 300px;
}
form#LS-Newsletter4-Form {
&nbsp; &nbsp; display: block;
&nbsp; &nbsp; margin: 0;
&nbsp; &nbsp; padding-left: 51px;
&nbsp; &nbsp; padding-top: 23px;
}
form#LS-Newsletter4-Form #s {
&nbsp; &nbsp; background: transparent;
&nbsp; &nbsp; border: none;
&nbsp; &nbsp; color: #444242;
&nbsp; &nbsp; font-family: georgia;
&nbsp; &nbsp; font-size: 15px;
&nbsp; &nbsp; font-style: italic;
&nbsp; &nbsp; height: 28px;
&nbsp; &nbsp; margin-top: 37px;
&nbsp; &nbsp; vertical-align: top;
&nbsp; &nbsp; width: 200px;
&nbsp; &nbsp; outline:0px;
&nbsp; &nbsp; position: relative;
&nbsp; &nbsp; left: -25px;
}
form#LS-Newsletter4-Form #d {
&nbsp; &nbsp; background: transparent;
&nbsp; &nbsp; border: none;
&nbsp; &nbsp; color: #444242;
&nbsp; &nbsp; font-family: georgia;
&nbsp; &nbsp; font-size: 15px;
&nbsp; &nbsp; font-style: italic;
&nbsp; &nbsp; height: 28px;
&nbsp; &nbsp; margin-top: 38px;
&nbsp; &nbsp; vertical-align: top;
&nbsp; &nbsp; width: 200px;
&nbsp; &nbsp; outline:0px;
&nbsp; &nbsp; position: relative;
&nbsp; &nbsp; left: -25px;
}
form#LS-Newsletter4-Form #sbutton {
&nbsp; &nbsp; background: transparent;
&nbsp; &nbsp; border: none;
&nbsp; &nbsp; cursor: pointer;
&nbsp; &nbsp; height: 43px;
&nbsp; &nbsp; position: relative;
&nbsp; &nbsp; left: -36px;
&nbsp; &nbsp; top: 15px;
&nbsp; &nbsp; width: 144px;
&nbsp; &nbsp; border-radius: 5px;
}

&lt;/style&gt;
&lt;div id="LS-Newsletter4-Box"&gt;
&nbsp; &nbsp; &lt;form id="LS-Newsletter4-Form" action="https://feedburner.google.com/fb/a/mailverify?uri=blogspot/SEU-USER-AQUI" method="post"&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;input id="d" name="name" value="Digite seu Nome"
&nbsp; &nbsp; &nbsp; &nbsp; onfocus='if (this.value == "Digite seu Nome") {this.value = ""}'
&nbsp; &nbsp; &nbsp; &nbsp; onblur='if (this.value == "") {this.value = "Digite seu Nome";}'/&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;input type="email" id="s" name="email" value="Digite seu E-mail"
&nbsp; &nbsp; &nbsp; &nbsp; onfocus='if (this.value == "Digite seu E-mail") {this.value = ""}'
&nbsp; &nbsp; &nbsp; &nbsp; onblur='if (this.value == "") {this.value = "Digite seu E-mail";}'/&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;input type="image" src="http://3.bp.blogspot.com/-D4DL8TMRtd0/UCuQt-AVn3I/AAAAAAAAJz8/K1sjzXIxyQk/s1600/blank.gif" id="sbutton"/&gt;
&nbsp; &nbsp; &lt;/form&gt;
&lt;/div&gt;

MODELO 2

&lt;style type="text/css"&gt;
#LS-Newsletter4-Box {
&nbsp; &nbsp; background: url(http://i.imgur.com/UmSlu3Q.png)no-repeat scroll center center transparent;
&nbsp; &nbsp; height: 220px;
&nbsp; &nbsp; width: 300px;
}
form#LS-Newsletter4-Form {
&nbsp; &nbsp; display: block;
&nbsp; &nbsp; margin: 0;
&nbsp; &nbsp; padding-left: 51px;
&nbsp; &nbsp; padding-top: 23px;
}
form#LS-Newsletter4-Form #s {
&nbsp; &nbsp; background: transparent;
&nbsp; &nbsp; border: none;
&nbsp; &nbsp; color: #444242;
&nbsp; &nbsp; font-family: georgia;
&nbsp; &nbsp; font-size: 15px;
&nbsp; &nbsp; font-style: italic;
&nbsp; &nbsp; height: 28px;
&nbsp; &nbsp; margin-top: 37px;
&nbsp; &nbsp; vertical-align: top;
&nbsp; &nbsp; width: 200px;
&nbsp; &nbsp; outline:0px;
&nbsp; &nbsp; position: relative;
&nbsp; &nbsp; left: -25px;
}
form#LS-Newsletter4-Form #d {
&nbsp; &nbsp; background: transparent;
&nbsp; &nbsp; border: none;
&nbsp; &nbsp; color: #444242;
&nbsp; &nbsp; font-family: georgia;
&nbsp; &nbsp; font-size: 15px;
&nbsp; &nbsp; font-style: italic;
&nbsp; &nbsp; height: 28px;
&nbsp; &nbsp; margin-top: 38px;
&nbsp; &nbsp; vertical-align: top;
&nbsp; &nbsp; width: 200px;
&nbsp; &nbsp; outline:0px;
&nbsp; &nbsp; position: relative;
&nbsp; &nbsp; left: -25px;
}
form#LS-Newsletter4-Form #sbutton {
&nbsp; &nbsp; background: transparent;
&nbsp; &nbsp; border: none;
&nbsp; &nbsp; cursor: pointer;
&nbsp; &nbsp; height: 43px;
&nbsp; &nbsp; position: relative;
&nbsp; &nbsp; left: -36px;
&nbsp; &nbsp; top: 15px;
&nbsp; &nbsp; width: 144px;
&nbsp; &nbsp; border-radius: 5px;
}

&lt;/style&gt;
&lt;div id="LS-Newsletter4-Box"&gt;
&nbsp; &nbsp; &lt;form id="LS-Newsletter4-Form" action="https://feedburner.google.com/fb/a/mailverify?uri=blogspot/SEU-USER-AQUI" method="post"&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;input id="d" name="name" value="Digite seu Nome"
&nbsp; &nbsp; &nbsp; &nbsp; onfocus='if (this.value == "Digite seu Nome") {this.value = ""}'
&nbsp; &nbsp; &nbsp; &nbsp; onblur='if (this.value == "") {this.value = "Digite seu Nome";}'/&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;input type="email" id="s" name="email" value="Digite seu E-mail"
&nbsp; &nbsp; &nbsp; &nbsp; onfocus='if (this.value == "Digite seu E-mail") {this.value = ""}'
&nbsp; &nbsp; &nbsp; &nbsp; onblur='if (this.value == "") {this.value = "Digite seu E-mail";}'/&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;input type="image" src="http://3.bp.blogspot.com/-D4DL8TMRtd0/UCuQt-AVn3I/AAAAAAAAJz8/K1sjzXIxyQk/s1600/blank.gif" id="sbutton"/&gt;
&nbsp; &nbsp; &lt;/form&gt;
&lt;/div&gt;



Qualquer dúvida só deixar um comentário!! Espero que tenham gostado galerinha, até logo, fiquem com Deus!