Aprenda a colocar as abas que tanto podem ser usadas no seu perfil como nas suas páginas extras.
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>Conteúdo 1 aqui</div>
<div class="tabbertab" title="Aba 2">Conteúdo 2 aqui</div>
<div class="tabbertab" title="Aba 3">Conteúdo 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:
16-02-2010 | 09:16 
Desculpa o incomodo mas… como eu envio o arquivo pro servidor? @_@