Tutoriais  18/06/2007 

JavaScript Tabifier

Aprenda a colocar as abas que tanto podem ser usadas no seu perfil como nas suas páginas extras.
Página do script barelyfitz.com

01. Faça o download do arquivo tabber e descompacte.
02. Envie o arquivo tabber.js para o seu servidor.
03. Coloque depois da tag head o seguinte código:

<script type="text/javascript">
document.write('<style type="text/css">.tabber{display:none;}< \/style>');
</style></script>
<script type="text/javascript" src="http://www.SEUSITE.com/tabber.js"></script>

Não esqueça de substituir "SEUSITE" pelo seu endereço correto.

04. Adicione ao seu css o conteúdo do arquivo "example.css" ou faça o upload dele para o seu servidor e chame para o seu template usando:

<link rel="stylesheet" href="http://www.SEUSITE.com/example.css" type="text/css" media="screen" />

Edite no css as cores e os estilo que você achar melhor.

05. Onde você quer que apareçam as abas use:

<div class="tabber">
<div class="tabbertab"><h3>Aba 1</h3>Conteudo 1 aqui</div>
<div class="tabbertab" title="Aba 2">Conteudo 2 aqui</div>
<div class="tabbertab" title="Aba 3">Conteudo 3 aqui</div>
</div>

06. Abaixo do código das abas coloque:

<script type="text/javascript"> /* Since we specified manualStartup=true, tabber will not run after the onload event. Instead let's run it now, to prevent any delay while images load. */ tabberAutomatic(tabberOptions); </script>

07. (Opcional) Se você quiser que o que o conteúdo das abas carregue mesmo se não estiver concluído, coloque depois de head o seguinte:

<script type="text/javascript">
var tabberOptions = {manualStartup:true};
</script>
<script type="text/javascript" src="tabber.js">
</script>

Obrigada http://skywards.iblogger.org por essa sugestão.

08. O resultado será semelhante a esse:


  • Tutoriais  17/02/2008

    Pop-it menu

    Menu em javascript, você pode usar para seus links de login, ou como menu de navegação mesmo. Página do script Dynamicdrive e foi totalmente modificado por mim, por…

    Continue Lendo

07/03/2009 ・ 16:40

Onde você quiser, desde que no passo 03, você coloque o endereço correto do arquivo.

07/03/2009 ・ 16:30

Não funcionou, onde, exatamente, coloco o tabber.js? ._.’
Brigada

19/03/2009 ・ 15:30

É no css se não me engano em ul.tabbernav li a
Mas no caso do seu blog, eu tenho a impressão de que está dessa forma porque ela está centralizada.

19/03/2009 ・ 14:40

Olá Tamara! Muito legal seu blog. Bom, adicionei este plugin no meu blog. Porém a distância entre as abas é muito grande, e está fazendo com que a aba fique fora da sidebar. Como faço pra diminuir a distância entre uma aba e outra?

Estou no aguardo!

Abração,

Ramon :37:

29/10/2009 ・ 21:37

Oi Tamara,
desculpa a pergunta boba mais
como assim envio ele pro servidor?
:7:

30/10/2009 ・ 06:50

Envia para o seu servidor de hospedagem.

Michelly
06/01/2010 ・ 17:29

Oi Tamara, não entendi onde encontro a tag head :14:

08/01/2010 ・ 07:37

É sempre no início da codificação do seu tema ou layout, uma das primeiras linhas.

21/01/2010 ・ 13:56

Oi Tamara. Desculpa incomodar é que eu to com um probleminha. Eu instalei as abas, coloquei os códigos nos lugares certos, segui direitinho seu tutorial, mas as abas aparecem uma em cima da outra (vertical) elas não ficam direito no blog não sei porque. Será que pode me ajudar? :2:

25/01/2010 ・ 12:09

Se você já tiver alguma configuração de css para .li, pode ser que dê esse tipo de erro.