JMiur [E]

Son muchas las veces que me han preguntado si era posible crear un sistema de etiquetas más flexibles en Blogger y, por lo general, se refieren a tener la posibilidad de tener categorías y subcategorías. La respuesta siempre fue NO, eso no puede hacerse porque Blogger no lo contempla y no nos da la posibilidad de acceder a los datos de manera sencilla y rápida.

Pensando un poco en el tema, se me ha ocurrido hacer un experimento y después de algunas idas y vueltas, creé un blog de pruebas para ver si era posible jugar un poco con las etiquetas. El resultado no es nada maravilloso pero, tal vez, sirva como un primer boceto para seguir investigando.

Leyendo el código de un elemento Label, vemos que Blogger hace un bucle por las etiquetas y lee tres datos: data:label.name es el texto de cada una, data:label.url es la dirección URL y data:label.count es la cantidad de posts en cada etiqueta. De esos datos, el único que realmente importa es el nombre así que ¿por que no guardarlos en un array de JavaScript para después manipularlos? Para simplificar un poco, un array es, una lista con un subíndice; por ejemplo imagen[0], imagen[1], imagen[2], etc.

Imaginé lo siguiente: el blog posee una cantidad de etiquetas comunes pero, algunas de ellas, se agrupan de alguna manera y contienen dos partes, la categoría a la que pertenecen y la subgcategoría, separadas ambas por un carácter especial, un carácter que, normalmente no usaría, por ejemplo, el guión bajo (_). De esta manera, ese blog de pruebas en particular tiene una serie de posts clasificados así:

Africa

America_Brasil
America_Canada

Asia_India
Asia_Indonesia
Asia_Japón

Europa_España
Europa_Francia
Europa_Portugal

Oceanía

Los continentes, serían las categorías principales y los paises las subcategorias. Para complicarlo un poco más, dos de esos continentes no tienen subcategorias. Hasta aquí, no hay problema, puedo ver todos los posts de cualquiera de ellas; un enlace a http://nombre/labels/Europa_Francia me mostrará los posts de esa categoría pero, lo que quiero es mostrarlos agrupados por continente y luego listar sólo esos.


El modelo del ejemplo puede verse aquí. En la sidebar hay tres elementos con etiquetas:
  • Etiquetas con Secciones sólo muestra las categorías (los continentes); haciendo click en cada una de ellas, se despliega para mostrar los enlaces a las subcategorías (los países).
  • Etiquetas sin Secciones sólo muestra las etiquetas que no tiene subcategorías.
  • Etiquetas Normales es el elemento standard de Blogger y no tiene uso.
Reproducir el ejemplo es sencillo; como no hay restricciones en cuanto a su cantidad, creamos tres elementos Labels desde Elementos de la página de la plantilla y les ponemos nombres para diferenciarlos. Luego, en la Edición HTML de la plantilla, desplegamos los artilugios y buscamos esos elementos que dirán algo así:
<b:widget id='Label1' locked='false' title='el_nombre' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span><data:label.name/></span>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
<span>(<data:label.count/>)</span>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
Usaremos un elemento Label para mostrar las categorías desplegables, otro para las categorías simples y el tercero, será el común que sólo dejaremos para comparar resultados. En los dos primeros, eliminaremos todo lo indicado en rojo y allí colocaremos los códigos correspondientes.

El contenido del elemento con las categorías desplegables puede descargarse desde este archivo de texto .


<script type='text/javascript'>

// definición de las variables utilizadas
var elBlog =&quot;<data:blog.homepageUrl/>&quot;; // la URL del blog
var listaEtiquetas = new Array(); // el array que contendrá las etiquetas
var listaEtiquetasNum=0; // contador auxiliar
var laSeccion = &quot;&quot;; // guarda los nombres de las categorías
var elEnlace =&quot;&quot;; // el enlace a cada subcategoría

// usamos los datos de Blogger para recopilar todas las etiquetas del blog
<b:loop values='data:labels' var='label'>
// leemos el nombre de cada una de las etiquetas
var elNombre = &quot;<data:label.name/>&quot;;
// lo guardamos en el array
listaEtiquetas[listaEtiquetasNum] = elNombre;
listaEtiquetasNum ++; // incrementamos el contador
</b:loop>

// función auxiliar para expandir y contraer las secciones
function linkLista(cual) {
var idListaUL = document.getElementById(cual);
if(idListaUL.style.display == &#39;none&#39;) {
idListaUL.style.display = &#39;block&#39;;
}else{
idListaUL.style.display = &#39;none&#39;;
}
return false;
}

</script>

<!-- el script está dividido en dos partes para agregarlo en la plantilla sin errores -->

<script type='text/javascript'>
//<![CDATA[

// leemos todas las etiquetas y las separamos en dos partes
  for (var i = 0; i < listaEtiquetas.length; i++) {
var cual=listaEtiquetas[i]; // leemos la etiqueta completa
var auxiliar = cual.split("_"); // la separamos en dos
listaEtiquetas[i]=new Array(1); // ampliamos el array 
listaEtiquetas[i][0] = auxiliar[0]; // guardamos el nombre de la categoría
listaEtiquetas[i][1] = auxiliar[1]; // guardamos el nombre de la subcategoría
}

