Cartão com Mensagem e Opção Assinar Feed
Autor: Roberta Silva | Publicado: 2016-12-22T19:03:00-02:00




Oie... Pensou que eu só ia postar depois do final das festas né? Vou não! Bem, na verdade eu vou descansar um poquinho sim, mas deixei alguns posts prontos &nbsp;em rascunho (só tenho que vir publicar) para vocês.

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&nbsp;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

@import url('https://fonts.googleapis.com/css?family=Gabriela');
#card2 {
  height: 450px;
  padding: 0 0 0 300px;
  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://1.bp.blogspot.com/-LIJ2J8T6zEM/WFv9Awy7ZNI/AAAAAAAARGo/3W32mQWMCJQUtBfJbr2r3ggLyxrgnyXdQCLcB/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://2.bp.blogspot.com/-VyU00c4EZxo/WFv9AttkvgI/AAAAAAAARGk/up0dL-rL9aAj6DR35EwUb0athFq08doUQCLcB/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://4.bp.blogspot.com/-BQ35on0HpTA/WFv9AQ85kCI/AAAAAAAARGg/UhGLDNU5sGguW3JuKrDilzQtlit8Yx_LwCLcB/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
}





































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.



<!--INICIO CANDY FEEDBURNER-->


<!--FORMULARIO INSCRIÇAO EMAIL-->


Por isso, digite seu e-mail abaixo e receba atualizações do Reino Kawaii:











<!--FIM CANDY FEEDBURNER by www.candylland.org-->






 &lt;style type="text/css"&gt;
