Home
Tutoriais
Efeitos
Ilustrações
Menus
Psds
Vagas
F.A.Q
Mapa
Layout free

Tutorial: Menu de abas


Eae como vão? 

Hoje vou falar nada com nada na introdução, até porque nem sei muito o que falar. E estou com uma certa enorme preguiça de escrever muito, quem lê assim nem imagina que o que eu mais gosto de fazer é escrever.  Enfim, além de tudo isso eu também tô sem assunto para falar, e 'tô aqui observando essa ilustração do Kevin e do Louis, um "casal" lindo e maravilhoso, com uma história linda e maravilhosa melhor que crepúsculo. Porquê todo mundo fala que qualquer romance é melhor que crepúsculo? Eu não assisti os filmes eu não entendo as piadas, sou burra, loira etc.. mas eu uso porque sou idiota. 

Enfim, hoje mais uma vez eu trouxe um tutorial, mas não é um tutorial no photoshop, é um tutorial no HTML, me pediram no ask. Eu tô usando no ultimo gadget um menu bonitinho, que deixa o blog bem mais organizado vocês viram? Eu opinei por esse menu porque eu simplesmente achei que ele deixa o blog com um ar mais leve, ocupa pouco espaço, e adiantou bastante o meu lado. E acho que vai ajudar o de vocês, principalmente para quem tem um monte de gadget e o blog fica todo desorganizado. Bom, para quem não sabe de qual gadget/menu que eu tô falando, é esse aqui (x) O tutorial é bem rapidinho, nem dá muito trabalho e eu particularmente acho que é o tutorial/menu mais fácil que eu já vi. 

Único passo: Vá em Layout adicione um gadget: HTML/ JavaScript e cole:

<script type="text/javascript">
document.write('<style type="text/css">.tabber{display:none;}< \/style>');
</style></script>
<script type="text/javascript" src="http://static.tumblr.com/dlelfro/DZqmha795/javascriptkw.js"></script>
<link rel="stylesheet" href="http://static.tumblr.com/dlelfro/Ic9mha75p/abas.css" type="text/css" media="screen" />
<br />
<div class="tabber">
<div class="tabbertab" title="Aba 1">Coisas da aba 1</div>
<div class="tabbertab" title="Aba 2">Coisas da aba 2</div>
<div class="tabbertab" title="Aba 3">Coisas da aba 3</div>
<div class="tabbertab" title="Aba 4">Coisas da aba 4</div>
<div class="tabbertab" title="Aba 5">Coisas da aba 5</div>
</div><br />

Agora altere o nome da aba e coloque os conteúdos no "Coisas da aba" Cada um corresponde a uma aba, e você precisa colocar o html do que você colocaria em um gadget sozinho ai no "Coisas de aba" salve e pronto.

3 comentários:

  1. Ótimo tutorial, eu uso o menu de abas, porque ele economiza gadgets e o resultado é super fofo.
    Kisses, Jennifer.

    pricesadodrama.blogspot.com.br/

    ResponderExcluir
  2. A ilustração tá muito fofa, um casal mais real que Zerrie c:
    Você nunca assistiu crepúsculo? '0' que sortuda você! Eu não suporto crepúsculo, mas respeito quem gosta porque minhas amigas gostam... Sinceramente não assista, Cams! É perda de tempo, mas se você gostar de um romance mais meloso que açúcar veja.
    Adorei o tutorial! É muito útil esse menu, diminui bastante espaço na sidebar *u*
    Ah, Cams sou eu a menina que se ofereceu para te ajudar com o blog de capas, okay?

    Beijos.

    ResponderExcluir
  3. Adorei o Tuto..mas ali na Ilustração tem o Niall??
    Não assista Crepúsculo,é perda de tempo.Assisti só o último e quase Vomitei..é muito meloso :/
    Kissus da Maah|Sweet London

    ResponderExcluir