// leemos el array generado y escribimos el documento HTML
for (var i = 0; i < listaEtiquetas.length; i++) {
var leerSeccion = listaEtiquetas[i][0]; // el nombre de la categoría
var leerItem = listaEtiquetas[i][1]; // el nombre de la subcategoría
// si no hay una sucbategoría, leerItem no tendrá un valor y lo salteamos
if (leerItem!=undefined) {
// sólo mostramos categorías y subcategorías
if (laSeccion != leerSeccion) {
// si todavía no lo hicimos, creamos el enlace de la categoría desplegable
document.write("</ul>"); // por las dudas, cerramos cualquier lista abierta
laSeccion = leerSeccion; // el nombre de la categoría (el continente)
// creamos un enlace con una clase CSS llamada listadoSECCION
// que servirá para desplegar y contraer la categoría
document.write("<a class=\"listadoSECCION\" title=\"Expandir/Contraer la sección\" href=\"javascript:void(0);\" onclick=\"return linkLista('" + laSeccion + "');\">" + laSeccion + "</a>");
// iniciamos el bloque oculto con la lista de subcategorías
// a las que le establecemos una clase CSS llamada listadoBloqueITEMS
document.write("<ul class=\"listadoBloqueITEMS\" id=\"" +  laSeccion + "\" style=\"display:none;\">");
} 
// determinamos la URL de cada enlace
elEnlace = elBlog + "search/label/" + laSeccion + "_" + leerItem
// escribimos cada item de la lista con una clase CSS llamada listadoITEM
document.write("<li class=\"listadoITEM\"><a href=\"" + elEnlace + "\">" + leerItem + "</a></li<");
}
}

//]]>
</script>

El contenido del elemento con las categorías no-desplegables puede descargarse desde este otro archivo de texto .


<ul class='listadoBloqueITEMS'>
<script type='text/javascript'>
//<![CDATA[
// leemos el array generado y escribimos el documento HTML
for (var i = 0; i < listaEtiquetas.length; i++) {
var leerSeccion = listaEtiquetas[i][0]; // el nombre de la categoría
var leerItem = listaEtiquetas[i][1]; // el nombre de la subcategoría
 // si no hay una subcategoría, leerItem no tendrá un valor y lo mostramos
if (leerItem==undefined) {
laSeccion = leerSeccion; // el nombre de la categoría
// determinamos la URL de cada enlace
elEnlace = elBlog + "search/label/" + laSeccion
// escribimos cada item de la lista con una clase CSS llamada listadoITEM
document.write("<li class=\"listadoITEM\"><a href=\"" + elEnlace + "\">" + laSeccion + "</a></li>");
}
}
//]]>
</script>
</ul>

Ambos scripts están armados de manera muy sencilla y sólo usan instrucciones elementales para que puedan comprenderse y documentados hasta donde es posible.

Lo único que faltaría es establecer las propiedades de las clases CSS que serán personales pero, pueden resumirse de esta forma:
<style type="text/css">

/* los pseudo-botones para desplegar las subcategorías */
a.listadoSECCION, a.listadoSECCION:visited, a.listadoSECCION:link {
background-color: beige;
border: 2px ridge Brown;
color: DarkRed;
display: block;
[... otras propiedades ...]
}
a.listadoSECCION:hover {
text-decoration: none;
[... propiedades para el efecto mouseover...]
}

/* el bloque oculto con la lista de subcategorías */
ul.listadoBloqueITEMS {
list-style-position:inside;
[... propiedades varias ...]
}

/* cada item de las subcategorías */
li.listadoITEM {
[... propiedades varias ...]
}

/* cada item es un enlace */
li.listadoITEM a, li.listadoITEM a:visited, li.listadoITEM a:link {
text-decoration:none;
[... propiedades varias ...]
}
li.listadoITEM a:hover {
[... propiedades para el efecto mouseover...]
}

</style>
En verdad, como sólo se trata de una vaga idea, espero que alguien le saque provecho o plantee alguna alternativa más razonable idea

Ver ejemplo en Jugando con la etiquetas

102 comentarios:

La Blogueria  

Hola! pues qué quieres que te diga, será mejorable, pero... desde mi punto de vista, ¡ya es un gran, gran avance! Creo que esto era lo que me pedia Mefistum una vez y yo le dije que no tenía idea de cómo hacerlo...

Ahora sí parece que tengamos categorías en Blogger :), y las etiquetas dentro de cada categoría.

Enhorabuena y gracias!

Responder
Juanchi  

heyy jmiur como estas? bueno si la verdad q totalmete feliz por este post que publicaste!! muy util... por otra parte (y nada que ver con el post)... Existira la posibilidad de generar una especie de LOGGIN como en wordpress pero para blogger??..He visto blogs en wordpress q tienen la posibilidad d que sus usuarios se registren y mediante una Pass accedan a la lectura completa del blog....

Responder
Gem@  

Pues si, a mi también me lo han pedido en repetidas ocasiones y la verdad la respuesta siempre era un NO.
NO subcategorías, NO se como puede hacerse.
Ahora la cosa es bien distinta ¿hay algo que no puedas conseguir J.Miur?

Responder
.gpb  

Hola!! a mi blogger me va pq no soy ningun dedicado al tema...pero tengo entendido que wordpress es mas groso a nivel creativo, mas accesibildad...puede ser???

Saludos y un abrazo.

Responder
LacraX07  

Es un pequeño logro pero sirve por el momento , aunque para ese tipo de cosas es mejor wordpress :D .Lastima que blogger no pueda hacer este tipo de cosas pero esto puede tomar forma.

