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
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 õ/