TUTORIAL: COMO FAZER LIVE PREVIEW

















Hey peoples, vocês conhecem o Heello? Okay, vou tentar explicar. Heello é, vamos dizer, uma "cópia" do twitter, quase tudo que você faz no twitter você faz no Heello, só muda as expreções, por exemplo: follow - listen / unfollow - unlisten / tweet - ping, etc.. Bom, hoje eu entrei no twitter e tinha várias pessoas falando sobre esse tal de Heello e eu fiquei perdida nessa história toda, era o assunto do momento, então eu pesquisei sobre esse site e já que todo mundo do twitter tava migrando pra lá, eu me juntei no bando e migrei também [heauhudshuasuh] o melhor disso tudo é que não tinha muitos users criados, e a maioria estavam guardando user que eram famosos no twitter. Não sei se querem saber, mas meu user no Heello é liamraspeaxana [muito criativo, eu sei] se quiserem me dar listen fiquem a vontade haha, eu dou listen de volta.
Mas enfim, este post não é sobre o Heello e sim sobre um tutorial que eu acho que muitos de vocês andam procurando, é sobre como fazer live preview, pra você que sempre quebrou a cabeça tentando fazer live preview e não conseguiu [rimou] os seus problemas acabaram, e este texto está ficando grande pra caramba, então bora pro tutorial.

1° Entre neste site e apague o que estiver no fundo azul, logo depois cole o código a seguir:



2° Personalize o código:

URL DO BACKGROUND: aqui você vai colocar o link do background [imagem de fundo] do seu live preview.
URL DO BANNER: Você vai fazer uma imagem pra cabeçalho com o nome do efeito,menu ou qualquer outra coisa que você quiser e colocar o link da imagem aqui. Se quiser mudar o posicionamento do banner é so mecher nos números em .styr {margin-left:430px; margin-top: 120px;
Coloque aqui o que deveria estar no HTML/JavaScript: auto explicativo. Por exemplo, se você for fazer live preview de um efeito, você coloca a html do efeito abaixo de <style> e a html para aplicar o efeito no lugar de "Coloque aqui o que deveria estar no HTML/JavaScript" certo? Se quiser mudar o posicionamento do gadget/elemento/widget ou qualquer que for que você colocou ai, mude os números em .jus { margin-left:530px; margin-top: 50px;

3° Visualize o seu código, se estiver tudo certo você copia a HTML que você editou e cole no bloco de notas. Antes de salvar o bloco de notas, depois do nome que você colocar, coloque .html, não esqueça de colocar .html, é muito importante!! Se tiver dúvida de como colocar veja a imagem abaixo:


4° Agora o seu live preview vai estar pronto, só falta hospedar, e era aí que todo mundo se ferrava, porque hospedavam no tumblr mas o tumblr não hospeda mais este tipo de arquivo, e depois de procurar muito outro site que gospeda HTML eu achei o Google Drive
Entre no site do Google Drive, e logue com sua conta do Google, logo depois faça upload do HTML do seu live preview, indo em Fazer upload > Arquivos... > HTML
Logo depois que fizer o upload, abra a pasta do arquivo, e clique com o botão direito no arquivo que você fez upload e vá em Compartilhar... > Compartilhar... em "Quem pode acessar" você altera para público e depois você acessa o link que está em baixo de "Link para compartilhar".
Agora clique em Visualizar > Visualizar e pronto, seu live preview vai estar prontinho.

Espero que você tenham gostado deste tutorial e que tenham ajudado vocês,
Kisses.

2 comentários

  1. AHSUAHSUASHAUHSAUHSU AUHSUAHSUAHS UAHJDSNSAUDHG AMEI AMEI TUTS AJUDOU /O/

    ResponderExcluir
    Respostas
    1. Nossa que animação ehuarushua que bom que gostou!

      Excluir

Regras:

• Pode xingar, mas não ofenda ninguém.
• Não fale mal de qualquer pessoa ou artista, respeite.
• Pode deixar o link do seu blog no comentário, mas comentários de divulgação serão automaticamente apagados.
• Não é obrigatório, mas aconselho a ler o post antes de comentar.