Hoje vou dar a conhecer o conceito de DomTabs, que hoje em dia é frequentemente utilizado em blogs, tanto em WordPress, como em outras aplicações para blogging.
Como pode ver na imagem em cima, retirada do blog ProBlogger.net, as DomTabs permitem ao utilizador uma fácil navegação por diversas temáticas, sem que na realidade o utilizador necessite de navegar em diversas páginas. A grande vantagem das DomTabs é exactamente essa. O utilizador neste caso poderá ver os melhores artigos de sempre do ProBlogger, como também os artigos o mês, artigos para iniciantes e os favoritos do Darren Rowse, tudo isso sem sair da mesma página. Aquilo a que eu geralmente chamo de navegação simplificada.
A DomTabs para começar, é um scritp gratuíto. Além de funcionar como uma grande vantagem para o leitor, porque não exige uma navegação continuada, a DomTabs poupa também muito espaço ao seu blog. Numa DomTab é possível colocar imensa informação organizada em pequenas separadores, tal como representado na imagem.
A DomTabs é um scritp gratuíto e pode ser utilizada em qualquer website, blog ou outro sistema CMS. No entanto, vou introduzir o conceito para o WordPress, e depois você decide se pretende alterar alguma coisa ou não.
Instalação da DomTab no seu blog WordPress
——————————–
[1] Faça download do script DomTabs e descompacte o ficheiro .zip
[2] Faça o upload do ficheiro domtab.js para a directoria do seu template WordPress
[3] Descarregue o ficheiro domtab_love.css e coloque-o na directoria do seu template também
[4] No header do seu blog (header.php), coloque o seguinte código após o </head>
<script type=”text/javascript” src=”<?php bloginfo(’template_directory’); ?>/domtab.js”></script> <link rel=”stylesheet” type=”text/css” href=”<?php bloginfo(‘template_directory’); ?>/domtab_love.css” media=”screen” />
[5] Na sidebar (sidebar.php) do seu blog ou num widget, coloque o seguinte código
<div class=”domtab”>
<ul class=”domtabs”>
<li><a href=”#t1“>Tab 1</a></li>
<li><a href=”#t2″>Tab 2</a></li>
<li><a href=”#t3″>Tab 3</a></li>
</ul>
<div>
<a name=”t1″ id=”t1“></a>
<p>Inserir conteúdos da primeira tab aqui,
por exemplo ficheiros para download.</p>
</div>
<div>
<a name=”t2″ id=”t2“></a>
<p>Inserir conteúdos da segunda tab aqui.</p>
</div>
<div>
<a name=”t3″ id=”t3“></a>
<p>Inserir conteúdos da terceira tab aqui.</p>
</div>
</div>
Notas
——————————–
Se por ventura quiser fazer uso de mais do que 3 Tabs, como fez o Darren Rowse por exemplo, apenas necessita de copiar a secção de código da Tab e depois a secção de conteúdo na Tab. Pode adicionar o número de tabs que desejar, ou inclusivamente fazer um website assim, com conteúdos navegáveis a partir de DomTabs.
O ficheiro domtab_love.css que está disponível para download, pode ser também editar num editor de ficheiros CSS. O ficheiro inclui todas as instruções em Português, pelo que é simples de utilizar.
Eu para editar ficheiros utilizo o fantástico Notepad++, que além de tudo, é gratuito.
Se por ventura tiver algum problema com a utilização da DomTabs no seu blog, deixe um comentário.
Estou para implementar potencialmente aqui no blog, mas tenho de ver primeiro que conteúdos pretendo realçar 
Créditos
——————————–
Página DomTabs: DomTabs
Ficheiros CSS: ProBlogDesign
Tradução e Compilação: Paulo Faustino
Nuvem
Parabéns pelo site sou visitante assidua!
hospedagem de sites
não deu certo o que posso estar fazendo de errado?
Marcelo França
Poxa, vou ter que acabar migrando para o WordPress, é impressionante a quantidade de material informativo disponível para ele.
Belo post!
Abraços!
Marcelo França publicou um post sobre..Você faz igual?
Felipe Fernandes Horn
Pensei que sempre teria que inserir esses recurso a mão mesmo. Finalmente um plug-in pra tornar qualquer tema muito mais organizado e bonito!!!
Valeu Paulo!
@Marcelo França
O WordPress sofreu uma explosão. A pouco mais de um ano, as informações para ele eram escassas, muito pouco mesmo. Mas graças a iniciativas como a do Paulo, isso muda, e o momento está ótimo, inclusive no Brasil.
Abraço
Felipe Fernandes Horn publicou um post sobre..WordPress.com com Google Gears
Paulo Faustino
@ Nuvem
Obrigado pelo comentário e pelas palavras de apreço colega.
@ Marcelo França
Obrigado pelo comentário colega. WordPress é simplesmente a melhor plataforma de blogging do mundo.Está à espera do quê para mudar, colega?
@ Felipe Horn
Obrigado pelo comentário colega. Brevemente vou colocar aqui no blog também. Esta DomTab é fantástica e tenho umas ideias interessantes para utilizá-la aqui no blog. Fique atento porque pode servir como uma boa ideia para si também.
Se por ventura implementar nos seus blogs, depois deixe um referência para eu ver
Obrigado a todos!
Paulo Faustino publicou um post sobre..Lançamento do Website Grande-Ecrã.com
cenourinha
Bem, isto vai fazer falta.
Necessito é de formatar isto bem com o css para sair um bom resultado.
cenourinha publicou um post sobre..Matroska no DivX 7
Paulo Faustino
Olá cenourinha. DomTabs são fantásticas. Tenho de testar umas ideias que tenho aqui para o blog, a ver se ficam interessantes
Paulo Faustino publicou um post sobre..Lançamento do Website Grande-Ecrã.com
tiago
boas, tenho um doomtab no meu site que funcionava correctamente até que de repente deixou de funcionar. podes consultar a minha no meu site. quando clico em comentarios ou tags, ele simplesmente não abre esses separadores :s
berto87
Boas…
Será que só eu é que não consigo instalar a domtab?
Eu percebo pouco de programação mas costumo desenrrascar-me!
Quando dizes para colocar os dois ficheiros (domtab_love.css e domtab.js) na directoria do tema, é na pasta do tema ou em alguma subpasta?
Despois inseri a 1ª parte do código logo a seguir ao e a segunda parte entre o código do about e tags.
Achas que estou a fazer alguma coisa mal?
Agradeço a ajuda.
Cumps!!
Ramon
Boaa! MAs uso o Tabber. Possui a mesma função e é bem legal também!
Abraços