18.12.12

Como fazer live preview



Bom dia gente!

Hoje trouxe um tutorial de como fazer essas live previews que faço nos meus efeitos. EXEMPLO. Viram? Essa é a live preview. Vou ensinar à vocês hoje como fazer uma. Não é muito complicado, mas também não é tããão simples assim. Basta ter atenção e colocar os códigos no lugar certo. Vou ensinar do jeito que eu faço. Ah! Lembrei de uma coisa *-* Já estou com mais 3 pedidos de post para hoje. Vou tentar postar tudo ainda hoje, mas caso seu pedido não for postado, tenha calma porque há outros. Bom, clique em leia mais e veja o tutorial!





Bom, primeiramente você já tem que ter seu código em mãos. Eu vou usar o código do Menu Smooth, que postei ontem. Primeiramente, vá NESSE SITE. Nele você pode ir fazendo as coisas e acompanhando o andamento. Apague o que está lá em cima, e cole isso:


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


O que está em negrito é o background da página e o "cabeçalho". Agora, basta você adicionar o código do efeito ou menu. A parte do css, ou seja, a parte das tags ( .coisa e .coisa:hover) Fica acima de </style> que eu até sublinhei. 

E a parte do HTML, que é onde aplicamos o código, ou seja, é aquele <a href="LINK"><div class="algumacoisa">NOME DA PÁGINA</div>. FIca acima de </body>, que eu também sublinhei.

Usando o código do menu Smooth, ficaria assim:


<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;}
.menusmooth{
display: inline;
color: #fff; /*cor da letra*/
text-shadow: 0px 0px 10px #828282; /*cor da sombra*/
-webkit-transition-duration: 1.0s;
font-size: 20px; /*tamanho da letra*/
margin: 5px;
font-family: khmer UI; /*fonte*/
}
.menusmooth:hover{
color: transparent;
text-shadow: 0px 0px 15px #bababa; /*cor de quando passa o mouse*/
opacity: 1.0;
text-decoration: none;
}

</style>
</head>
<body>
<center>
<div class="banner"><img src="URL DA IMAGEM DO "CABEÇALHO""></div>
<br/><br/><br/>
<a href="LINK/"><div class="menusmooth">Home</div></body>
</html>



Como podem, ao colocar o código naquele site que passei no início, o menu já funciona. 
Eu negritei o que eu acrescentei. Pronto, o código está pronto! Agora vem a parte mais fácil. Abra o bloco de notas e cole o código nele. Depois salve, mas atenção! Você não deve salvar ele em forma de texto, ou seja, .txt que é o formato que sempre aparece


teste2.png (656×109)


Você deve apagar tudo e escrever o nome do documento, e depois disso, coloque .html no final, para salvar em formato html, que é ele quem vai gerar o preview 


teste3.png (656×109)

****Imagens do cantinho do HTML****


Agora vá NESSE SITE e clique em escolher arquivo e escolha o que você acabou de salvar no bloco de notas. Depois clique em carregar arquivo. Eles te darão um link. Esse é o link da  sua Preview! Ok, minha explicação ficou com 1000000 de linhas mas espero que vocês tenham entendido *-*

21 comentários:

  1. Gostei bastante do tutorial, tentarei fazer para ver o resultado depois :))

    ResponderExcluir
  2. Muito útil mesmo e bem mais fácil do que já vi outras pessoas fazendo.
    Obrigada mesmo. ^^

    ResponderExcluir
  3. Bastante útil, talvez eu comece a fazer as previews assim :)
    www.blogmagiateen.net

    ResponderExcluir
  4. Bem mais fácil que outros que eu vi por aí, estou seguindo aqui retribui? Tem concurso no meu blog de blogs http://pimentacupcake.blogspot.com.br/2012/12/concurso-meu-blog-e-top.html Desculpa por td isso, sei que é chato.. bjo
    PIMENTACUPCAKE

    ResponderExcluir
  5. OMG! Amei! Já tinha visto um tutorial de como fazer a Preview, mas era muuito mais difícil! Amei mesmo, vou começar a usar *--*

    ResponderExcluir
  6. Barbara voce é demais, eu tava faezndo um tuto aqui e esqueci da live hahaha , muito obrigada me ajudou
    voce é demais <3

    ResponderExcluir
  7. OMG, eu estava a procura desse tutorial á séculos hehe!! Amore, já te coloquei na elite, ok? Obrigada por aceitar ^^ Beeijos!!!
    pqngarota.tk

    ResponderExcluir
  8. legal, posso usar para criar teste no meu blog, ;)
    beeijos ;*

    loucasmaniaas.blogspot.com

    ResponderExcluir
  9. MUITO útil! Estava procurando há umas 2 semanas já o tutorial, mas não encontrava!
    (Não vou deixar o link do meu blog porque ele está fechado enquanto eu troco de layout, haha)

    ResponderExcluir
  10. tem um selinho pro CD láno meu blog. http://fantasiesofteen.blogspot.com.br/2012/12/recebemos-um-selo.html

    ResponderExcluir
  11. Bem fácil, pensei que era mais dificil, acabei de acessar seu blog e já virei fã. Sempre procurei por esse tutorial,mais era meio diferente,não esse código igual ao seu. Consegui fazer e adorei. Obrigada. Kisses :D

    http://day-dreeaming.blogspot.com.br/

    ResponderExcluir
  12. Adorei, mas e se no caso, nos quisermos fazer uma live preview de um efeito para a elite afiliados e tenhamos que colocar uma imagem? Isso eu não sei como, pode me ajudar?

    ResponderExcluir
  13. AAAAA, Que legal esse tutorial *oooo*
    Agora farei minhas previas pelo Tumblr também ;)
    Obrigado!
    Bjão!
    http://blog-part-of-me.blogspot.com.br/

    ResponderExcluir
  14. Adorei o tuto, mas sempre que vou pro 2ºsite
    Fala que é maior que o permitido =/
    http://c-andyclouds.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Estranho... Isso nunca aconteceu aqui comigo. Mas lá em baixo tem um aviso assim: "O tamanho máximo é 5 MB por arquivo e 15 MB por dia." Talvez seja o seu caso ;)

      Excluir
  15. AMEI, me ajudou muito, princilpamente agora que aprendi a fazer efeitos.
    ------------------------------------------------------------------
    just--dont.blogspot.com

    ResponderExcluir
  16. Muito utíl o tutorial :)
    Mas o meu tumblr não aceita =/

    Adoro aqui ^^ Seguindo

    Rafa~~

    ResponderExcluir