Responder
Mar  

Tu trabajo para mejorar blogger es incomparable. Sencillamente, gracias.

Responder
JMiur  

Sólo es una idea bastante precaria pero, podría implementarse perfectamente sin hacer grandes cambios así que, es posible. De cualqueir manera, no sé si las categorías o etiquetas son una respuesta al "orden" necesario porque hay un momento en que terminamos mezclándolas o no sabemos cómo clasificar las cosas.

Tal vez, "el desorden" sea sinónimo e blog, a veces, me molesta pero otras veces ... me gusta, tal vez sea parte del encanto :D

Juanchi: la única forma de hacer eso es establecerlo como privado. en ese caso, si mal no recuerdo, es posible darle acceso hasta 100 lectores, nada más.

gpb: son dos herramientas diferentes, con posibilidades diferentes y limitcioens diferentes ¿Cuál es la mejor? la que te sirva, es decir, aquella con la que puedas conseguir lo que quieres hacer. Personalmente, uso ambas. También tengo en mi casa un destornillador y un martillo :)

lacrax07: diría lo mismo que el caso anterior; ¿mejor? ¿peor?, son subjetividades. El sistema perfecto aún no lo ha inventado nadie así que, nos corresponde a nosotros, a cada uno, sacarle el mejor provecho posible a las herramientas de que disponemos.

Responder
Aymará  

Gracias JMiur!!!!! Hace mucho que estoy buscando algo asi para ordenar de una vez por todas mis categorías. Es notable, es justo lo que estaba buscando :D . Es que verás que era de tener varios blogs con diferente tipos de intereses en cada uno, pero decidi unificarlos en uno solo... las categorías eran una pesadilla!!!! Ahora puedo ordenarlas!!!!!
Gracias nuevamente.
Lo pondré en práctica apenas pueda.

Responder
JMiur  

Me alegro que pueda servirte, Aymará. Espero que nos cuentes cómo te ha ido con el tema, sería interesante verlo aplicado :)

Responder
k_nelita  

Hola JMiur, si ,es esto lo que quería, creo :S
Pero tengo algunas dudas, hay que poner las tres clases de etiquetas como pusiste en el blog de pruebas?
Yo creo que todas mis etiquetas tendrán subcategorías, bueno y aunque no fuera así, es necesario poner las etiquetas normales también? O sea la tercer opción que ponés aquí.
Mientras me contestas voy a probar a ver que sale. ;)
Gracias!! :D

PD: El código que está en el archivo de texto sale con caracteres raros, lo voy a copiar del post directamente.
Tal vez sea problema de mi pc, le estuve haciendo una limpieza demasiado profunda creo, porque me faltan cosas del Office como el PPS por ejemplo, y ahora lo de los caracteres, me parece que voy a tener que restaurar el sistema de nuevo...

Responder
JMiur  

Recuerda que el tema ese es sólo un experimento. La idea es que TODAS son etiquetas y, de alguna manera, nosotros definimos cuales son las PRINCIPALES y luego las mostramos de alguna manera. Es confuso de explicar :D

Responder
k_nelita  

Si, será un experimento pero te sale bien, ahora lo de que es confuso de explicar, no tengo dudas ya que no entiendo muy bien.
Pongo las tres clases de etiquetas o no? Hagamoslo mas simple, trata porfi de explicarme!
Y que hago con el otro código que puse antes para las etiquetas desplegables?? Lo reemplazo por todo esto?

Saludos y gacias por estar siempre ahí o aquí...

Responder
JMiur  

La verdad es que es algo que no puedo explicar muy bien y sobre lo que sigo pensando. En principio,, como puedes tener múltiples elemento Etiquetas, no es necesario eliminar ningún modelo y podrías intentar con ambos sin problema ya que son independientes. Yo diría que no reemplazaras ninguno y que los dejaras hasta tanto decidir cuál funciona mejor o se adapta a tu necesidad.

Espero poder escribir añgo al respecto lo más pronto posible :)

Responder
Quique  

Sólo quería agradacerte todo lo que haces. Antes de conocer tu blog no tenía ni idea de códigos HTML's ni nada parecido y gracias a ti he aprendido un montón de cosas y he conseguido mejorar muchísimo el mío. Un millón de gracias, de verdad.

PD: Esto de las etiquetas lo voy ha poner en práctica ahora mismo. Sólo quisiera preguntarte una cosa.
En mi blog, al principio de cada post siempre aparecen las etiquetas con las que ha sido catalogado. Me gusta que sea así. Lo que no me gusta es la palabra "Etiquetas". Quisiera cambiar esa palabra por otra. ¿Cómo puedo hacerlo?

Responder
JMiur  

Gracias, Quique, me alegro que te sirva.

Lo del texto ese es sencillo. En Diseño | Elementos de la página, haz click en Editar el elemento Entradas del blog. Allí se abre una ventana que tiene varios de esos textos que puedes modificar y otras opciones que puedes establecer.

Responder
Pablo  

Me encantaría poner esas categorías en el blog que estoy haciendo, pero no logro entender la explicacion. Mas adelante vuelvo y veo que puedo hacer. Gracias.

Responder
Erick 316  

