Tutorial menu abas

Yoo!

Hoje trouxe um tutorial que eu acho que a maioria por aqui já conhece: O famoso menu de abas. Esse menu é o que usamos no gadget 'Outros', ele faz o que deveria ser um gadget contínuo ser um gadget com abas.

Usam bastante ele por ocupar muito pouco espaço, além de ser fofo e super fácil de fazer. Espero que entendam a minha explicação, posso tirar suas dúvidas pelos comentários caso não dê certo.

Enjoy ~ 

1. Adicione um gadget de HTML/JavaScript e nele, cole:

<link rel="stylesheet" href="http://drikoti.net/Tabber/tabber-cinza.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://drikoti.net/Tabber/tabber.js"></script>

Salve e prossiga. Esse código é do javascript, será o que criará o efeito na formatação.

2. Adicione outro gadget de HTML/JavaScript e dessa vez, cole:

<div class="tabber">

<div class="tabbertab" title="Aba 1">

<br>

Conteúdo da aba 1

</>

</div>

<div class="tabbertab" title="Aba 2">

<br />

Conteúdo  da aba 2</div>

<div class="tabbertab" title="Aba 3">

<br />

Conteúdo da aba 3</div>

</div>

<center><br />

Troque Aba 1, Aba 2 e Aba 3 pelos títulos das abas e coloque o conteúdo no local indicado.

Para adicionar uma nova aba, depois do primeiro div da aba 3, cole:

<div class="tabbertab" title="Aba nova">
<br>
Conteúdo da aba nova
</>
</div>

Bjo de Luz