Hoje trouxe um tutorial bem útil para quem tem blog de goodies, tutoriais e etc, esse código serve para que ao invés de você criar um blog de preview, você apenas faça uma página em HTML e hospede-a em algum lugar.
Lá ficará guardado seu preview, sem contar que terá apenas um código na pagina, ficando muito mais organizado!
Veja a demostração aqui: PREVIEW
Como eu também vou utilizar aqui, então, tomei a liberdade de procurar como faz e estive criando códigos para isso, vamos aprender? Siga o tutorial:
Abra um bloco de notas e cole o seguinte HTML:
<html>
<head>
<link href="http://fonts.googleapis.com/css?family=Grand+Hotel" rel="stylesheet" type="text/css">
<title> TITULO DA PÁGINA </title>
<style>
body { background: url('http://static.tumblr.com/pwfjl94/9pwm5y2a4/background_por_htmlstudio_9.jpg'); /*background da página */ }
#content { position: relative;text-align:justify; top: 30px; margin-left: auto; margin-right: auto; width: 500px; /* tamanho do conteúdo - deixe esse valor */ font-family: verdana; /* fonte do texto do conteúdo */ font-size: 10px; /* tamanho da fonte do texto*/ color: #b9b9b9; /* cor da fonte do texto */ text-shadow: -1px -1px 0px #f3f3f3; /* sombra da fonte do texto */ }
.titulo { color: #fff; /* cor do título */ text-shadow: -1px -1px 0px #b9b9b9; /*sombra do título*/ font-family: 'Grand Hotel', cursive; /*fonte do titulo*/ font-size:45px; /*tamanho da fonte do título*/ }
</style>
</head>
<body>
<div id="content">
<div class="titulo"> TÍTULO DO TUTORIAL </div>
Aqui vai seu texto, seu código, sua imagem, tudo que você quiser por e ficará como preview Não esqueça de por um link para voltar para o tutorial e seu blog
</div>
</body>
</html> Ele já está customizado com css, caso queira mudar, mude apenas o que está explicado no código mesmo.
Edite seu arquivo com seus códigos de exemplo, como normalmente você faria com sua gadget em um blog de testes.
Na hora de salvar, vá em Arquivo > Salvar Como: digite o nome do seu arquivo, coloque a terminação .html ao invés do .txt e no "Tipo" coloque em Todos os Arquivos, ao invés do Documento de Texto (.txt), entendido?
Agora você só precisa hospedar esse arquivo na internet, para ter o link dele. Antes a maioria hospedava no tumblr, mas agora o tumblr não hospeda mais arquivos html, então você terá que hospedar em algum site que forneça link direto dos arquivos, como o Fileden e o Dropbox. Veja como usar esses sites neste post.
Créditos: Cherry Bomb
Nenhum comentário:
Postar um comentário