27 de fev de 2014

Tutorial - Como fazer Previews


Hello ~ Sumi um pouquinho, desculpem, andei um pouco ocupada, mas nada demais. Agora vai começar o carnaval, eu preferiria ir para escola todos os dias, seria melhor do que ficar em casa para mim, de qualquer forma, espero que todos tenham um bom carnaval. Eu queria ir na praia, mas desisti por causa desse sol inteiro, vou esperar a páscoa que já será outono e3e

Eu já havia prometido este tutorial na ultima postagem, então aqui está ele. Quem é do grupo do Tea Party já sabia que eu ia postar e até já sabem sobre o que será o meu próximo post. O tutorial é um pouco complicado sim, mas se prestar atenção vocês vão conseguir fazer, pois isso recomendo reler o máximo de vezes que der e comentar se ainda tiver dúvidas.

Dica - Para fazer, eu recomendo que faça algum programa de texto especial, eu uso o Notepad++ que ele deixa o html colorido (print) e dá para ver onde acabar e termina tudo, também pode salvar como no bloco de notas normal, mas mesmo assim, em ambos os programas, precisa salvar em .html. Assim que salvar, é só abrir o arquivo .html na internet/chrome, e você verá o preview.

Para hospedar, eu uso o tumblr. Atualmente, não dá para por lá no mesmo lugar das imagens, você precisa criar um tumblr, ir na personalização dele, criar uma página e escolher 'layout personalizado' e pode começar a fazer a preview (print), pois o HTML vai estar zerado, ou se já tiver feito num dos programas que eu citei, apenas cole e copie tudo lá.

Ewwww ~ O tutorial acabou, sqn. Já sabemos como hospedar, mas e para fazer? Se a pessoa já sabe como fazer um html já está bem, mas como eu penso em todo mundo (/apanha), fiz um modelo, podem editar ele sem problemas. Qualquer dúvida, podem falar comigo pelo face (/hitori.haley) ^^
Preview
itálico - explicações

<html>
<head>
<title>Nothing</title> /* Título que fica na aba lá em cima */
<style> /* Onde irá colocar os códigos de personalização */

@font-face {font-family:"contribute"; src: url('http://static.tumblr.com/q54tzar/SYim21ewv/contribute_free-version_1_.ttf'); }
body { background: #eee; font: 15px calibri; text-align: center; }

#content { background: transparent; width: 900px; font: 50px contribute; padding: 10px; margin: auto; } /* Engloba a Cabeçalho e a parte onde fica o texto */

#header { padding: 10px; background: transparent; width: 880px; margin-bottom: -25px; } /* Codigo de personalização do cabeçalho */

#main { padding: 10px; background: #fff; width: 880px; font: 11px calibri; text-align: justify; border-radius: 10px; } /* Codigo de personalização de onde fica o texto */
</style>
</head>
<body>

<div id="content">
<div id="header">
Cabeçalho
</div>
<div id="main">
Onde vai colocar o código já do menu/seiláoque já sendo utilizado </div>
</div>
</body>
</html>

11 comentários:

  1. Previews é algo que todo(a) blogueiro deve saber fazer, gracias pelo tuto moça, super explicadinho u3u Beijos, Cath.

    Creating Eternally

    ResponderExcluir
    Respostas
    1. Também acho, pelo menos as que estão na area de tutoriais e goodies qq
      Obrigada e de nada c:

      Excluir
  2. ai muito obg eu amei o tutorial ♥ tó tentando fazer isso a seculos é uma coisa muito util pra que é blogueiro muito obg mesmo .

    ResponderExcluir
  3. Adorei esse tuto! Estava doida pra saber como os blogueiros faziam esses prewiws, agora eu sei :p
    http://theluxurybeats.blogspot.com/

    ResponderExcluir
  4. Isso é realmente muito útil. Tentarei usar uma próxima vez

    ha-unting.blogspot.com

    ResponderExcluir
  5. Puxa sempre quis saber como faz essas previews , obrigada u.u

    Geekegirlie.blogspot.com || 괴짜와 아가씨

    ResponderExcluir
  6. She wore pale blue denim shorts and a white denims work shirt .

    ResponderExcluir