@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 &gt; div {
  background-image: url(https://1.bp.blogspot.com/-LIJ2J8T6zEM/WFv9Awy7ZNI/AAAAAAAARGo/3W32mQWMCJQUtBfJbr2r3ggLyxrgnyXdQCLcB/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 &gt; div &gt; div {
  height: 388px;
  width: 10px;
}
 #p22 &gt; div {
  background-image: url(https://2.bp.blogspot.com/-VyU00c4EZxo/WFv9AttkvgI/AAAAAAAARGk/up0dL-rL9aAj6DR35EwUb0athFq08doUQCLcB/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 &gt; div {
  background-image: url(https://4.bp.blogspot.com/-BQ35on0HpTA/WFv9AQ85kCI/AAAAAAAARGg/UhGLDNU5sGguW3JuKrDilzQtlit8Yx_LwCLcB/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 &gt; div &gt; 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 &gt; 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 &gt; 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
}
&lt;/style&gt;

&lt;br /&gt;
&lt;div id="card2"&gt;
&lt;div id="r12"&gt;
&lt;div id="p12"&gt;
&lt;div&gt;
&lt;div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div id="p22"&gt;
&lt;div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div id="r32"&gt;
&lt;div id="p32"&gt;
&lt;div&gt;
&lt;div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="s2"&gt;
&lt;div id="s32"&gt;
&lt;div id="sp32"&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="s2" id="s42"&gt;
&lt;div id="s22"&gt;
&lt;div id="sp22"&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div id="conteudo2"&gt;
ESCREVA AQUI
&lt;div style="text-align: center;"&gt;
&lt;div class="Feeed2"&gt;
&lt;!--INICIO CANDY FEEDBURNER--&gt;

&lt;br /&gt;
&lt;div center="" class="assine2"&gt;
&lt;!--FORMULARIO INSCRIÇAO EMAIL--&gt;

&lt;br /&gt;
&lt;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"&gt;
Por isso, digite seu e-mail abaixo e receba atualizações do &lt;a href="http://feeds.feedburner.com/XXXX"&gt;NOME DO SEU BLOG&lt;/a&gt;:
&lt;br /&gt;
&lt;center&gt;
&lt;input name="email" style="width: 250px;" type="text" /&gt;&lt;br /&gt;

&lt;input name="uri" type="hidden" value="XXXX" /&gt;
&lt;input name="loc" type="hidden" value="pt_BR" /&gt;
&lt;input type="submit" value="OK" /&gt;
&lt;/center&gt;
&lt;/form&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;!--FIM CANDY FEEDBURNER by www.candylland.org--&gt;
&lt;/div&gt;
&lt;div style="clear: both;"&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt; 


2º Modelo Rosa:

@import url('https://fonts.googleapis.com/css?family=Gabriela');
/*area geral do cartao*/
#card {
  height: 450px;/*altura*/
  padding: 0 0 0 300px;
  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(http://2.bp.blogspot.com/-rQ73NRL9fy8/U9L2w9_uaKI/AAAAAAAANiQ/d2YV5XqsZRQ/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(http://4.bp.blogspot.com/-c0PhtNVLucw/U9L2L6tzcaI/AAAAAAAANiE/LetlZyACkLM/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(http://2.bp.blogspot.com/-n_4ipDhwiTU/U9L2y0jIazI/AAAAAAAANiY/A6Jj0LQ3Vt8/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
}





































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.



<!--INICIO CANDY FEEDBURNER-->


<!--FORMULARIO INSCRIÇAO EMAIL-->


Digite seu e-mail abaixo e receba atualizações do Reino Kawaii:











<!--FIM CANDY FEEDBURNER by www.candylland.org-->







Código (cole em um gadget html/javascript ou onde quiser que apareça):

 &lt;style type="text/css"&gt;
@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 &gt; div {
  background-image: url(http://2.bp.blogspot.com/-rQ73NRL9fy8/U9L2w9_uaKI/AAAAAAAANiQ/d2YV5XqsZRQ/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 &gt; div &gt; div {
  height: 388px;
  width: 10px;
}
 #p2 &gt; div {
  background-image: url(http://4.bp.blogspot.com/-c0PhtNVLucw/U9L2L6tzcaI/AAAAAAAANiE/LetlZyACkLM/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 &gt; div {
  background-image: url(http://2.bp.blogspot.com/-n_4ipDhwiTU/U9L2y0jIazI/AAAAAAAANiY/A6Jj0LQ3Vt8/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 &gt; div &gt; 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 &gt; 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 &gt; 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
}
&lt;/style&gt;

&lt;br /&gt;
&lt;div id="card"&gt;
&lt;div id="r1"&gt;
&lt;div id="p1"&gt;
&lt;div&gt;
&lt;div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div id="p2"&gt;
&lt;div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div id="r3"&gt;
&lt;div id="p3"&gt;
&lt;div&gt;
&lt;div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="s"&gt;
&lt;div id="s3"&gt;
&lt;div id="sp3"&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="s" id="s4"&gt;
&lt;div id="s2"&gt;
&lt;div id="sp2"&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div id="conteudo"&gt;
ESCREVA AQUI
&lt;div style="text-align: center;"&gt;
&lt;div class="Feeed"&gt;
&lt;!--INICIO CANDY FEEDBURNER--&gt;

&lt;br /&gt;
&lt;div center="" class="assine"&gt;
&lt;!--FORMULARIO INSCRIÇAO EMAIL--&gt;

&lt;br /&gt;
&lt;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"&gt;
Digite seu e-mail abaixo e receba atualizações do &lt;a href="http://feeds.feedburner.com/XXXX"&gt;NOME DO SEU BLOG&lt;/a&gt;:
&lt;br /&gt;
&lt;center&gt;
&lt;input name="email" style="width: 250px;" type="text" /&gt;&lt;br /&gt;

&lt;input name="uri" type="hidden" value="XXXX" /&gt;
&lt;input name="loc" type="hidden" value="pt_BR" /&gt;
&lt;input type="submit" value="OK" /&gt;
&lt;/center&gt;
&lt;/form&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;!--FIM CANDY FEEDBURNER by www.candylland.org--&gt;
&lt;/div&gt;
&lt;div style="clear: both;"&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt; 

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:

&nbsp;
























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:&nbsp;aqui.

E é isso :3

Imagem de abertura do post: Weheartit