DebShop

Vamos começar com html por quê, ao longo do tutorial você já pode ver se tá dando certo no upload preview do seu theme. e é a parte mais fácil.

O tabs vai ser aberto com uma selection, assim como vai ser fechado, então coloque o código da selection no seu html:

<section class="tabs"> <!-- abertura do tabs --> </section><!-- fechamento do tab -->

Dentro dessa selection vai ficar todo o conteudo em html do seu status, então, todo o código que eu for passando do html, você vai colocar entre a abertura e o fechamento do tabs.

As imagens do status vai ser como se fosse nosso menu, cada imagem é um código:

<input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" /> <label for="tab-1" class="tab-label-1"><div class="beok1"><div id="name">NOME</div></div><div class="triangulo"></div></label>

O código da primeira imagem vai ser diferente dos outros por que ele já vai estar aberto sem precisar de clique.

Vamos ao código da segunda imagem:

<input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" /> <label for="tab-2" class="tab-label-2"><div class="beok2"><div id="name">NOME</div></div><div class="triangulo"></div></label>

Não há exatamente muita diferença no segundo não é? Mas vamos trabalhar com ele para ficar mais fácil a compreensão. O termo NOME que está no código, será os nomes dos moderadores, como no preview: debsl, luana, lucas, debsn.  Se percebeu, no primeiro código há vários 1's não é? Já no segundo, há vários 2's, como por exemplo: tab-2, tab-selector-2, tab-label-2, etc. Quando você for colocar o código da 3º imagem, você precisará trocar os 2 do segundo código pelo 3, e na 4º imagem, pelo 4 entendeu? quando for colocar o código da 3 imagem vai pegar o da segunda e mudar, não o da primeira. Vamos ver como ficaria o código do menu (com as 4 imagens):

<!-- menus tabs --> <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" /> <label for="tab-1" class="tab-label-1"><div class="beok1"><div id="name">NOME</div></div><div class="triangulo"></div></label> <input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" /> <label for="tab-2" class="tab-label-2"><div class="beok2"><div id="name">NOME</div></div><div class="triangulo"></div></label> <input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" /> <label for="tab-3" class="tab-label-3"><div class="beok3"><div id="name">NOME</div></div><div class="triangulo"></div></label> <input id="tab-4" type="radio" name="radio-set" class="tab-selector-4" /> <label for="tab-4" class="tab-label-4"><div class="beok4"><div id="name">NOME</div></div><div class="triangulo"></div></label> <!-- fim do menus tabs -->

Deu para pegar? ;)

O menu acabou, vamos ao conteudo do tabs.

No código que eu vou passar, o que precisa trocar é o conteudo:

<div class="clear-shadow"></div><!-- não mexa --> <div class="content"><!-- começo do content onde as coisas ficam --> <div class="content-1"> CONTEUDO <a href="LINKDOPESSOAL"><pessoal>pessoal</pessoal></a> </div> </div><!-- fechamento do content onde fica as coisas escritas --> </section><!-- fechamento do tab -->

O content-1 é a div do conteudo da imagem 1, se o seu status for igual ao meu e tiver mais que um, você só vai repetir esse código do content-1, trocar ele por 2 ou 3 e assim sussesivamente como expliquei encima. Veja colo ficaria o conteudo da imagem 2:

<div class="content-2"> CONTEUDO <a href="LINKDOPESSOAL"><pessoal>pessoal</pessoal></a> </div>

Pronto, o html está pronto!

Vamos ao CSS, aqui você precisa de muita atenção, se mexer nas coisas erradas, seus códigos podem ficar loucos, então, aconselho a sempre que mudar algo, dá upload preview, se não ficar como o planejado, dê Ctrl+Z.

Vamos ao código geral de todo o CSS do tabs, para ele funcionar (não vou dar muita explicação aqui, se quiser saber melhor vai no tthy, lá já tem isso explicado). Coloque no seu CSS:

.tabs {position: relative; width: 250px;} .tabs input {position: absolute; z-index: 1000;width: 0px;height: 0px;left: 0px;top: 0px;opacity: 0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);cursor: pointer;} .tabs input#tab-2{left: 0px;} .tabs input#tab-3{left: 0px;} .tabs input#tab-4{left: 0px;} .tabs label {background: #00022f;height: 50px;position: relative;padding: 3px;float: left;display: block;width: 50px; margin: 1px;margin-left: 5px ; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease;} .tabs label:after {content: '' color: #; background: #;position: absolute;bottom: -2px;left: 0;width: 100%;height: 2px;display: block;} .tabs input:hover + label {opacity: 0.6;} .tabs label:first-of-type {z-index: 4;color: #fff; background: #00022f;} .tab-label-2 {z-index: 3;} .tab-label-3 {z-index: 2;} .tab-label-4 {z-index: 1;} .tabs input:checked + label {background: #ffd52e; z-index: 6; } .tabs input:checked + label .triangulo {width: 0;height: 0;border-left: 10px solid transparent;border-right: 10px solid transparent;border-bottom: 15px solid #00022f;margin-top: 3px;margin-left: 15px;} .clear-shadow {clear: both;} .content {background: #00022f; margin-top: 7px; position: relative; width: 96%; z-index: 5; padding: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; font-family: 'verdana'; font-size: 9px; text-align: justify; color: #ffd52e; text-shadow: 1px 1px 0px #00022d;} .content div {background: #00022f; position: absolute;top: 0;left: 0;padding: 6px;z-index: 1;opacity: 0; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-transition: opacity linear 1s;-moz-transition: opacity linear 1s;-o-transition: opacity linear 1s;-ms-transition: opacity linear 1s;transition: opacity linear 1s;} .content pessoal {float: right; background: #d6342c; padding-right: 2px; padding-left: 2px; padding-bottom: 1px; margin-top: 3px; color: #fff; margin-right: -0px; font-family: 'PF Arma Five'; font-size: 8px; text-shadow: 1px 1px 0px #c10900;} .tabs input.tab-selector-1:checked ~ .content .content-1, .tabs input.tab-selector-2:checked ~ .content .content-2, .tabs input.tab-selector-3:checked ~ .content .content-3, .tabs input.tab-selector-4:checked ~ .content .content-4, .tabs input.tab-selector-5:checked ~ .content .content-5 {z-index: 100;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter: alpha(opacity=100);opacity: 1;-webkit-transition: opacity ease-out 0.6s 1s;-moz-transition: opacity ease-out 0.6s 1s;-o-transition: opacity ease-out 0.6s 1s;-ms-transition: opacity ease-out 0.6s 1s;transition: opacity ease-out 0.2s 1s;}

As cores serão as únicas coisas necessárias de ser trocadas, não mexa em mais nada a não ser que você saiba o que está fazendo (mesmo assim é melhor não). O .tabs label é o menu, a cor, será correspondente a cor da borda das demais imagens não selecionadas. O .tabs label:frist-of-type a cor deve ser igual ao do .tabs label. O .tabs label:checked + label é a imagem clicada, deverá ser diferente das demais. O .tabs label:checked + label .triangulo é a setinha, que deve ser igual a cor do fundo da caixa do conteudo. O .content é a caixa do conteudo, o background deve ser igual a setinha, e a cor da fonte fica a seu critério. O .content pessoal é a caixinha escrito do tumblr pessoal, o background e a cor fica a seu critério.

Agora, vamos as imagens. Elas vão ficar em divs, cada imagem em uma div ok? o código delas são:

.beok1 {background: url('LINKIMAGE1'); width: 50px; height: 50px;} .beok1 #name {background: transparent; width: 50px; font-family: 'PF Arma Five'; font-size: 8px; text-align: center; line-height: 90px; color: #fff; text-shadow: 1px 1px 0px rgba(0,0,0,0.6) ;}

Você só vai precisar duplicar esse código acima, mudar as imagens e os numeros corespondentes, 1, 2, 3, 4.. Vamos ver, como ficaria a 2:

.beok2 {background: url('LINKIMAGE2'); width: 50px; height: 50px;} .beok2 #name {background: transparent; width: 50px; font-family: 'PF Arma Five'; font-size: 8px; text-align: center; line-height: 90px; color: #fff; text-shadow: 1px 1px 0px rgba(0,0,0,0.6) ;}

Deu para entender?

Então, após esse looooooooongo tutorial, acabado, eu realmente espero que tenham entendido tudo.

Se esquecerem os créditos eu realmente mato um, por que você não faz ideia como foi dificil fazer isso, e o tutorial não foi tampouco fácil! RUM