Mostrando Links como pestañas

Este es un pequeño, y poco complicado hack que permitira darle estilo a tus links, la utilidad de esto nos ayuda a tener varios links que podemos añadir y borrar de una manera rapida y sencilla utilizando el widget que nos proporciona blogger, pero con un mejor estilo, podemos tener los links de manera horizontal o vertical, exactamente como las categorias.

Ahora bien, los pasos a realizar son los siguientes (basados en pestañas verticales):

Nos dirigimos a:

Plantilla--Elementos de la pagina

Luego clickamos en "Añadir un nuevo elemento de pagina" y seguidamente escojemos el widget "Lista de Vinculos"

Blogger le otorga un identificador a cada "widget" que nosotros creamos, dependiendo del numero de widgets que tengamos en nuestro blog, por ejemplo si fuera la unica "Lista de Vinculos" que tengamos en nuestro blog, el codigo seria el siguiente:

<b:widget id='LinkList1' locked='false' title='Links' type='LinkList'/>

Notese que el identificador corresponde a "LinkList1" el cual nos indica que es la primera Lista de Vinculos creada. (paso ya antes mencionado)


Ahora escogemos el estilo de las pestañas (verticales):

En este caso tenemos 14 diseños el cual nos los brinda csspicstock.blogspot.com, yo escogi el Menu4:

  /*- Menu 4--------------------------- */
  
  
  #menu4 {
  
  width: 200px;
  
  margin: 10px;
  
  border-style: solid solid none solid;
  
  border-color: #000;
  
  border-size: 1px;
  
  border-width: 1px;
  
  }
  
  
  #menu4 li a {
  
  height: 32px;
  
  voice-family: "\"}\"";
  
  voice-family: inherit;
  
  height: 24px;
  
  text-decoration: none;
  
  }
  
  
  #menu4 li a:link, #menu4 li a:visited {
  
  color: #CCC;
  
  display: block;
  
  background: url(http://photos1.blogger.com/blogg1600/menu4.gif);
  
  padding: 8px 0 0 10px;
  
  }
  
  
  #menu4 li a:hover {
  
  color: #FFF;
  
  background: url(http://photos1.blogger.com/1600/menu4.gif) 0 -32px;
  
  padding: 8px 0 0 10px;
  
  }
  

El cual colocamos antes de ]]></b:skin>

Ahora si vamos a comenzar con lo mas complicado...

Nos dirigimos a:

Plantilla--Edicion de HTML--Expandir plantillas de artilugios

Buscamos el siguiente codigo:

  <b:widget id='LinkList1' locked='false'
  title='Links' type='LinkList'>
  
  <b:includable id='main'>
  
  
  <b:if
  cond='data:title'><h2><data:title/></h2></b:if>
  
  <div class='widget-content'>
  
  <ul>
  
  <b:loop values='data:links' var='link'>
  
  <li><a
  expr:href='data:link.target'><data:link.name/></a></li>
  
  </b:loop>
  
  </ul>
  
  <b:include name='quickedit'/>
  
  </div>
  
  </b:includable>
  
  </b:widget>
  

Y lo reemplazamos con el siguiente:

  <b:widget id='LinkList1'
  locked='false' title='Links' type='LinkList'>
  
  <b:includable id='main'>
  
  <div id='menu4'>
  
  <b:if
  cond='data:title'><h2><data:title/></h2></b:if>
  
  <div class='widget-content'>
  
  <ul>
  
  <b:loop values='data:links' var='link'>
  
  <li><a
  expr:href='data:link.target'><data:link.name/></a></li>
  
  </b:loop>
  
  </ul>
  
  <b:include name='quickedit'/>
  
  </div>
  
  </b:includable>
  
  </b:widget>
  

Recordad que LinkList1 corresponde al identificador de la Lista de Vinculos (como antes mencionado)

Listo, Guardamos todos los cambios y ya tenemos nuestras links en forma de pestañas ;)