Javascript Tutoriais

JavaScript Tabifier

18 de June de 2007

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:

heart


Leia Também

Deixe seu comentário

Polyanna
15/02/2010 ・ 18:54

Desculpa o incomodo mas… como eu envio o arquivo pro servidor? @_@

16/02/2010 ・ 09:16

Por FTP.

17/07/2010 ・ 19:29

Oi Tamara! Estou com MUITA dificuldade de aplicar as abas no Blogspot! fica dizendo que de acordo com o XML que tem itens “abertos” olha:
“Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The content of elements must consist of well-formed character data or markup.”

Já inseri o código puro, hospedado em outro site e nada… tá dificil. O blogspot tem algum bloqueio com javasrcipt?

Beijo!

18/07/2010 ・ 10:03

Não sei o que pode estar acontecendo, nunca usei blogspot.

23/03/2015 ・ 11:01

[…] Portanto, não adianta transcrever aqui todo o tutorial de novo, já que está bem explicadinho lá. Para saber como fazer, é só acessar esse link. […]