OLA NO ENTIENDO MUY BIEN COMO HACER POR QUE E HECHO LO QUE DICE PERO NO ME VISUALIZA NADA :( QUE HAGO!!!!!

Responder
JMiur  

Pués en tu blog no veo nada de esto colocado.

Responder
Jorge Verón Schenone  

Sr. JMiur, es un excelente script !, estuve recorriendo la web intentando encontrar algún método para seleccionar los post en forma automática, probando varias rutinas y consejos. Fue el único método que cumplió mis expectativas. Ya lo estoy implementando. Ahora le queda a la gente de google hacer mérito, y mejorar el traductor para que también traduzca los textos que se muestran mediante las rutinas javascript (con algunos scripts funciona bien, en otros a medias, y en algunos casos, como en este, deja los textos sin modificación alguna). Le agradezco por su aporte en tiempo y conocimientos !.-

Saludos !
Jorge

Responder
JMiur  

Sí, esa parte de las traducciones deja mucho que desear.

Responder
Alan García  

h! tengo una duda que creo que será muy simple para vos

primero te cuento que me estoy armando un blog para subir mis trabajos de diseño para mostrar como porfolio... es muy minimalista (como me gusta) y luego de hacer varias modificasiones gracias a tu blog (genial) se me presento un problema de diagramción bastante pequeño pero molesto para mi... si obcerbas mi blog bas a ver que en las etiquetas (lo nombre "claves") presenta esos molestos puntillos que numeran cada etiqueta y me gustaría saber como sacarlos a esos puntitos muy molestos y si es posible los numeritos también:

Datos
· experimentos(2)
· dibujos(5)
. identidad(3)

y dejarlo así...

Datos:
experimentos
dibujos
identidad

y por ultimo.. como hago para que el txt de las propiedades y el del titulo de las etiquetas estén en minúsculas????

bueno agradecería mucho tu ayuda, y espero no abusar

Responder
JMiur  

Para eliminar los bullets de todas las listas, coloca esto en el CSS es decir, en alguna parte antes de </b:sin>:

ul {list-style-type:none;}

Los números imagino que se refieren a la cantidad que aparece entre paréntesis. Para eliminarlo, deberás expandir los artilugios y buscar algo como esto:

<span dir='ltr'>(<data:label.count/>)</span>

Elimínalo directamente y no se mostrará la cantidad.

Responder
Alan García  

Genial! lo pude hacer, mil gracias

me esta gustando esto de modificar, aunque me mando mis ERRORES!

para acentuar lo minumal queria borrar lo siguiente:


mostrando entradas con la etiqueta experimentos. Mostrar todas las entradas

pense que iba a ser facil.. pero lo que contiene ese cuadrito no esta en la plantilla... oase, en el firefoxe me aparece pero en la plantilla no... tambien me gustaria sacar "entradas recientes","paguina principal" y "entradas antiguas" lo intente pero me quedaba permanente el texto como si ubiese puesto un texto yo

y bue por ultimo y creo que ya estaría listo (osea las modificasiones anteriores son para que esto quede funcional)... me gustaria que en la paguina principal no aparezca ningún post.. que solo aparezcan cuando cliqueen la etiqueta. se podrá?


bueno mil gracias por tu ayuda, espero aprender mas de esto. SALUDOSSSS

Responder
JMiur  

El contenido de eso que se muestra al navegar etiquetas es lo que se ncuentra acá:
<b:includable id='status-message'>
..........
</b:includable>

Puede eliminarse elimniando esto:
<b:include data='top' name='status-message'/>

y la navecaion puede eliminarse borrando esto:
<b:include name='nextprev'/>

Lo de ningún post en el home tal vez sea posible, no sabria decirte como con exactitud pero debería usarse alguna condición:

<b:if cond='data:blog.url == data:blog.homepageUrl'>

Responder
Alan García  

h! gracias, si me funciono las dos primeras cosas.. ahora con lo de esconder el main solo para "home" es dificil. se que borrando b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/ desaparece el post.. no se si ese codigo se refiere al ultimo post o a todos en generel (blog1)
hice asi...


/* Outer-Wrapper
----------------------------------------------- */
.....otros elemenos......

#main-area {
width: 485px;
float: $startSide;
}

#main-visible {
width: 485px;
float: $startSide;
word-wrap: break-word;
overflow: hidden;
}

#main-invisible {
width: 485px;
height: 0px;
float: $startSide;
word-wrap: break-word;
overflow: hidden;
}


......despues de:/b:skin /head

...otros elementos...

div id='main-area'
div id='main-wrapper'
b:section class='main' id='main'/
/div
div id='main-visible'
div id='main1'
b:section class='main' id='main-visible' preferred='yes'
/div
b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/
/b:section
/div
/div
div id='main2'
div id='main-invisible'
b:section class='main' id='main-invisible' preferred='yes'/
/div
/div
b:if cond='data:blog.url == data:blog.homepageUrl'
b:section class='main' id='main1' show='no'/
/b:if
/div


......me tira este error:
No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
Mensaje de error de XML: The element type "b:section" must be terminated by the matching end-tag "".

Responder
JMiur  

Eliminando el widget Blog1 lo que haces es eliminar el blog o sea, la posibilidad de escribir entradas.

Me baso en el blog tal como lo veo, si quiera "ocultar" esa parte podría poner esto antes de </head>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>#main {display:none;}</style>
</b:if>

o podría usar estos otros DIVs: #Blog1 o #main-wrapper

Se ocultaria, estaría allí pero invisible. Si quiera que tampoco estuviera, que no se msotrara el código fuente, entonces rodearía todo el mai on la condición:

