3.9.13

Tutorial: Como fazer Previews de efeitos, menus e afins

Ainda vou arrumar o estilo de ilustração, aguardem um pouco ><
Oie batatas de brigadeiro (WTF?)!

Como faz tempo que não falo algo da minha vida, vou falar o que aconteceu hoje.  Estou com uma hiper, estra, ultra, giga de mexer no computador, eu estou com muita preguiça mesmo, porque vai começar a chover. Pois é, sempre quando cai um pé d'água eu fico assim : //

Falando sobre o assunto da postagem, sabem quando eu posto algum menu e deixo uma 'preview' para vocês verem? Aqui uns exemplos: ab e c. Pois é, uma leitora pediu como se faz isso, e aqui estou eu para ensinar. É super simples, porém você precisa ter conta no Tumblr  . Então se você não tem, crie uma(super rápido e simples) para podermos começar. Já criou? Pois bem, agora prossiga ~~>

Então, eu não sei bem aonde nem como aprendi a fazer essas previews, só sei que havia guardado o código no meu bloco de notas, mas se for seu pode me avisar, se precisar eu credito ><
......................................................................................

1. Vá ao Real-time HTML Editor , chegando lá, apague aonde esta de azul(xxx) e cole o seguinte:


<html>
<head>
<title> TÍTULO DA PREVIEW  </title>
<style>
body { background: url(URL_DO_BACKGROUND); /*BACKGROUND */ }
#content {
 position: relative;
text-align:center;
top: 50px;/*margem do topo*/
margin-left: auto;
 margin-right: auto;
width: 500px; /* Tamanho da preview*/ font-family: arial; /* Fonte da descrição da preview */
 font-size: 12px; /* tamanho da fonte do texto*/
color: #333; /* cor da fonte do texto */
}
 .titulo /*titulo da pagina */
{ color: #fff; /* cor do título */
text-shadow: 2px 4px 06px #888; /*sombra do título*/
font-family: verdana; /*fonte do titulo*/
font-size:45px; /*tamanho da fonte do título*/
}
a /*Cor dos links*/
{text-decoration: none;
color: #67b9f9; /*cor*/
-webkit-transition-duration: .9s;
}
a:hover { /*cor dos links ao passar o mouse por cima*/
text-decoration:underline;
 color: #f967a1; /*cor*/
-webkit-transition-duration: .9s;
text-decoration:none;}
/* ------------ AQUI, COLE O CÓDIGO DO EFEITO(COMO SE FOSSE O SEU CSS)------------ */
</style>
<script type="text/javascript" src="http://assets.tumblr.com/assets/scripts/tumblelog.js?_v=ff172da3008d79d3633516a193cc7f84"></script><meta http-equiv="x-dns-prefetch-control" content="off"/>
</head>
<body>
</br>
</br>
<div id="content">
<center><div class="titulo"> TÍTULO DA PREVIEW </div>

DESCRIÇÃO DO EFEITO AQUI
</br>
</br>
<center>
AQUI VOCÊ COLA O QUE COLARIA EM UM GADGET HTML/JAVASCRIPT
</br>

2. Depois que você personalizar tudo bonitinho, com todos os códigos já postos, e se você viu que esta funcionando, copie todo seu código e cole no bloco de notas(ou no World, tanto faz).

3. Agora vá no seu Tumblr(que você criou no começo, lembra?) e crie uma Nova Página  , para fazer isto, é muito fácil; Cole isso no seu navegador apenas mudando, pelo endereço do teu Tumblr:
http://www.tumblr.com/blog/nome_do_tumblr/pages/new
Depois é só ajustar assim: Layout personalizado, e no lugar em branco colar o código que você colou no bloco de notas :33 Salvar e depois ver se funcionou. Como fazer isso? É simples, cole isso no seu navegador, modificando apenas o que se pede:
http://nome-do-tumblr/nome-da-página-do-efeito
Pronto. Agora é só ver se a preview esta funcionado, e colar o link no teu blog ^33^

Mas, se por acaso você não souber fazer isto, veja um passo a passo:

