Como fazer uma live preview de template?


Hooy cute people ♥
Como vocês estão? Sério, queria agradecer pelos mais 15 seguidores depois de atingirmos a nossa meta antiga de 100 seguidores. Estou muito feliz por isso, vocês são demais. Agora rumo aos 200 hahaha. Graças à Deus estou terminando de atender todos os pedidos que vocês fizeram, esse é o penúltimo. A Nakashita do blog NCNS, pediu faz tempo pra fazer o tutorial de como fazer uma live preview de template, sem criar um blog pra isso. Eu não faço desse jeito, porque como todos já sabem, tenho preguiça, e por isso eu crio o blog mesmo só para o template. É um pouco complicado, mas se prestar atenção não tem erro.
Então, vamos aprender?
EXEMPLO: [www]
CRÉDITOS: [www] (mas eu sei como fazer, só peguei o tuto de lá mesmo ahuehue #preguiça


Primeiro, vá nesse site aqui. Agora, apague todo o código daquele espaço azul. Lá, será aplicado os códigos da sua live preview. Agora cole isso aqui nele:

<html>

<head>

<style type="text/css" media="all">

.banner {width: 532px; margin-right: auto; margin-left: auto; margin-top: 0px; margin-bottom:auto}

body {background: #EAEAEA url(http://24.media.tumblr.com/tumblr_m33qwzyv7F1r6uwfxo4_400.png)
padding:4px; font-family: Arial; font-style: normal; font-size: 14px; color: #ccc; text-align:center; line-height:13px; align: center;}
</style>
</head>
<body>
<center>
<div class="banner"><img src="URL DA IMAGEM DO "CABEÇALHO""></div>
<br/><br/><br/>
</body>
</html>
Esse, é o código padrão de qualquer live preview, nunca deve faltar esse código. Agora, se quiser o conteúdo, terá que adicioná-lo no código. Aonde está escrito URL DA IMAGEM DO CABEÇALHO, será onde seu cabeçalho irá ficar (avá). Onde está aquela url na 7° linha, será a url do fundo do seu live preview. Agora, vamos entender:
Acima de </style> ficam TODOS os estilos do seu template ou efeito. E acima de </body> será onde o efeito ou template irá aparecer. Vou usar como exemplo o efeito trim trim (tutorial aqui)
Cole acima de </style> esse código:
@-webkit-keyframes vai { 0% { transform: rotate(0deg) scale(1.3) skew(0deg) translate(0px);-webkit-transform: rotate(0deg) scale(1.3) skew(0deg) translate(0px);-moz-transform: rotate(0deg) scale(1.3) skew(0deg) translate(0px);-o-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);-ms-transform: rotate(0deg) scale(0) skew(0deg) translate(0px); }

25% {transform: rotate(-7deg) scale(1) skew(0deg) translate(0px);

-webkit-transform: rotate(-7deg) scale(1) skew(0deg) translate(0px);

-moz-transform: rotate(-7deg) scale(1) skew(0deg) translate(0px);

-o-transform: rotate(-7deg) scale(1) skew(0deg) translate(0px);
-ms-transform: rotate(-7deg) scale(1) skew(0deg) translate(0px);}
50% {transform: rotate(7deg) scale(0.964) skew(0deg) translate(-2px);
-webkit-transform: rotate(7deg) scale(1) skew(0deg) translate(0px);
-moz-transform: rotate(7deg) scale(1) skew(0deg) translate(0px);
-o-transform: rotate(7deg) scale(1) skew(0deg) translate(0px);
-ms-transform: rotate(7deg) scale(1) skew(0deg) translate(0px);}
75% {transform: rotate(-7deg) scale(1) skew(0deg) translate(0px);
-webkit-transform: rotate(-7deg) scale(1) skew(0deg) translate(0px);
-moz-transform: rotate(-7deg) scale(1) skew(0deg) translate(0px);
-o-transform: rotate(-7deg) scale(1) skew(0deg) translate(0px);
-ms-transform: rotate(-7deg) scale(1) skew(0deg) translate(0px);}
100% { transform: rotate(0deg) scale(-1) skew(0deg) translate(0px);-webkit-transform: rotate(0deg) scale(-1) skew(0deg) translate(0px);-moz-transform: rotate(0deg) scale(0) skew(0deg) translate(0px);-o-transform: rotate(0deg) scale(0) skew(0deg) translate(0px);-ms-transform: rotate(0deg) scale(0) skew(0deg) translate(0px);}}
.vai {border-radius: 5px; border:1px double #f5f5f5; margin:1px;cursor:pointer;}
.vai:hover {-webkit-animation: vai 1.3s alternate infinite linear;border-radius:2px;-webkit-transition: -webkit-transform 1s ease-in-out; }
Agora, para que o efeito apareça, cole acima de </body> esse código:

<img src="http://media.tumblr.com/1d0090abd28f60c44eb659f0f3d26704/tumblr_inline_mj91nseBAp1qz4rgp.png" width="100" align="left" class="vai">
<img src="http://media.tumblr.com/8ad5d72ba43a801e370f4757d5b69289/tumblr_inline_mi0z8tQFwz1qz4rgp.png" width="100" align="left" class="vai">
<img src="http://media.tumblr.com/e099eab1dacd8af0439b5d2c2a24dff8/tumblr_inline_misv46qXcz1qz4rgp.png" width="100" align="left" class="vai">
<img src="http://media.tumblr.com/37644c2e48097f3c98ed2151381ec971/tumblr_inline_mi0yiiRccy1qz4rgp.png" width="100" align="left" class="vai">
<img src="http://media.tumblr.com/688a535ba12868de0eea7ce3256b0c23/tumblr_inline_mhxjeaqzel1qz4rgp.png" width="100" align="left" class="vai">
<img src="http://media.tumblr.com/1d0090abd28f60c44eb659f0f3d26704/tumblr_inline_mj91nseBAp1qz4rgp.png" width="100" align="left" class="vai">
<img src="http://media.tumblr.com/8ad5d72ba43a801e370f4757d5b69289/tumblr_inline_mi0z8tQFwz1qz4rgp.png" width="100" align="left" class="vai">
<img src="http://media.tumblr.com/e099eab1dacd8af0439b5d2c2a24dff8/tumblr_inline_misv46qXcz1qz4rgp.png" width="100" align="left" class="vai">
<img src="http://media.tumblr.com/37644c2e48097f3c98ed2151381ec971/tumblr_inline_mi0yiiRccy1qz4rgp.png" width="100" align="left" class="vai">
<img src="http://media.tumblr.com/688a535ba12868de0eea7ce3256b0c23/tumblr_inline_mhxjeaqzel1qz4rgp.png" width="100" align="left" class="vai">
<img src="http://media.tumblr.com/1d0090abd28f60c44eb659f0f3d26704/tumblr_inline_mj91nseBAp1qz4rgp.png" width="100" align="left" class="vai">
<img src="http://media.tumblr.com/8ad5d72ba43a801e370f4757d5b69289/tumblr_inline_mi0z8tQFwz1qz4rgp.png" width="100" align="left" class="vai"> 
O exemplo acima, vai ficar assim:


Lembrando que o cabeçalho fica a seu critério. Agora, vamos salvá-lo!
Abra seu bloco de notas e cole TODO o código do live preview. Mas antes de salvar, você não pode salvá-lo em forma de texto, ou seja, *.txt.
teste2.png (656×109)
Imagem: [www]

Você vai apagar esse nome e colocar assim:
teste3.png (656×109)
Imagem: [www]

Agora vai nesse site aqui e clique em escolher arquivo e escolha o arquivo que você salvou no bloco de notas. E depois clique e carregar arquivo. Depois de carregado, vai aparecer um link, e esse link é o link da sua live preview.
Puf puf, entenderão algo? Espero que sim, porque demorei uns 30 minutos pra fazer esse post ashuashua
Kiss >u<

43 comentários:

  1. Uau, legal, Mandizita *u*
    Complicado, mas legal haha
    Beijos!
    Bonjour, Une Glacée ♥

    ResponderExcluir
    Respostas
    1. Obrigada >u< é muito longo, por isso acho mais fácil criar um blog mesmo ashuashua :D

      Excluir
  2. Eu queria saber como era que vocês faziam isso, para mim ainda é complicado, mas como eu não posto tutu, esta tudo bem rsrsrs. Isso é muito importante em um blog que posta tutoriais.

    http://mundodeliina.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Ahuehue, com o tempo você aprende flor, tenta fuçar no html com ajuda de outros tutos e você consegue ;P . Eu acho importante mesmo, mas eu tenho meu bloguinho de testes ahueahue

      Excluir
  3. Ah, eu não conhecia o tutorial, sempre tive que criar um blog para os layouts ou efeitos. bezzo, sarah
    http://agd-doce.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. *o* ainda bem que conheceu aqui \o/ eu também crio blogs somente pra isso, mas eu acho mais fácil :)

      Excluir
  4. Awn que máximo! Super útil, mas realmente, dá uma preguiiiiiiiça hahahaha. Eu preciso editar o blog de exemplo que eu criei, acho que fica mais fácil kkkk. Beeijos!

    Rediscovering Dreams

    ResponderExcluir
    Respostas
    1. Obrigadaa >u< quando estiver pronto me mostree \o

      Excluir
  5. Ah, esse tuto é óoooootimo ><' Ainda tenho dificuldades para fazer previews, pois cá entre nós: não é nada fácil, OKASK' -q Mas que o tuto é bom ninguém pode discordar, u-u

    Beijos,

    Juu-Chan do Nescau com Nutella.

    ResponderExcluir
    Respostas
    1. Obrigadaa >u< não é fácil mesmo, ainda mais pra mim, uma mortal preguiçosa ashuashua

      Excluir
  6. Muito util o tuto *O* É uma forma muito muito de mostrar sem ter que criar um blog teste e3e

    Kissus
    Mar de Glitter

    ResponderExcluir
    Respostas
    1. Obrigadaa >v< é mesmo, mas eu prefiro criar um ashuashua

      Excluir
  7. Uhuuu mais uma preguiçosa pra mim duihasiudhauid. ótimo tuto! Seguinddo,segue tb?
    coff-cake.blogspot.com

    ResponderExcluir
  8. Olá amiga!!
    Boa noite pra vocÊ ^^
    Que lindo este post.Adoro seu blog,tem muita novidade e posts legais *0*
    Vou visitar vc sempre que eu puder,viu ? :D

    Ah,saiu um novo post lá, é o volume 13. Não deixe de Conferir lá:

    http://gliter-lovely.blogspot.com.br/

    bjoooos
    Até o/

    ResponderExcluir
    Respostas
    1. Obrigada sua fofa, acabei de comentar lá, e estou ansiosa para ver a continuação da história :D

      Excluir
  9. Seguindoo vc flor ^^

    Adoreei o Blog *---*

    bjs

    http://sobresexoeamor.blogspot.com.br/

    ResponderExcluir
  10. Boa noite! Adorei o blog e estou seguindo http://1tokdestilo.blogspot.com.br bjs

    ResponderExcluir
  11. arrasouuuuuu adorei o blog... muito legal o layout e tudo mais ahuahue

    bjosss seguindo!!
    http://jessicamakems.blogspot.com/
    http://youtube.com/jessicamakems/

    ResponderExcluir
    Respostas
    1. Obrigadaa >u< vou seguir de volta flor, menos no youtube porque não tenho conta la rsrs

      Excluir
  12. Eu sempre vi esses tutoriais que redirecionavam para o tumblr e sempre quis saber como se faz.
    Adorei o tuto, apesar de meio complicado. Mas se eu tivesse um blog de tutoriais, com certeza usaria esse método.

    Beijos, Annie
    >>> nerdsfly.#blogspot.com.br <<<
    (Retire o jogo da velha (#), caso venha me fazer uma visitinha *U*)

    ResponderExcluir
    Respostas
    1. Obrigada, é mesmo um pouco complicado mas é muito útil :D

      Excluir
  13. Ah esse tutorial é ótimo, pra quem postar Goodies e etc eu acho que é essencial, adorei o post Mandi!! *u*
    Beijosss!! <3
    Monalisa com S
    monalisacom-s.blogspot.com.br

    ResponderExcluir
  14. Ótima dica :D

    Seguindo seu blog, segue de volta?
    www.cupcaketaste.com

    ResponderExcluir
  15. adorei o tutu .
    http://mymomentsz.blogspot.com.br/

    ResponderExcluir
  16. Credu que difícil... Sambou na minha cara né gatenha :33
    Gostei do tuto, acho legal, mas né...
    Bom vim avisar que você não colocou seu prêmio lá no blog :B
    Beijoks amora♥
    Hóy Muppets

    ResponderExcluir
    Respostas
    1. Kkkk obrigada. Ah eu esqueci :p eu sou uma jumenta ashuashua já vou lá colocar o meu prêmio :D

      Excluir
  17. Já sabia como fazia mais preguiça me consome -q
    segue lá pra ajudar?
    http://eternityclouds.blogspot.com.br/

    ResponderExcluir
  18. Parece complicado poskops Talvez não se tentar né? Adorei :)
    Beijos, Lili
    Clique aqui, e vá para o blog / Princesa Teen!

    ResponderExcluir
    Respostas
    1. Obrigada, mas é mesmo, quem sabe se tiver calma não dá um bom resultado? ashuahsua

      Excluir
  19. Gostei do tuto.
    sorvete-de-limao.blogspot.com

    ResponderExcluir

Seu comentário é muito importante para o crescimento do blog, mas antes têm algumas regrinhas a serem cumpridas:
♥ Aceitamos pedidos de afiliação, somente se seguir o nosso blog;
♥ Comentários do tipo "seguindo,segue de volta, serão aceitos com prazer, afinal não é pecado pedir para seguirem seu blog, não é mesmo?;
♥ E é claro que eu visito seu blog, afinal é bom conhecermos novos blogs;
♥ Deixe o link do seu blog;
♥ Para mais informações, consulte a nossa FAQ