<b:if cond='data:blog.url != data:blog.homepageUrl'>
<div id="main-wrapper">
.....................
</div>
</b:if>

<div id="sidebar-wrapper">

Allí le digo que SIN NO ES el home, se muestre.

Hablo en voz alta, claro :D

Responder
an·dsñ  

hermoso.. no puedo creer que sea tan fácil.. eso lo pensé pero la descarte de primera mano porque pensé que directamente no mostraría mas nada.

muchisimas gracias! voy a seguir haciendo coqueto mi blog :$.
salidos;)

Responder
JMiur  

Suerte, an·dsñ :D

Responder
Uno mas del monton  

Interesante, voy a ver si lo aplico.
Estoy entendiendo java y me doy cuenta de las posibilidades de diseño son infinitas :D

JM tengo un problema con los márgenes y las etiquetas, decidí organizar los post con muuchas etiquetas pero me pasó esto:

http://videosinteresantes.com.ar/2009/03/papi-comprame-un-kalashnikov-2008.html

Se me salen para la izquierda! ¿tendrás idea de como hacer para solucionarlo?

Responder
JMiur  

¿Son las que están denbjao de los posts? Si es asó, fijate si encuetras esta propiedad y eliminala:

post-footer {
.............
white-space:nowrap;
}

Si no es eso, dame una idea de donde mirar porque me da la impresión que mucho depende de la resolución de la pantalla.

Responder
Uno mas del monton  

Perfecto! exactamente era eso lo que quería hacer, tan facil era. Muchas gracias, ahora quedo tal como quería :).

Me acabo de dar cuenta que no se puede etiquetar con mas de 200 caractéres :(. Osea que mis planes de etiquetar muucho se me cayeron.. creo que voy a acotar las etiquetas a una letra y abreviaturas.. no me queda otra. Es horrible el sistema de etiquetas!!


Gracias por la ayuda :) saludos.

Responder
JMiur  

Mw alegro que funcionara. Sí, el sistema de etiquetas es limitado, necesitarias algo más lógico como categorías y subcategorías, es una pena que Blogger no las tenga.

Responder
EmmaX  

hola es la primera vez que paso por aca. ya que blogger no te permite las subcategorias me aconsejarias otra pagina en donde hacerme un blog.
desde ya gracias

Responder
EmmaX  

en las categorías desplegables, que elementos son los que tengo que modificar en el codigo que vos me das??

Responder
JMiur  

No puedo aconsejar simplemente porque n osé qué quieres hacer.

Responder
EmmaX  

para tener las etiquetas con secciones, vos decis que tengo que borrar el codigo en rojo e introducir el que vos pones mas abajo.. es asi o yo estoy entendiendo mal?

si es asi yo te preguntaba, si al codigo que vos das hay que modificarlo y como habia que hacerlo

Responder
JMiur  

Sí, es así.

Responder
ordago13  

En la sección de etiquetas solo te deja tener en cada post etiquetas que no sumen más de 200 caracteres¡¡¡

Hay una forma de trucar eso para que haya más caracteres???

Gracías por adelantado¡¡¡

Responder
JMiur  

La verdad, lo desconozco.

Responder
@rielCastellanos  

Hola Jmiur, no podria solamente copiar las URL de las etiquetas que tengo actualmente y organizarlas como enlaces normales en mi blog? posteriormente esconder que ya estan categorizadas...... funcionaria eso?

Responder
JMiur  

Si. Haciéndolo de ese modo, manualmente, es posible armar cualquier sistema.

Responder
williams  

si reemplazo lo que esta en rojo por el codigo que das lo unico q se muestra en el sidebar es el titulo de etiqueta porque puede estar pasando
podrias detallar mas los pasos a seguir no seria mejor que dieras todo el codigo junto

Responder
JMiur  

Esto sólo es un experiemento. No veo en tu blog ninguno de los scripts o las etiquetas aramdas para probarlo.

Responder
marvin  

hola muy interesante tu post. es muy util

Responder
Hector  

Esta muy bien, lo probaré en mi blog de pruebas para ver que tal va.

www.tutoshector.blogspot.com

Responder
El_Predicador_YO  

Muy buenas!

Estoy liado con un tema de etiquetas y el ser un "negao" del html me esta pasando factura, como de costumbre. Creo haber entendido todo lo que explicas pero mi pregunta es un tanto mas general (y seguramente muy muy basica). En este o en cualquier otro ejemplo como puedo hacer para que el "boton" me abra las entradas con mas de un tipo de etiquetas? Por ejemplo: Boton (o casilla o como quieras llamarlo ^^) de Europa: Te abre las entradas que tengan las etiquetas de España y Francia, por ejemplo. No se si me he explicado, el tema es que quiero añadir mas "labels" a un href y no se como...

Bueno gracias por tu tiempo y paciencia ^^
blog: http://arcoonte.blogspot.com

Responder
JMiur  

Para eso, las separas con una barra. Ahora bien, no podría indicarte como hacerlo usando esos scripts ya que son bastante engorrosos pero, lo general es esto; si tienes una etiqueta llamada FRANCIA y otra llamada ESPAÑA, la primera tiene esta URL:

http://miblog.blogspot.com/search/label/FRANCIA

la segunda, esta:

http://miblog.blogspot.com/search/label/FRANCIA/ESPAÑA

y la combinada esta:

http://miblog.blogspot.com/search/label/FRANCIA/ESPAÑA

Responder
El_Predicador_YO  

jo... pues va a ser que no... he probado con ello de esta forma (y con muchas otras combinaciones que se me ocurrian) como muestro a continuacion:

<a href="http://arcoonte.blogspot.com/search/label/rol/cartas/tablero" [...]

Queriendo asi mostrar cuando elegimos la pestaña de "Rol" (en este caso) que englobe las entradas pertenecientes a "rol", "cartas" y "tablero" pero no me muestra mas que las primeras de ellas descartandome las otras etiquetas.

Creo entender que dentro de la carpeta "labels" estan todas las acepciones con lo cual supongo que habria que poner algo como "label/rol+tablero+cartas" pero no encuentro el parametro que las sume sin descartar ninguna de ellas... a ver si puedes ayudarme porque veo que tendre que desistir u_u"

Muchas gracias y un saludo!

Responder
JMiur  

Pués si eso no funciona, no sabría darte una respuesta; en un tiempo, los feeds ´de las etiquetas podían combinarse de ese modo pero, aprece que ya no. Sumarlas no sirve ya que sumas nombres. Aparentementem no es posible hacerlo.

Responder
El_Predicador_YO  

Muchas gracias de todas formas ^^

Responder
iBet7o  

Me gusto la forma en que resolviste el problema, yo me base en tu post para hacerlo en mi blog.

Gracias

Responder
Carolina  

Gracias JMiur, estuve buscando muchisimo como eliminar el texto "Mostrando entradas con la etiqueta..." y leyendo por aqui se lo explicabas a otra persona. Quedó perfecto. Gracias por todo lo que ayudas, un gran saludo :)

Responder
JMiur  

Me alegro que fuera útil, Carolina. Gracias por el comentario :-)

Responder
Luixom  

oye jmiur quisiera saber como poner el efecto el que tu usas en los enlaces de la izquierda que al pasar mouse se pone un fondo con forma de rectangulo de color diferente, sabes como puedo poner ese efecto, por ejemplo en "la puerta abierta " la lista de enlaces al pasar el mouse se pone un cuadro de fondo con forma de rectangulo de color diferente, espero que me ayudes.

Responder
JMiur  

Fíjate en esta entrada para ver cómo se manejan las listas.

Responder
Luis  

Jmiur como puedo cambiar el orden de las etiquetas de las entradas para que no esten en orden alfabetico y acomodarlas como yo quiera al publicar una entrada?

Muchas Grasias por todas las ayudas que me has brindado =)

Responder
JMiur  

Las alternativas sólo son las que preovee el gadget y no hay otras salvo que uses un elemento HTML y escribas los enlaces uno por uno.

Responder
Luis  

