Estes
dias estava a dar uma olhada pelo blog quando reparei que a sidebar
estava muito carregada de links. Como eu gosto das coisas arrumadinhas
decidi agrupar os blocos das categorias, arquivos e dos últimos
comentários, tornando a barra lateral do blog bastante mais limpinha e
agradável.Para fazer isto optei por implementar um sistema de navegação por tabs, coisa que se faz facilmente recorrendo a um script java e um pouco de css. Ao optar pela navegação por tabs, é possível colocar muito mais informação no mesmo espaço, por esta fica organizada por separadores.
Existem várias soluções disponíveis e só temos de escolher a que nos der mais jeito, o que pode ser um problema. Como este processo pode demorar muito tempo vou deixar aqui registrado qual a opção que tomei e como o fiz, de maneira a que quem quizer uma coisa igual possa facilmente replicar.
Implementar a tab navigation
Decidi implementar a tab navigation recorrendo à biblioteca java do Yahoo, a The Yahoo! User Interface Library (YUI), que tem um componente muito bom para as tabs, o TabView. Escolhi este porque funcionou muito bem e além disso o ficheiros .js são levezinhos.Para começar podem fazer o download dos ficheiros necessários. São 3 .js e 1 para o .css. Podem fazer o upload deste ficheiros directamente para a directoria onde têm o theme do vosso blog. Depois disso basta adicionar na <head> do vosso theme o código (header.php):
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/yahoo-dom-event.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/yahoo-element-min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/yahoo-tabview-min.js"></script>
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/tabs.css" type="text/css" media="screen"/>Na sidebar (sidebar.php) do theme colocar o seguinte código, onde quiserem que apareca a div com as tabs.
<script type="text/javascript">
var myTabs = new YAHOO.widget.TabView("tabspace");
</script>
<div id="tabspace" class="yui-navset">
<ul class="yui-nav">
<li class="selected"><a href="#tab1"><em>Categorias</em></a></li>
<li><a href="#tab2"><em>Artigos por Mês</em></a></li>
<li><a href="#tab3"><em>Blogs Amigos</em></a></li>
</ul>
<div class="yui-content">
<div class="tabs">
<ul><?php wp_list_cats('sort_column=name'); ?></ul>
</div>
<div class="tabs">
<ul><?php wp_get_archives('type=monthly'); ?></ul>
</div>
<div class="tabs">
<ul><?php wp_list_bookmarks('title_li=&categorize=0'); ?></ul>
</div>
</div>
</div>Neste exemplo em cada tab vai aparecer as categorias do blog, os arquivos e na terceira o blogroll. No entanto podem alterar facilmente para mostrar aquilo que quiserem.
Para tudo funcionar têm de alterar a tag <body> para <body class=”yui-skin-sam”>.
Demo e Ficheiros
Podem ver o demo aqui e fazer o download dos ficheiros necessários aqui.Notas
- Este exemplo está preparado para três tabs, mas podem facilmente adicionar mais, basta para isso replicar o código.
- Para alterar as cores basta editar o ficheiro css.
- Se não conseguirem com os ficheiros que forneci podem ir à página oficial e retirar os exemplos que a Yahoo lá colocou.
Nenhum comentário:
Postar um comentário