Follow Us @soratemplates

quinta-feira, 22 de dezembro de 2016

Cartão com Mensagem e Opção Assinar Feed

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  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 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.
Por isso, digite seu e-mail abaixo e receba atualizações do Reino Kawaii:


 <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://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
}
</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.
Digite seu e-mail abaixo e receba atualizações do Reino Kawaii:


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(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
}
</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:
 







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 comentários:

  1. Eu estou com dificuldades em centralizar o codigo na área de postagem, me ajuda por favor?

    Tia das Galáxias - visite

    ResponderExcluir
    Respostas
    1. Pode ser centralizado alterando aquele valor de padding: 0; ou entre <center e </center (fechando as tags)

      Excluir
    2. Obrigada mas eu tentei e não deu certo :(

      Até mais õ/

      Excluir

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 - Google+ - Deviantart