oye jmiur te quisiera preguntar hay algun tutorial para saber cuales codigos de mi plantilla estan mal hechos y poder eliminar codigos y asi aligerar la plantilla? esque voy empezando y no se mucho =(

Responder
JMiur  

No. No hay forma de hacer eso a menos que se lea línea por línea, se comprenda que cosa hace cada uno de esos códigos y si son necesarios, innecesarios o pueden ser mejorados.

Responder
Pringadilla  

Me ha sido muy útil tu entrada ya que ya tenía las etiquetas clasificadas de la forma que indicas, he intentado poner los tres "experimentos" que indicas y los dos últimos me funcionan sin problemas pero el primero -que es el que más me interesa- no. No sale ningún desplegable, tan sólo el título "categorías".
Cambié el signo de separación en el html de "_" a "-" que es el que yo utilizo, pero sigue sin salir nada.

¿Tienes idea de dónde puede estar el error?

Responder
JMiur  

No sé si tienes alguna clase de ejemplo para tratar de ver si hay un error.

Responder
Pringadilla  

En mi blog "diario de una pringadilla" lo tengo aplicado en este momento, el código que indicas. Te lo iba a poner por aquí pero el blog no me deja, de todas formas esta vez no eliminé ni el texto de las instrucciones para asegurarme que no borraba nada que no tocaba.

Responder
JMiur  

Al parecer, hay alguna línea del script que está "cortada". Modifiqué la forma en que se meustra en el post para que te resulte más sencillo copiar y pega. Sugeriría que lo copairas otra vez a ver qué ocure.

Responder
Gonzalo Goyanes  
Este comentario ha sido eliminado por el autor.
Responder
Pringadilla  

Gracias por tu ayuda, mis conocimientos en este tema son bastante limitados. Ahora me sale el listado de etiquetas pero me sigue sin salir el menú desplegable.
Varias cosas que se me ocurren que pueden fallar:

¿Es necesario que el script y el scrip style se añadan en alguna posición concreta? Por ejemplo, antes de

¿Es posible hacer la división de las etiquetas cambiando el símbolo _ por -? ej: var auxiliar = cual.split("-");
No se me ocurre qué más puede fallar.

Responder
JMiur  

Mientras vea errores, vamos bien y siempre se puede intentar algo. Ahora, noto dos.

Primero, si vas a colocar el script directametne en un eleento HTML y n oen la plantilla, elimina el CDATA:

//<![CDATA[
y
//]]>

Luego, sigo viendo una etiqueta "cortada", leo:

document.write("<li class=\"listadoITEM\"><a href=\""
+ elEnlace + "\">" + laSeccion + "</a></li>");

y eso debería ser una sola línea:

document.write("<li class=\"listadoITEM\"><a href=\"" + elEnlace + "\">" + laSeccion + "</a></li>");

Responder
Pringadilla  

Gracias Jmiur, he arreglado lo de la línea y he dejado igual lo del cdata porque sí que lo aplico en la plantilla... sigue sin hacerme caso.

¿Alguna idea más o renuncio y me corto las venas?

Responder
JMiur  

Por ahora, lo de las venas suena un poco drástico :D

Fíjate que en bucle que estas colocando; dice:

// leemos el array generado y escribimos el documento HTML

Pero, antes de eso debería haber otra parte, otro bucle que es el fundamental:

// leemos todas las etiquetas y las separamos en dos partes
for (var i = 0; i < listaEtiquetas.length; i++) {
var cual=listaEtiquetas[i]; // leemos la etiqueta completa
var auxiliar = cual.split("_"); // la separamos en dos
listaEtiquetas[i]=new Array(1); // ampliamos el array
listaEtiquetas[i][0] = auxiliar[0]; // guardamos el nombre de la categoría
listaEtiquetas[i][1] = auxiliar[1]; // guardamos el nombre de la subcategoría
}

Es el fundamental porque ese es el que divide los nombres en dos partes teniendo en cuenta que el separador es un guión bajo _ y no un guion común -

Responder
mat  

hola felicidades por el post es justo lo que buscaba pero tengo un problema con el primero no funciona lo instale pero no aparece el efecto no si podrias revisar mi blog o pasarme el widget en version expandida que tienes en tu blog donde esta el ejemplo te lo agradecia un monton porfavorrrrrrrrrrrrrr !!!!!!!!!! ya llevo casi un dia y no encuentro la solucion ayudame si o al menos dame una idea otra cosa no se si el css o el script talvez este mal ubicado o no podrias revisar mi blog porfa http://photoshopterminal.blogspot.com/

Responder
JMiur  

Revisa el script que me parece que tiene un error. Donde dice:

document.write("<a class=listadoSECCION\" title="Expandir/Contraer la sección\" href="javascript:void(0);" onclick=\"return linkLista('" + laSeccion + "');\"gt;" + laSeccion + "</agt;");

debería decir:

document.write("<a class=\"listadoSECCION\" title=\"Expandir/Contraer la sección\" href=\"javascript:void(0);\" onclick=\"return linkLista('" + laSeccion + "');\"gt;" + laSeccion + "</agt;");

es uma suteza, falta una comilla acá:

class=\"listadoSECCION\"

Responder
Granjero  

Hola JMiur:

Una pregunta,¿dónde se ponen las propiedades de las clases CSS?

Por cierto, buenísimo post.

Saludos

Responder
JMiur  

Donde quieras, Puedes ponerlas dentro de <b:skin> </b:skin> como el resto de ellas o colocarlas en una etiqueta <style> </style> andes de </head>

Responder
antinatural17  

Hola, soy nuevo en esto y llevo tiempo buscando una solucion ante el siguiente caso:
tengo un blog al cual pienso subir muchas imagenes de todo tipo, paisajes, autos, videojuegos, etc etc.
Aprendi a como hacer una categoria llamada Animè pero el problema es que tengo como 20 imagenes de 7 animes diferentes y no quiero poner todo junto dentro de la categoria "animè" ya que me gustaria hacerlo de una forma mas prolija, me gustaria que haciendo Click en "animè" se despliege o tenga una sub categoria llamada "Akira" y alli ver todas las imagenes que tengo de Akira.
Estuve buscando la manera de hacer esto en Blogger pero no encontre nada, por lo poco que entendi esto no se puede hacer.
Ahora veo esto y sigo sin entender ya que no entiendo nada de nada de HTML ni de JAVA ni de CSS. Estoy condenado a buscar una pagina alternativa a Blogger ? ya que de lo explicado aqui no entiendo ni J.
Espero que alguien me pueda ayudar,al parecer para hacer este tipo de cosas se necesita un conocimiento que no poseo:S

Responder
JMiur  

Blogger no tiene "categorías" sino "etiquetas" y no existe forma de crear sub-etiquetas o sub-categorías excepto de algún modo simualdo tal como muestra esta entrada.

Responder
deathdan93  

Esto es una pasada :P lo he probado y viene fenomenal para agrupar "artículos" de cualquier cosa, aunque para un blog personal... no le veo la utilidad.

Responder
Cervebel  

Gracias por un post tan interesante.
Es lo que buscaba y en parte lo he conseguido aplicar, pero de una manera poco ortodoxa, y supongo que por eso me falla.

Como yo de programación ando un poco pez, y después de seguir tus pasos unas 20 veces, sin el resultado esperado, he desistido de modificar la plantilla y lo que he hecho es utilizar un gadget de html/javascript y pegar ahí tu código (he cogido el de los países para entender mejor qué es lo que tengo que modificar luego).

Cuando lo he guardado y le he dado a la vista previa y he visto que salían los países y sin errores, casi me caigo de la silla, hasta que lo he probado...

America, bien, Asía, perfecto, pero en Europa... me despliega de nuevo los otros dos países!!!

Seguro que si lo quiero hacer a posta no me sale :-)
Te dejo la url del blog que estoy montando por si puedes ayudarme.

http://cervebel.blogspot.com/

Muchas gracias de antemano y perdona por el rollo que te he soltado :-)

