
Nesse vou mostrar como criar um cartãozinho onde você pode deixar uma mensagem aos leitores de seu blog, com opção para assinar o feed e receber por e-mail todas as suas atualizações. Fiz dois modelos, um normal e o outro natalino, além de imagens no clima de natal para que usem como preferir.
Antes, vamos aos créditos: os códigos para criar um cartão encontrei no blog Vagabundia, os que permitem criar a área para assinar feed tenho desde a época do Candylland.org da Giza Veiga, deixei ele quase sem mudar nada, apenas cores e tals, e as imagens que estou usando foram encontradas no Freepik.com (Teinstud e Wannapik). Alguns backgrounds baixei no deviantart.com (só não me lembro de qual usuário, mas acho que foi aqui).
1º Modelo de Natal
Que seu Natal seja perfeito e que a magia que Ele nos traz dure sempre em sua vida e para quem você ame.
Espero que 2017 te faça tão feliz e que não exista nada que possa te impedir de sonhar ainda mais alto e mais forte, mas sonhe acordado, para alcançar tudo o que for seu.
Quero continuar recebendo você aqui para que meu ano também comece bem.
Espero que 2017 te faça tão feliz e que não exista nada que possa te impedir de sonhar ainda mais alto e mais forte, mas sonhe acordado, para alcançar tudo o que for seu.
Quero continuar recebendo você aqui para que meu ano também comece bem.
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Gabriela');
#card2 {
height: 450px;
padding: 0;
position: relative;
width: 300px;
}
#r12 {
position: absolute;
z-index: 2;
-webkit-transform-origin: 1315px 500px;
-webkit-transform: translate(-1030px, -500px) rotate(-32deg);
-webkit-transition-property: -webkit-transform, -webkit-transform-origin;
-webkit-transition-duration: 1s;
-moz-transform-origin: 1315px 500px;
-moz-transform: translate(-1030px, -500px) rotate(-32deg);
-moz-transition-property: -moz-transform, -moz-transform-origin;
-moz-transition-duration: 1s;
}
#p12 {
height: 1388px;
overflow: hidden;
width: 1285px;
}
#p12 > div {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPTy1qGNwAI3FzQ7IdcrZWLz14x-xswBF-CdthAi6t8DhAaB5dEHn6eBtmTOglIjNCPh-07uWHeAN8nzcWwvWTTIZvhni6lkX3y6gKFYcSSEeY4gnxU6gNCKNZr6zkUm9fsLTz-yYntec/s1600/capa.jpg);
height: 388px;
width: 285px;
-webkit-transform-origin: 285px 0;
-webkit-transform: translate(1030px, 500px) rotate(32deg);
-webkit-transition-property: -webkit-transform, -webkit-transform-origin;
-webkit-transition-duration: 1s;
-moz-transform-origin: 285px 0;
-moz-transform: translate(1030px, 500px) rotate(32deg);
-moz-transition-property: -moz-transform, -moz-transform-origin;
-moz-transition-duration: 1s;
}
#p12 > div > div {
height: 388px;
width: 10px;
}
#p22 > div {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEissPjkEdGy9Kve3-tcQ-vOYOwDD0grAOzOfJHqGFYeOBXyJMHOcjwe2Mo702beRHiI6_EwuwysbRg065x2kPvwQi2MP1IVKFT3EKSMvjNd9VLqjUxYEUmhLW0D8gWoIpiOIWNngIJdEIk/s1600/capa2.jpg);
box-shadow: 0 0 11px rgba(0, 0, 0, .5);
height: 388px;
position: absolute;
width: 285px;
z-index: 1;
}
#r32 {
position: absolute;
z-index: 2;
-webkit-transform-origin: 1315px 500px;
-webkit-transform: translate(-1030px, -500px) rotate(-32deg);
-webkit-transition-property: -webkit-transform, -webkit-transform-origin;
-webkit-transition-duration: 1s;
-moz-transform-origin: 1315px 500px;
-moz-transform: translate(-1030px, -500px) rotate(-32deg);
-moz-transition-property: -moz-transform, -moz-transform-origin;
-moz-transition-duration: 1s;
}
#s32 {
position: absolute;
z-index: 1;
-webkit-transform-origin: 70px 500px;
-webkit-transform: translate(215px, -500px) rotate(-32deg) translate(40px, 0);
-webkit-transition-property: -webkit-transform, -webkit-transform-origin;
-webkit-transition-duration: 1s;
-moz-transform-origin: 70px 500px;
-moz-transform: translate(215px, -500px) rotate(-32deg) translate(40px, 0);
-moz-transition-property: -moz-transform, -moz-transform-origin;
-moz-transition-duration: 1s;
}
#card2:hover #s32 {
-webkit-transform-origin: 325px 500px;
-webkit-transform: translate(-40px, -500px) rotate(0deg) translate(40px, 0);
-moz-transform-origin: 325px 500px;
-moz-transform: translate(-40px, -500px) rotate(0deg) translate(40px, 0);
}
#sp32 {
height: 1000px;
overflow: hidden;
width: 25px;
-webkit-transition-property: width;
-webkit-transition-duration: 1s;
-moz-transition-property: width;
-moz-transition-duration: 1s;
}
#card2:hover #sp32 {
width: 11px;
}
.s2 {
height: 388px;
position: absolute;
overflow: hidden;
width: 285px;
z-index: 3;
}
#s22 {
position: absolute;
-webkit-transform-origin: 45px 500px;
-webkit-transform: translate(240px, -500px) rotate(-32deg);
-webkit-transition-property: -webkit-transform, -webkit-transform-origin;
-webkit-transition-duration: 1s;
-moz-transform-origin: 45px 500px;
-moz-transform: translate(240px, -500px) rotate(-32deg);
-moz-transition-property: -moz-transform, -moz-transform-origin;
-moz-transition-duration: 1s;
}
#sp22 {
height: 1000px;
overflow: hidden;
width: 15px;
}
#s42 {
opacity: 1;
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
}
#card2:hover #s42 {
opacity: 0;
}
#card2:hover #s22 {
-webkit-transform-origin: 300px 500px;
-webkit-transform: translate(-15px, -500px) rotate(0deg);
-moz-transform-origin: 300px 500px;
-moz-transform: translate(-15px, -500px) rotate(0deg);
}
#p32 {
height: 1388px;
overflow: hidden;
width: 1285px;
}
#p32 > div {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo2d6lJIDZD4HewpdzXGGuH7p4I2OBkNJbH7Cz7ru82nmnONiyyCVwxfQsRXEd3sLXeca1Mn9bcVXlgF8eKNm2ZwOT8Tya-YrsbWhyphenhyphenwo4kVuHNDbYEZsa5fQlObswI9HlVWXGvVc_BU7g/s1600/capa3.jpg);
box-shadow: 0 0 11px rgba(0, 0, 0, .5);
overflow: hidden;
height: 388px;
width: 285px;
-webkit-transform-origin: 0 0;
-webkit-transform: translate(1255px, 500px) rotate(-32deg);
-webkit-transition-property: -webkit-transform, -webkit-transform-origin;
-webkit-transition-duration: 1s;
-moz-transform-origin: 0 0;
-moz-transform: translate(1255px, 500px) rotate(-32deg);
-moz-transition-property: -moz-transform, -moz-transform-origin;
-moz-transition-duration: 1s;
}
#p32 > div > div {
float: right;
height: 500px;
width: 9px;
}
#card2:hover #r12 {
-webkit-transform-origin: 1570px 500px;
-webkit-transform: translate(-1285px, -500px) rotate(0deg);
-moz-transform-origin: 1570px 500px;
-moz-transform: translate(-1285px, -500px) rotate(0deg);
}
#card2:hover #p12 > div {
-webkit-transform-origin: 285px 0;
-webkit-transform: translate(1285px, 500px) rotate(0deg);
-moz-transform-origin: 285px 0;
-moz-transform: translate(1285px, 500px) rotate(0deg);
}
#card2:hover #r32 {
-webkit-transform-origin: 1570px 500px;
-webkit-transform: translate(-1285px, -500px) rotate(0deg);
-moz-transform-origin: 1570px 500px;
-moz-transform: translate(-1285px, -500px) rotate(0deg);
}
#card2:hover #p32 > div {
-webkit-transform-origin: 0 0;
-webkit-transform: translate(1000px, 500px) rotate(0deg);
-moz-transform-origin: 0 0;
-moz-transform: translate(1000px, 500px) rotate(0deg);
}
#conteudo2 {
color: #FFF;
display: block;
font-family: 'Gabriela', serif;
font-size: 12px;
height: 200px;
margin: -20000px 0 0;
position: absolute;
text-align: center;
width: 250px;
z-index: 3;
-webkit-transition-duration: 0.01s;
-webkit-transition-property: margin;
-moz-transition-duration: 0.01s;
-moz-transition-property: margin;
}
#card2:hover #conteudo2 {
margin: 30px 0 0 15px;
-webkit-transition-delay: .8s;
-moz-transition-delay: .8s;
}
.Feeed2{
padding: 5px;
color: #fff;
font-family: 'Gabriela', serif;
font-size: 12px;
text-align: center;
}
.assine2 a{
color:#7e0e1a; /* cor do link */
text-decoration: none;
border-bottom: 1px dashed;
}
/* AREA GERAL DO WIDGET */
.assine2{
margin:10px;
margin-top:-10px;
color:#fff;
}
/* BOTAO ASSINAR */
.assine2 input[type="submit"]{
background:#7e0e1a;
color:#fff;
padding:3px 8px;
border-radius:5px;
margin:5px;
border:0;
}
.assine2 input[type="submit"]:hover{
background:#bf0c20;
color:#fff;
}
/* AREA ONDE DIGITA O EMAIL */
.assine2 input[type="text"]{
width:200px !important;
padding:6px;
border-radius:5px;
margin:5px;
box-shadow:inset 0 2px 3px #aaa;
border:0
}
</style>
<br />
<div id="card2">
<div id="r12">
<div id="p12">
<div>
<div>
</div>
</div>
</div>
</div>
<div id="p22">
<div>
</div>
</div>
<div id="r32">
<div id="p32">
<div>
<div>
</div>
</div>
</div>
</div>
<div class="s2">
<div id="s32">
<div id="sp32">
</div>
</div>
</div>
<div class="s2" id="s42">
<div id="s22">
<div id="sp22">
</div>
</div>
</div>
<div id="conteudo2">
ESCREVA AQUI
<div style="text-align: center;">
<div class="Feeed2">
<!--INICIO CANDY FEEDBURNER-->
<br />
<div center="" class="assine2">
<!--FORMULARIO INSCRIÇAO EMAIL-->
<br />
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=XXXX', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" style="border: 0; padding: 3px;" target="popupwindow">
Por isso, digite seu e-mail abaixo e receba atualizações do <a href="http://feeds.feedburner.com/XXXX">NOME DO SEU BLOG</a>:
<br />
<center>
<input name="email" style="width: 250px;" type="text" /><br />
<input name="uri" type="hidden" value="XXXX" />
<input name="loc" type="hidden" value="pt_BR" />
<input type="submit" value="OK" />
</center>
</form>
</div>
</div>
<!--FIM CANDY FEEDBURNER by www.candylland.org-->
</div>
<div style="clear: both;">
</div>
</div>
</div>
2º Modelo Rosa:
Que seu Natal seja perfeito e que a magia que Ele nos traz dure sempre em sua vida e para quem você ame.
Espero que 2017 te faça tão feliz e que não exista nada que possa te impedir de sonhar ainda mais alto e mais forte, mas sonhe acordado, para alcançar tudo o que for seu.
Quero continuar recebendo você aqui para que meu ano também comece bem.
Espero que 2017 te faça tão feliz e que não exista nada que possa te impedir de sonhar ainda mais alto e mais forte, mas sonhe acordado, para alcançar tudo o que for seu.
Quero continuar recebendo você aqui para que meu ano também comece bem.
Código (cole em um gadget html/javascript ou onde quiser que apareça):
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Gabriela');
/*area geral do cartao*/
#card {
height: 450px;/*altura*/
padding: 0;
position: relative;
width: 300px;/*largura*/
}
#r1 {
position: absolute;
z-index: 2;
-webkit-transform-origin: 1315px 500px;
-webkit-transform: translate(-1030px, -500px) rotate(-32deg);
-webkit-transition-property: -webkit-transform, -webkit-transform-origin;
-webkit-transition-duration: 1s;
-moz-transform-origin: 1315px 500px;
-moz-transform: translate(-1030px, -500px) rotate(-32deg);
-moz-transition-property: -moz-transform, -moz-transform-origin;
-moz-transition-duration: 1s;
}
#p1 {
height: 1388px;
overflow: hidden;
width: 1285px;
}
#p1 > div {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPaYWTM5fW5l2Go8251CzSG0G2yZE1c3u9W6B6Hpbg_9qRTvjtnKK0wqc_1wpamboOf8ckLC102UnS6Fa4Uy9PBTie5TXdxiiA33tbEWJvDa-EbXVbAUPlX9wIRKK6BsEDxXRzPC5jPIw/s1600/capa.jpg);
height: 388px;
width: 285px;
-webkit-transform-origin: 285px 0;
-webkit-transform: translate(1030px, 500px) rotate(32deg);
-webkit-transition-property: -webkit-transform, -webkit-transform-origin;
-webkit-transition-duration: 1s;
-moz-transform-origin: 285px 0;
-moz-transform: translate(1030px, 500px) rotate(32deg);
-moz-transition-property: -moz-transform, -moz-transform-origin;
-moz-transition-duration: 1s;
}
#p1 > div > div {
height: 388px;
width: 10px;
}
#p2 > div {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsoNIhhiB3Y73AOF1LsNV0yAaJxAKm4LEM7lfB7483HtVJGA1KnTcAGikb1mRYHcJqSwjXB4gMwYOxJN2G-O2LwHYGu523Vc4OKJkSFsL2ZocOaXR9y1QNYQ5oWPWKDlzl5EZxSvHpQu4/s1600/folha.jpg);
box-shadow: 0 0 11px rgba(0, 0, 0, .5);
height: 388px;
position: absolute;
width: 285px;
z-index: 1;
}
#r3 {
position: absolute;
z-index: 2;
-webkit-transform-origin: 1315px 500px;
-webkit-transform: translate(-1030px, -500px) rotate(-32deg);
-webkit-transition-property: -webkit-transform, -webkit-transform-origin;
-webkit-transition-duration: 1s;
-moz-transform-origin: 1315px 500px;
-moz-transform: translate(-1030px, -500px) rotate(-32deg);
-moz-transition-property: -moz-transform, -moz-transform-origin;
-moz-transition-duration: 1s;
}
#s3 {
position: absolute;
z-index: 1;
-webkit-transform-origin: 70px 500px;
-webkit-transform: translate(215px, -500px) rotate(-32deg) translate(40px, 0);
-webkit-transition-property: -webkit-transform, -webkit-transform-origin;
-webkit-transition-duration: 1s;
-moz-transform-origin: 70px 500px;
-moz-transform: translate(215px, -500px) rotate(-32deg) translate(40px, 0);
-moz-transition-property: -moz-transform, -moz-transform-origin;
-moz-transition-duration: 1s;
}
#card:hover #s3 {
-webkit-transform-origin: 325px 500px;
-webkit-transform: translate(-40px, -500px) rotate(0deg) translate(40px, 0);
-moz-transform-origin: 325px 500px;
-moz-transform: translate(-40px, -500px) rotate(0deg) translate(40px, 0);
}
#sp3 {
height: 1000px;
overflow: hidden;
width: 25px;
-webkit-transition-property: width;
-webkit-transition-duration: 1s;
-moz-transition-property: width;
-moz-transition-duration: 1s;
}
#card:hover #sp3 {
width: 11px;
}
.s {
height: 388px;
position: absolute;
overflow: hidden;
width: 285px;
z-index: 3;
}
#s2 {
position: absolute;
-webkit-transform-origin: 45px 500px;
-webkit-transform: translate(240px, -500px) rotate(-32deg);
-webkit-transition-property: -webkit-transform, -webkit-transform-origin;
-webkit-transition-duration: 1s;
-moz-transform-origin: 45px 500px;
-moz-transform: translate(240px, -500px) rotate(-32deg);
-moz-transition-property: -moz-transform, -moz-transform-origin;
-moz-transition-duration: 1s;
}
#sp2 {
height: 1000px;
overflow: hidden;
width: 15px;
}
#s4 {
opacity: 1;
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
}
#card:hover #s4 {
opacity: 0;
}
#card:hover #s2 {
-webkit-transform-origin: 300px 500px;
-webkit-transform: translate(-15px, -500px) rotate(0deg);
-moz-transform-origin: 300px 500px;
-moz-transform: translate(-15px, -500px) rotate(0deg);
}
#p3 {
height: 1388px;
overflow: hidden;
width: 1285px;
}
#p3 > div {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixex8booexbghhkC2Ni7tIowc13-bzonF4EcJOqvaVeI1LSLN5aEtkfLf8AVhO2_EniUrY_qGvzYa5ioqkTZX-qmVrljZlkIU4fUX8vsic-UlrceTaAxVBIBahfc3OysRmfjzxIL35hBo/s1600/folha2.jpg);
box-shadow: 0 0 11px rgba(0, 0, 0, .5);
overflow: hidden;
height: 388px;
width: 285px;
-webkit-transform-origin: 0 0;
-webkit-transform: translate(1255px, 500px) rotate(-32deg);
-webkit-transition-property: -webkit-transform, -webkit-transform-origin;
-webkit-transition-duration: 1s;
-moz-transform-origin: 0 0;
-moz-transform: translate(1255px, 500px) rotate(-32deg);
-moz-transition-property: -moz-transform, -moz-transform-origin;
-moz-transition-duration: 1s;
}
#p3 > div > div {
float: right;
height: 500px;
width: 9px;
}
#card:hover #r1 {
-webkit-transform-origin: 1570px 500px;
-webkit-transform: translate(-1285px, -500px) rotate(0deg);
-moz-transform-origin: 1570px 500px;
-moz-transform: translate(-1285px, -500px) rotate(0deg);
}
#card:hover #p1 > div {
-webkit-transform-origin: 285px 0;
-webkit-transform: translate(1285px, 500px) rotate(0deg);
-moz-transform-origin: 285px 0;
-moz-transform: translate(1285px, 500px) rotate(0deg);
}
#card:hover #r3 {
-webkit-transform-origin: 1570px 500px;
-webkit-transform: translate(-1285px, -500px) rotate(0deg);
-moz-transform-origin: 1570px 500px;
-moz-transform: translate(-1285px, -500px) rotate(0deg);
}
#card:hover #p3 > div {
-webkit-transform-origin: 0 0;
-webkit-transform: translate(1000px, 500px) rotate(0deg);
-moz-transform-origin: 0 0;
-moz-transform: translate(1000px, 500px) rotate(0deg);
}
#conteudo {
color: #FFF;
display: block;
font-family: 'Gabriela', serif;
font-size: 12px;
height: 200px;
margin: -20000px 0 0;
position: absolute;
text-align: center;
width: 250px;
z-index: 3;
-webkit-transition-duration: 0.01s;
-webkit-transition-property: margin;
-moz-transition-duration: 0.01s;
-moz-transition-property: margin;
}
#card:hover #conteudo {
margin: 30px 0 0 15px;
-webkit-transition-delay: .8s;
-moz-transition-delay: .8s;
}
/*Codigos de assine o feed by Giza - Candylland*/
.Feeed{
padding: 5px;
color: #fff;
font-family: 'Gabriela', serif;
font-size: 12px;
text-align: center;
}
.assine a{
color:#f9b; /* cor do link */
text-decoration: none;
border-bottom: 1px dashed;
}
/* AREA GERAL DO FEED */
.assine{
margin:10px;
margin-top:-10px;
color:#fff;
}
/* BOTAO ASSINAR */
.assine input[type="submit"]{
background:#f9b;
color:#fff;
padding:3px 8px;
border-radius:5px;
margin:5px;
border:0;
}
.assine input[type="submit"]:hover{
background:#f9b;
color:#fcc;
}
/* AREA ONDE DIGITA O EMAIL */
.assine input[type="text"]{
width:200px !important;
padding:6px;
border-radius:5px;
margin:5px;
box-shadow:inset 0 2px 3px #aaa;
border:0
}
</style>
<br />
<div id="card">
<div id="r1">
<div id="p1">
<div>
<div>
</div>
</div>
</div>
</div>
<div id="p2">
<div>
</div>
</div>
<div id="r3">
<div id="p3">
<div>
<div>
</div>
</div>
</div>
</div>
<div class="s">
<div id="s3">
<div id="sp3">
</div>
</div>
</div>
<div class="s" id="s4">
<div id="s2">
<div id="sp2">
</div>
</div>
</div>
<div id="conteudo">
ESCREVA AQUI
<div style="text-align: center;">
<div class="Feeed">
<!--INICIO CANDY FEEDBURNER-->
<br />
<div center="" class="assine">
<!--FORMULARIO INSCRIÇAO EMAIL-->
<br />
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=XXXX', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" style="border: 0; padding: 3px;" target="popupwindow">
Digite seu e-mail abaixo e receba atualizações do <a href="http://feeds.feedburner.com/XXXX">NOME DO SEU BLOG</a>:
<br />
<center>
<input name="email" style="width: 250px;" type="text" /><br />
<input name="uri" type="hidden" value="XXXX" />
<input name="loc" type="hidden" value="pt_BR" />
<input type="submit" value="OK" />
</center>
</form>
</div>
</div>
<!--FIM CANDY FEEDBURNER by www.candylland.org-->
</div>
<div style="clear: both;">
</div>
</div>
</div>
Sendo que:
Você pode alterar a área geral do cartão ou das imagens mudando altura e largura, só adaptar o código às novas imagens. Deixo algumas como sugestão:
Você pode alterar a área geral do cartão ou das imagens mudando altura e largura, só adaptar o código às novas imagens. Deixo algumas como sugestão:







Em padding: 0; altere os valores para posicionar o cartão se for preciso. Ná área de Feed, você vai encontrar 'XXXX'; mude para a id do seu feed no Feedburner. Para quem ainda não conhece, só acessar: aqui.
E é isso :3
Imagem de abertura do post: Weheartit


3 Comments
Eu estou com dificuldades em centralizar o codigo na área de postagem, me ajuda por favor?
ResponderExcluirTia das Galáxias - visite ♥
Pode ser centralizado alterando aquele valor de padding: 0; ou entre <center e </center (fechando as tags)
ExcluirObrigada mas eu tentei e não deu certo :(
ExcluirAté mais õ/
Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.
Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.
Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.
Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Deviantart