A) clique em Configurações(uma engrenagem), clique no nome do teu Tumblr, que se localiza do lado esquerdo da tela (print) e 'por fim' clique em Personalizar(logo abaixo do seu theme) (print)

B) Você verá seu theme do lado direito, e do esquerdo uma barra preta. Deslize ela toda para baixo e localize Páginas(print). Localizou? Que bom, isto é ótimo, agora clique em Adicionar Páginas. Veja:

C)  Agora abrirá uma nova janela, ajuste-a como no print, observe:


D) Agora é só colar na barra do seu navegador o seguinte:
http://nome-do-tumblr/nome-da-página-do-efeito
 Observe uma de minhas urls, pra você pegar o jeito:

http://sweeet-flower.tumblr.com/efeito-redondo

PRONTO. AGORA TODA VEZ QUE VOCÊ PRECISAR DE UMA PREVIEW É SÓ SEGUIR O TUTORIAL ^33^  

20 comentários:

  1. Estava precisando desse tuto! Mais não achava nenhum blog que explica-se tão bem. Com certeza vou usar no meu próximo layout.

    Obrigado <3

    Seguindo, segue de volta?
    Aceita afiliação?
    Beijos ♥
    http://mundo-da-victoria.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Que legal, faça bom proveito :33

      Obrigada, você. Magina.

      Sigo sim, estamos com uma única vaga, então eu aceito.

      Excluir
  2. Haha obrigada <3 tava precisando, eu sempra quis saber como faz *---* Saudades sz sz sz


    Cupcake de Amora


    ResponderExcluir
  3. Gente, amei!
    Bem mais fácil do que o jeito que eu estou fazendo. Que é: criar um outro blog no Blogger e ir colocando gadgets com os efeitos.
    Adorei e vou tentar! :D

    Um beijo!
    www.nerdcomchiclete.blogspot.com
    www.nerd-absoluta.blogspot.com

    ResponderExcluir
    Respostas
    1. Ahushuas obrigada.

      Eu acho mais fácil pelo Tumblr, lá fica tudo organizadinho e tals.

      Excluir
    2. Eu tentei esse negocio e não deu certo :p
      Ajuda?

      Excluir
  4. Adoreii o tutoo,pena que eu ainda naum sei faze efeitos ;(
    mesmo assi, eh muito útil! 's2
    ah linda tem post novo no blog comenta laá?
    luisascuteworld.blogspot.com
    Obg floor' s2

    ResponderExcluir
    Respostas
    1. Owwnt :'( que pena, com o tempo tu aprende u3u

      Comento sim ^>^

      Excluir
  5. Já sabia fazer isso, Mais obrigado. O Tutorial é muito útil e vai ajudar muita gente!

    http://fou-r.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. De nada :33 Fazer previews é uma coisa muito fácil e divertia shussuahsa.

      Excluir
  6. O meu nao aparece layout personalizado :((

    ResponderExcluir
    Respostas
    1. Ownt :( tem certeza Hay? Não tem erro, tenta de novo :D

      Excluir
  7. Adorei o post, ajudou muito sempre tive vontade de fazer um post com preview mas sempre ficava com preguiça de procurar um tutorial ahsahassah

    meumundoporlari.blogspot.com.br

    ResponderExcluir
  8. Bom, eu não faço assim, na verdade faço bem diferente açsasççsa de um jeito que eu considero mais prático porém assim também é muito bom *o*
    Beijos Brenda do Gave Crazy

    ResponderExcluir
  9. Super fofo, tentei seguir o tutorial do Chovendo Diamante, que hospeda no tumblr e aparece, mais dava erro, super gostei desse, quando fazer outro efeito, irei testar :3
    Eloísa do Having Cherry || Aguardo sua visita

    ResponderExcluir

Hey, que bom que irá comentar! Mas, leia as regras;

- Comente sobre o post >3<
- Deixe o link do seu blog no final, retribuirei
- Respondo todos os comentários
- Retribuo todos os comentários
- Não comente besteira, nem seja racista :3
- Criticas construtivas são bem vindas :D
- Sigo de Volta todos que me seguirem primeiro.