Responder
JMiur  

No sé qué dice el código exacto que has colocado pero, lo que es ve en el código fuente de tu ejemplo, es que en la parte de Europa, todo vuuelve a repetirse. Verifica que el código sea correcto y verifica que las etiquetas estén bien cerradas.

Responder
Juan Opazo  

o eres genial busque por mucho tiempo como hacer esto pero nadie sabia, dices q es un proyecto , pero yo digo que es justo lpo que necesitaba, ahora intentare hacerlo . gracias

Responder
Juan Opazo  

que mal, no pude hacerlo la verdad es que soy muy nuevo en esto y es nada lo que se de html,te dejo mi blog para que le heches un ojo, alomejor seria bueno si es que no lo has hecho que iciera un video tutorial con tu experimento, que dalo por sentado muchos buscan insesantemente y que aun no encuentran, yo no pude, pero esperoluego poder hacerlo gracias
http://estudiamedicinaymas.blogspot.com/

Responder
JMiur  

No veo que tengas colcoado el script.

Responder
Robin  

Lastima que no entiendo nada de lo que pusiste. Pero te quedaron muy buenas las categorias y subcategorias de los continentes y paises. Ojala pudieras explicarlo en otros terminos y paso a paso para nosotros los novatos, ya que de mi parte no he podido ni con el primer paso.

Responder
JMiur  

Hay que resignarse a entender los propios límites y practicar, probar, aprender.

Responder
Robin  

Los tales elementos label a los cuales te refieres, son las mismas etiquetas?

Responder
JMiur  

En este caso son widgets o gadgets.

Responder
Juan Opazo  

hola :D disculpa pero que son los script. y como agrego uno???? de verdad me interesa mucho crer las subcategorias ya que al ser muy variada la informacion que tengo en mi blogg necesito organizarla mejor para que mis lectores la encuentren mas facilmente
gracias

Responder
JMiur  

Qu son los scripts no esalgo que pueda responder en un comentario. Básicamente, son isntrucciones que ejecuta el navegador.

En este caso, debes seguir las instrucciones de la entrada y probar. No es sencillo de hacer así que conviene probar en un blog auxiliar.

Responder
Robin  

Logre encontrar en la plantilla la parte donde aparece esto:

Aunque en donde dice "label" aparece html, pero bueno, supongo que debo borrar ese html y escribir label. Lo que si no me aparece es lo que tienes en rojo; es decir lo que debemos supuestamente suprimir, ya que despues de todo el listado de widget que agregue para las categorias se termina la plantilla. Tendre problemas por esto?

Los codigos que tienes en donde señalas las instrucciones con amarillo, los copiamos y pegamos tal cual aparecen ahi? (Obviamente sin poner lo que escribiste en amarillo).

Responder
Daniel Martínez Almela  

Una preguntita, ¿Qué se puede hacer para que se quede abierto en las etiquetas seleccionadas?, es decir, el conjunto de subetiquetas del mismo grupo, una vez redireccionado a la subetiqueta este grupo se quede abierto. No se si me explico :S

Responder
JMiur  

Como cambias de página, no hay forma de hacer eso con sencillez.

Responder
Kristina Soloaga  

Hola JMiur!! Creo haber hecho exactamente lo que dices en el post, sin embargo no me ha funcionado como debería..He creado tres Labels diferentes, el de las categorias desplegables si me ha funcionado, sin embargo la de categorias no-desplegables no..
Al hacer tres Labels diferentes me aparecen separados..no se que hacer..
Llevo tiempo buscando una solución y no encuentro..si me puedieras hechar una mano, te lo agradeceria!
Gracias!

JMiur  

Tendría que saber qué has hecho para dar alguna clase de respuesta.

Responder
CHILENITO  

en teoria y viendolo funcionar en el blog de pruebas, esta excelente..justo lo que andaba buscando..pero se ve complicado de aplicar al blog.

Responder
Krlitox LP  

disculpame pero no entendi la parte de labels y como los creo

JMiur  

labels es un gadget/widget de Blogger mismo

Responder
Cronos_2012  

hola queria hacer una pregunta se podria adaptar para ponerlo en una paguina y no gadget y que funcionara como indice alfabetico
o hacerlo independiente y aplicarlo junto a este otro
http://www.oloblogger.com/2012/08/tabs-solapas-jquery.html te agradeceria mucho la ayuda

JMiur  

La lista de etiquetas sólo es accesible en el widget Labels pero. puedes hacerlo en una página si escribes manualmente esa lista.

Responder
Cronos_2012  

seprodia mostrar los titulos de los post con esa etiqueta en lugar de las etiquetas en la zona de la categorias no desplegables

JMiur  

Para listar posts por etiquetas debes usar otros scripts; leer los feeds de cada una de ellas.

Responder
Arte Ascii  

Sólo estoy empezando en esto de blogear pero esto es justo lo que estaba buscando!! eres un genio.

Responder
Roberto Lamela  

Realmente excelente esto, pero no es para newbbies como yo, estoy necesitando hacer algo asi pero no entiendo como hacerlo, agradecerte de todas formas, es el único sitio donde encontré algo para hacerlo, saludos

Responder
Jose luis Fernandez  

hola una pregunta..primero muy buen post
soy mas que novato en esto, el javascript donde lo tendria que poner?, en que parte?

JMiur  

En la plantilla, en el mismo widget Label.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR