Añadir Subetiquetas a Blogger

Una de las cosas que más demandan los Bloggeros son las subetiquetas de Blogger que no sabemos por qué a Google no le gustan y nunca nos ofrece una respuesta a esta petición tan demanda por los usuarios.

Pues esta mañana buscando por internet he encontrado una posible solución. No es muy eficaz la verdad, pero algo es algo así que aquí os lo dejo.

El script no crea automáticamente las etiquetas, Primero tenemos que crearlas manualmente.


1. Entramos en Blogger > Plantillas> Editar HTLM y buscamos: 


<b:skin><![CDATA[/*


Ahora copiamos el código siguiente antes de  <b:skin><![CDATA[/*


<script src='http://sites.google.com/site/freebloggerhelpbiz/freebloggerhelp/dtree.js' type='text/javascript'/> 


Y guardamos la plantilla. 




2.Ahora vamos a diseñot > Añadir un Gadget > HTML/JAVA Script. Pegamos el código siguiente y guardamos.






<style type="text/css">


/*--------------------------------------------------|
| dTree 2.05 | www.destroydrop.com/javascript/tree/ |
|---------------------------------------------------|
| Copyright (c) 2002-2003 Geir Landrö               |
|--------------------------------------------------*/


.dtree {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 12px;
        width:480px;
    color: #000;
    white-space: nowrap;
}
.dtree img {
    border: 0px;
    vertical-align: middle;
}
.dtree a {
    color: #333;
    text-decoration: none;
}
.dtree a.node, .dtree a.nodeSel {
    white-space: nowrap;
    padding: 1px 2px 1px 2px;
}
.dtree a.node:hover, .dtree a.nodeSel:hover {
    color: #333;
    text-decoration: underline;
}
.dtree a.nodeSel {
    background-color: #c0d2ec;
}
.dtree .clip {
    overflow: hidden;
}


</style>
<div class="dtree">


<p><a href="javascript: d.openAll();">Abrir todo</a> | <a href="javascript: d.closeAll();">Cerrar todo</a></p>


<script type="text/javascript">
<!--


d = new dTree('d');


d.add(0,-1,'Etiquetas');
d.add(1,0,'Node 1','example01.html');
d.add(3,1,'Node 1.1','example01.html');
d.add(5,3,'Node 1.1.1','example01.html');
d.add(6,5,'Node 1.1.1.1','example01.html');
d.add(2,0,'Node 2','example01.html');
d.add(4,0,'Node 3','example01.html');
d.add(7,0,'Node 4','example01.html');
d.add(8,1,'Node 1.2','example01.html');


document.write(d);
//-->
</script>
</div>








Ya está hecho. Ahora tienes que añadir las etiquetas y sus links al código de arriba manualmente.


Concretamente en:


d = new dTree('d');


d.add(0,-1,'Etiquetas');


d.add(1,0,'Node 1','example01.html');
d.add(3,1,'Node 1.1','example01.html');
d.add(8,1,'Node 1.2','example01.html'); 
d.add(5,3,'Node 1.1.1','example01.html');
d.add(6,5,'Node 1.1.1.1','example01.html');


d.add(2,0,'Node 2','example01.html');


d.add(4,0,'Node 3','example01.html');


d.add(7,0,'Node 4','example01.html');


Y esto se hace de la siguiente forma: 


d.add(1,0,'Node 1','example01.html');


Hay dos números después de  d.add. El primer número es de la subetiqueta y el segundo de la etiqueta principal. Tendrás que ir practicando hasta que lo entiendas. Añade el nombre de la etiqueta y el link el link de esta de la siguiente forma: 


d.add(1,0,'Node 1','example01.html');


will be 




d.add(1,0,'Nombre de la etiqueta','Link de la etiqueta');


Todos los nombres están de color rojo y todos los links de color azúl.

Podéis probar como funciona en mi blog, a la derecha. Para cualquier duda, comentad.

Fuente original