09 fevereiro 2013

Criando um Live Preview

| |
Oi gente *-*
Eu estou irritada hoje, pois meu HD deu um problema e teve que colocar outro e acabei perdendo tudo que eu tinha salvo. Vou ter que instalar o PS CS6 de novo, fazer mais ilustrações {estou usando a imagem de um outro post ;/ } refazer materiais que eu ia postar e as previews que eu tinha salvo no PC.

Eu estava preparando um tutorial de como fazer as ilustrações, mas como eu perdi os prints e o PS, eu decidi postar um tutorial que, não parece, mas é muito útil!

Eu parei de usar o blog de teste por um único motivo: imagina você estar mexendo no HTML para fazer seus códigos (ou testar) e de repente dá um erro e você perde tudo. Horrível, né? Ter que refazer tudo e tals... por isso acho importante usar live previews, como os meus. E também são bonitinhos, né? ;P

Para ver um preview, clique aqui.

1º de tudo, vá nesse site e quando abrir, apague o que estará escrito no fundo azul e no lugar coloque:

<html>
<head>
<script language="javascript">
var mensagem="Botão Desativado";
function clickIE() {if (document.all) {(mensagem);return false;}}
function clickNS(e) {if
(document.layers||(document.getElementById&&!document.all)) {
if (e.which==2||e.which==3) {alert(mensagem);return false;}}}
if (document.layers)
{document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;}
else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;}
document.oncontextmenu=new Function("return false")
</script>
</head>
<style>
body{ background-image:url('URL DO BACKGROUND'); background-repeat: repeat; background-attachment: fixed;  color:#COR; font-family: tahoma;font-size:11px;  line-height: 15px; overflow-x:hidden; height:100%;
}
.styr {margin-left:430px; margin-top: 120px;
}
.jus { margin-left:530px; margin-top: 50px;
}
</style>
<body onkeydown="return false">
<div class='styr'><img src="URL DO BANNER"></div>
<div class='jus'>
Coloque aqui o que deveria estar no HTML/JavaScript
</div>
</body>
</html>
 Coloque aqui o que deveria estar no HTML/JavaScript: Aí coloque o HTML. Por exemplo, você vai colocar um menu ou um efeito, você vai colocar abaixo de <style> e na hora de colocar o menu/imagem que geralmente é assim:
<a href="http://euamohtml.blogspot.com.br/"><menu-move>EXEMPLO</menu-move></a>
coloque no lugar do trecho sublinhado, entendeu? Assim o menu vai aparecer.

No URL do Banner é meio óbvio. Você vai fazer um banner/um mini cabeçalho com o nome do efeito/menu/etc e tals. | O banner vai ficar mais para a direita {pelo menos, o meu fica} para mudar isso, mexa nos números para ajustar em .styr {margin-left:430px; margin-top: 120px; 

O elemento/gadget/widget/ que colocou também vai ficar mais a direita. Para mudar, mexa nos números no código .jus { margin-left:530px; margin-top: 50px;


Quando tudo estiver da maneira que quiser, copie e cole no bloco de notas. Salve o documento, só que no formato .html assim:

We Heart HTML
Agora vá no Tumblr Static Files {não sei, mas acho que precisa estar logado} e hospede a preview. Depois vai gerar um link que vai ser o link da preview.

Espero que o tuto tenha ajudado, gente. Peço desculpas a pessoa que pediu o tutorial das ilustrações, por não ter postado. Prometo que, assim que eu puder, quando o PS e o PFS estiverem instalados eu vou ensinar a fazer nos dois programas. Beijos ;♥

17 comentários:

  1. É muito útil porque sempre tem um código que estraga o outro :-x haha Você explicou muito bem,ficou muito fácil de entender!
    Beijos

    ~~Meu Blog

    ResponderExcluir
  2. Acho esse tutorial muito últil, principalmente para blogs de HTML que criam efeitos e menus, é muito mais fácil do que fazer um blog de testes e fica mais fácil para a pessoa ver o efeito, não tem que ficar procurando. E os créditos da imagem são do WHH pode olhar lá no blog ^^ Beijos s2
    wehearthtml.blogspot.com

    ResponderExcluir
  3. Achei o paraíso do html, caraca amei o seu blog achei o tutorial de preto e branco e quase morri para achar e achei aqui, no meu próximo layout vou usar-lo. Parabéns pelo blog amei!!

    cantinhodeumaotome.blogspot.com.br

    ResponderExcluir
  4. Seu blog é muito kawaii, tô seguindo *-*
    cr4zy-world.blogspot.com

    ResponderExcluir
  5. Amei o tutorial,super útil e agora posso fazer menus e efeitos que gostaria de criar lá no blog e ensinar é claro^^

    Beijos
    Amora Ruffles

    ResponderExcluir
  6. Olá linda , ameii o lay *.*

    Gostaria de lhe propor algo , que vose faça o lay do meu blog e em troca lhe dou divulgação *.* , topa ?

    Se acaso ficar interessada manda um e-mail nesse endereço : kat_gatinha2008@hotmail.com

    party-fucking.blogspot.com

    ResponderExcluir
  7. Muito útil esse tutorial.Eu mesma não sabia.Beijão
    lembrando-carol.blogspot.com.br

    ResponderExcluir
  8. Ótimo tutorial, muito útil!
    space-sweet-girl.blogspot.com.br

    ResponderExcluir
  9. É um ótimo tutorial nunca usei ele mas espero usar alguma vez, amei o post seguindo ~~ retribui ?

    time-html.blogspot.com.br

    ResponderExcluir
  10. Isa eu te amo! graças á vc consegui fazer o meu primeiro efeito *---* mas queria te falar uma coisa,nesse tutorial,não tem a parte de onde devemos colocar o código que cola acima de skin que na live preview é </style>

    <body onkeydown="return false">
    estou certa? beijos *---*

    ResponderExcluir
  11. Olá, Lindo Blog Parabéns! Bom vim aqui te perguntar uma coisa:
    No URL DO BANNER eu não entendi exatamente,o que é para fazer!?É pra colocar a imagem do seu "Banner" ou do seu "Link-Me"?
    Ou é pra colocar o que?
    Por favor me ajuuuuuudddaaa!!!
    Bjos......

    ResponderExcluir
    Respostas
    1. É tipo uma imagem com o nome do seu efeito e tals...

      Excluir
    2. Não indico usar live preview, os meus não funcionam mais. Só alguns...

      Excluir
  12. Isa Realmente mto boom o post mais assim eu não estou conseguindo hospedar,o tumbler não está hospedando mais html?tem outro site que indicaria?
    http://princesa-descolada-myla.blogspot.com.br/

    ResponderExcluir
  13. O meu também não esta hospedando , da uma mensagem em ingles abaixo do carregamento !
    www.candyedream.blogspot.com

    ResponderExcluir
    Respostas
    1. O tumblr não hospeda mais. Até onde eu sei, não há mais sites que possam hospedar...

      Excluir

« »