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">O exemplo acima, vai ficar assim:
<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">
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.
Imagem: [www]
Você vai apagar esse nome e colocar assim:
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.
Kiss >u<
Uau, legal, Mandizita *u*
ResponderExcluirComplicado, mas legal haha
Beijos!
Bonjour, Une Glacée ♥
Obrigada >u< é muito longo, por isso acho mais fácil criar um blog mesmo ashuashua :D
ExcluirEu 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.
ResponderExcluirhttp://mundodeliina.blogspot.com.br/
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
ExcluirAh, eu não conhecia o tutorial, sempre tive que criar um blog para os layouts ou efeitos. bezzo, sarah
ResponderExcluirhttp://agd-doce.blogspot.com.br/
*o* ainda bem que conheceu aqui \o/ eu também crio blogs somente pra isso, mas eu acho mais fácil :)
ExcluirAwn 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!
ResponderExcluirRediscovering Dreams
Obrigadaa >u< quando estiver pronto me mostree \o
ExcluirAh, 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
ResponderExcluirBeijos,
Juu-Chan do Nescau com Nutella.
Obrigadaa >u< não é fácil mesmo, ainda mais pra mim, uma mortal preguiçosa ashuashua
ExcluirMuito util o tuto *O* É uma forma muito muito de mostrar sem ter que criar um blog teste e3e
ResponderExcluirKissus
Mar de Glitter
Obrigadaa >v< é mesmo, mas eu prefiro criar um ashuashua
ExcluirBem legal o tutu adorei !
ResponderExcluirObrigadaa >u<
ExcluirUhuuu mais uma preguiçosa pra mim duihasiudhauid. ótimo tuto! Seguinddo,segue tb?
ResponderExcluircoff-cake.blogspot.com
Ashuashua é nóis, obrigadaa >u<
ExcluirObrigada sua fofa, acabei de comentar lá, e estou ansiosa para ver a continuação da história :D
ResponderExcluirSeguindoo vc flor ^^
ResponderExcluirAdoreei o Blog *---*
bjs
http://sobresexoeamor.blogspot.com.br/
Boa noite! Adorei o blog e estou seguindo http://1tokdestilo.blogspot.com.br bjs
ResponderExcluirObrigada, já segui de volta :D
Excluirarrasouuuuuu adorei o blog... muito legal o layout e tudo mais ahuahue
ResponderExcluirbjosss seguindo!!
http://jessicamakems.blogspot.com/
http://youtube.com/jessicamakems/
Obrigadaa >u< vou seguir de volta flor, menos no youtube porque não tenho conta la rsrs
ExcluirEu sempre vi esses tutoriais que redirecionavam para o tumblr e sempre quis saber como se faz.
ResponderExcluirAdorei 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*)
Obrigada, é mesmo um pouco complicado mas é muito útil :D
ExcluirAh esse tutorial é ótimo, pra quem postar Goodies e etc eu acho que é essencial, adorei o post Mandi!! *u*
ResponderExcluirBeijosss!! <3
Monalisa com S
monalisacom-s.blogspot.com.br
Obrigada, é mesmo, é muito útil :D
ExcluirÓtima dica :D
ResponderExcluirSeguindo seu blog, segue de volta?
www.cupcaketaste.com
Obrigadaa, sigo sim >u<
ExcluirObrigada, já segui ele de volta >u<
Excluiradorei o tutu .
ResponderExcluirhttp://mymomentsz.blogspot.com.br/
Obrigada >u<
ExcluirObrigadaa >v<
ExcluirObrigadaa >u<
ExcluirCredu que difícil... Sambou na minha cara né gatenha :33
ResponderExcluirGostei 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
Kkkk obrigada. Ah eu esqueci :p eu sou uma jumenta ashuashua já vou lá colocar o meu prêmio :D
ExcluirJá sabia como fazia mais preguiça me consome -q
ResponderExcluirsegue lá pra ajudar?
http://eternityclouds.blogspot.com.br/
Ashuashua é nóis. Sigo sim :D
ExcluirParece complicado poskops Talvez não se tentar né? Adorei :)
ResponderExcluirBeijos, Lili
Clique aqui, e vá para o blog / Princesa Teen!
Obrigada, mas é mesmo, quem sabe se tiver calma não dá um bom resultado? ashuahsua
ExcluirGostei do tuto.
ResponderExcluirsorvete-de-limao.blogspot.com
Obrigadaa >u<
Excluir