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
