12/03/2013

Fazendo uma pagina de preview no Tumblr


Para hoje trago mais um tutorial, facilitando a vida de vocês que postam tutoriais. Quem ai que posta tutorial tem blog de amostra de seus menus? Quantos blogs você já fez? Eu pelo menos muitos, e depois com o tempo o Painel acaba totalmente cheio de blogs e ficando desorganizado, séria bem mais fácil colocar em uma pagina de demonstração sem precisar criar vários blogs. Um pequeno exemplo, sabem aqueles tumblrs que fazem preview de seus menus por uma pagina elaborada? Então é isso que irei mostrar como fazer hoje, quem quiser dar uma olhadinha clique no botão de brevia a baixo. Vamos ao tutorial...

ESSE TUTORIAL ESTA INVALIDO (NÃO FUNCIONA MAIS)! 
 


1. Primeiramente abra um bloco de notas, aquele padrão que vem no computador, não importa qual for seu Windows. Após abrir dentro dele cole este código:

Códigos
<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('IMAGEM DE FUNDO'); 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;
}
  CODIGO QUE FICA  EM CIMA DO ]]></b:skin> [MODO1]
</style>
<body onkeydown="return false">
<div class='styr'><img src="IMAGEM DO CABEÇALHO"></div>
<div class='jus'>
CODIGO QUE FICA  EM NO GADGET [MODO 2]
</div>
</body>
</htm>

◤Entendendo o código◥
 Imagem de Fundo: É o background da pagina esta em modo de se repetir.
 [MODO1]: É o código que adicionamos dentro de nosso HTML sobre o ]]></b:skin>, basta colocar como se fosse mesmo no blog.
 Imagem de cabeçalho: Já da pra saber né? 
 [MODO 2]: Quando adicionamos um código no ]]></b:skin>, sempre terá o do gadget então e neste lugarzinho é onde você coloca o código do gadget. Não esquecendo apaguem o [modo 1] e [modo 2] só coloquei para explicar melhor, tá bom?


2. Depois de tudo arrumadinho vamos salva-lo mais faremos uma pequena modificação. De um nome para o arquivo aconselho colocar o nome do menu, então em seguida palavra .HTML, isso fara ele se transforma em HTML literalmente não HTML digitado. Veja o exemplo:


3. Agora falta coloca-lo na web correto? Então abra esta pagina do tumblr, e carrege o arquivo que acabou de salvar. Visualize e prontinho!!! Uma perfeita pagina de preview, detalhe após enviado e impossível fazer alterações ou apagar então o correto é arrumar direitinho mesmo, e claro que a primeira vez sempre sai tudo torto porque fazemos apenas para ver o resultado, eu pelo menos sou assim. rsrs Mas espero que tenham gostado do tutorial, eu achei ele em um tumblr mas acabei perdendo o endereço para dar os créditos, então para não ficar sem, coloquei outro que também tem esse tutorial o Kawaii World. Então passarei os créditos para lá, só pra não dizerem "você pego uma postagem e nem crédito" então já que esqueci de onde eu aprendi, peguei o primeiro que vi hohoho, mas vou ficando por aqui. Até a próxima beijinhos é ate mais tarde.

14 comentários:

  1. Mundo das Ruivas12/3/13

    Weeeeeeeeeeeeeeeendy-chaaaaaann eu amo você, cara amo mesmo você. Eu hoje tava ate excluindo meus blogs de amostra e muito bagunçado eu ate fechei para arrumar, ai você vem com esse tutorial, cara se poderia lhe dar um beijo de tao feliz que estou. nossa me ajudou muito *-*

    ResponderExcluir
    Respostas
    1. Oi Onee chan, fico feliz que tenha gostado *-*

      Excluir
  2. Wendy Chan! Eu tenho uma duvida como você consegui colocar os gadget certinho na imagem do cabeçario, eu posso colocar vário do cabeçario mas ele não ficam no lugar que eu quero.
    Help??

    ResponderExcluir
    Respostas
    1. Yo Sunny eu uso dois tutoriais que irei colocar lá no seu blog ^^

      Excluir
    2. Sobre a pergunta da peruca, eu compro nesse site aqui, a site e brasileiro é bom, frete não é caro .
      Valeu pela dica :D

      Excluir
    3. Nya eu que agradeço *-*

      Excluir
  3. É incrível né por que toda vez que eu preciso muito de uma ajuda sua você resolve se mudar de novo ou viajar. Miga volta. To sentindo sua falta.

    ResponderExcluir
    Respostas
    1. Desculpe miguxa, mas eu ainda não fui e só dizer que eu ajudo. Tambem sinto saudades abeça ^^

      Excluir
  4. Nossa, pensei que eu era a unica menina solitária que se chamava Wendy, sem contar com a Wendy do Peter pan!

    ResponderExcluir
    Respostas
    1. Hihi éramos duas, mas fico feliz em conhecer uma Wendy.

      Excluir
  5. Anônimo24/10/13

    ATUALIZE ESSE TUTORIAL =D

    Tumblr nao hospeda mais .html

    ResponderExcluir
    Respostas
    1. Ah obrigada por me avisar, irei atualizar o mais rápido possível.

      Excluir
  6. Tumblr não hospeda mais HTML, onde posso hospedar?

    ResponderExcluir
    Respostas
    1. Voce pode usar a pagina, irei fazer um tutu explicando amanha :3

      Excluir

Bem Vindos
Hi! Meu nome é Andréa Alark, mas conhecida como Wendy dona do blog Bunny Crazy. O blog foi criado em 2010 na intenção de ajudar a criação e desenvolvimento do seu blog. Aqui encontrará tutoriais e dicas de HTML, layouts gratuitos e muito mais.
Friends
Bunny Crazy by Wendy ❀
Bunny Crazy ★
Bunny Crazy ★
12345