25 de jul de 2017

Newsletter personalizada para Blogger #MEUBLOGCLEAN


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

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

</style>
<div id="LS-Newsletter4-Box">
    <form id="LS-Newsletter4-Form" action="https://feedburner.google.com/fb/a/mailverify?uri=blogspot/SEU-USER-AQUI" method="post">
        <input id="d" name="name" value="Digite seu Nome"
        onfocus='if (this.value == "Digite seu Nome") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "Digite seu Nome";}'/>
        <input type="email" id="s" name="email" value="Digite seu E-mail"
        onfocus='if (this.value == "Digite seu E-mail") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "Digite 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(http://i.imgur.com/UmSlu3Q.png)no-repeat scroll center center transparent;
    height: 220px;
    width: 300px;
}
form#LS-Newsletter4-Form {
    display: block;
    margin: 0;
    padding-left: 51px;
    padding-top: 23px;
}
form#LS-Newsletter4-Form #s {
    background: transparent;
    border: none;
    color: #444242;
    font-family: georgia;
    font-size: 15px;
    font-style: italic;
    height: 28px;
    margin-top: 37px;
    vertical-align: top;
    width: 200px;
    outline:0px;
    position: relative;
    left: -25px;
}
form#LS-Newsletter4-Form #d {
    background: transparent;
    border: none;
    color: #444242;
    font-family: georgia;
    font-size: 15px;
    font-style: italic;
    height: 28px;
    margin-top: 38px;
    vertical-align: top;
    width: 200px;
    outline:0px;
    position: relative;
    left: -25px;
}
form#LS-Newsletter4-Form #sbutton {
    background: transparent;
    border: none;
    cursor: pointer;
    height: 43px;
    position: relative;
    left: -36px;
    top: 15px;
    width: 144px;
    border-radius: 5px;
}

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


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


https://www.facebook.com/pg/lusaagenciadigital

2 comentários :

  1. jÁ ESTAVA SENTIDO FALTA DOS SEUS TUTORIAIS HAHAH AMEI BJS

    LEH BLOG INSTAGRAM FACEBOOK

    ResponderExcluir
  2. faz um novo video ensinando como colocar essa nova newsletter que voce esta usando no seu blog agora pffv

    ResponderExcluir