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

Um comentário :