Garota dos Fandoms: 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:

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

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

Anônimo21 de março de 2014 às 11:51
AHSUAHSUASHAUHSAUHSU AUHSUAHSUAHS UAHJDSNSAUDHG AMEI AMEI TUTS AJUDOU /O/
ResponderExcluir
Respostas

Adicionar comentário

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.