JMiur [E]

Como Blogger no nos ofrece alternativas para manejar nuestros archivos, organizarlos o listarlos, generalemente, no queda más remedio que recurrir a scripts que leen el contenido RSS de nuestro blog y de esa manera hacer cosas diferentes de las no-pensadas por los desarrolladores.

Una de esas alternativas es la que muestra El escaparate de Rosa en un artículo reciente y que es muy sencilla de implementar.

La idea es mostrar las etiquetas pero adosándoles la posibilidad de desplegarse para que además, cada una nos liste las últimas entradas asociadas como enlaces individuales; de alguna manera, se trata de crear un estilo similar al que se ve en el elemento Archivos.

Para implementarlo, debemos descargar el archivo JS con el script, alojarlo en un servidor y luego, si seguimos las instrucciones de Rosa, no habrá problemas.

Como alternativa, ya que el tema de usar archivos externos es un "drama" para muchos, voy a explicar la manera de hacer lo mismo pero, agregando el código directamente y de esa manera, no depender de servidores. Como se verá, el resultado final, será el mismo.

Empiezo agregando un elemento Etiquetas en la plantilla, dándole un título para poder encontrarlo luego y lo ubico en la sidebar donde quiero que se muestre. Ahora vamos a Edicion HTML de la plantilla y expandimos los artilugios para buscar ese elemento que dirá algo así:
<b:widget id='LabelX' locked='false' title='El Titulo' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
.......
.......
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
Vamos a eliminar todo eso que está entre <ul> y </ul> para reemplazarlo por nuestro propio código:


<script type='text/javascript'>
// <![CDATA[
home_page = 'http://NOMBREBLOG.blogspot.com/';
max_rc_posts = 10;
function showentry(json){
var maxp = (max_rc_posts <= json.feed.entry.length) ? max_rc_posts : json.feed.entry.length;
var text = "<ul>";
for (var i = 0; i < maxp; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
text += "<li><a href='"+posturl+"'>" + posttitle + "</a></li>";
}
text += "</ul>";
document.getElementById("showItemLabel").innerHTML = text;
}
function showPostLabel(sPL_label,e){
var isDOM  = (navigator.appName.match("Microsoft Internet Explorer") || navigator.appName.match("MSIE")) ? false : true;
var check = document.getElementById("showItemLabel");
if(check) {
if(!isDOM) { check.removeNode(true); }
else {check.parentNode.removeChild(check);}
}
var elm;
if(e.target) elm = e.target;
else elm = window.event.srcElement;
var div = document.createElement('div');
div.innerHTML = "";
div.id = "showItemLabel";
if(!isDOM) { elm.insertAdjacentElement('afterEnd', div); } else { elm.parentNode.insertBefore(div, this.nextSibling); }
var elm2 = document.getElementById("showItemLabel");
elm2.style.display = "inline";
elm2.innerHTML = "<br/>Cargando entradas...";
var script = document.createElement('script');
script.src = home_page+"feeds/posts/summary/-/"+sPL_label.replace(/ /g,"%20")+"?start-index=1&max-results="+max_rc_posts+1+"&alt=json-in-script&callback=showentry";
script.type = "text/javascript";
document.getElementsByTagName('head')[0].appendChild(script);
}
// ]]>
</script>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/> <span dir='ltr'>(<data:label.count/>)</span> <a expr:onclick='"showPostLabel(\"" + data:label.name + "\",event)"' href='javascript:void(0)'>►</a>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
<span dir='ltr'>(<data:label.count/>)</span> <a expr:onclick='"showPostLabel(\"" + data:label.name + "\",event)"' href='javascript:void(0)'>►</a>
</b:if>
</li>
</b:loop>
</ul>
Lo mejor, para evitar errores es descargar este archivo de texto y usar su contenido que es una copia del ejemplo.

Allí, el único dato que debemos modificar es la dirección de nuestro blog que está en una de las primera líneas:

home_page = 'http://NOMBREBLOG.blogspot.com/';

El otro dato que podemos modificar con facilidad es la cantidad máxima de entradas a ser mostradas; eso lo hacemos con esta línea:

max_rc_posts = 10;

Es importante saber que la demora en cargarse dependerá de ese número así que no conviene usar valores muy altos.

Cada vez que hagamos click en una de esas etiquetas, se mostrará "Cargando entradas..." que es un texto que podemos modificar si lo buscamos en el código:

elm2.innerHTML = "<br/>Cargando entradas...";

Lo mismo podemos hacer con el contador de entradas por etiqueta, borrando lo marcado en color rojo (está en dos lados):

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

En el script, también se utiliza un símbolo [ ► ] como enlace para "expandir":

&#9658;

Podemos reemplazarlo por otros o por cualquier texto o imagen:

&#9660; [ ▼ ]
&#9668; [ ◄ ]

Como lo que se genera es una lista, el estilo se adaptará a nuestra sidebar y si queremos personalizarla, podemos agregar las definiciones y propiedades de estilo justo antes de </b:skin>.

Si queremos establecer un estilo distinto al estandard, deberemos identificar el elemento:
#LabelX ul { ....... }
#LabelX ul li { ....... }
#LabelX ul li a { ....... }
El área expandida está dentro de un DIV llamado showItemLabel así que la controlamos con esa definición. Por ejemplo:
#showItemLabel { /* es el área completa */ }
#showItemLabel ul { /* la lista */
padding:0;
margin:0;
}
#showItemLabel ul li { /* cada item de la lista */
background-color: #343F4A;
list-style-image: url();
padding: 0 0 0 10px;
margin: 2px 0;
width: 85%;
}
#showItemLabel ul li a, #showItemLabel ul li a:visited { /* cada item es un enlace */
color: #FF9933;
font-weight: normal;
}
#showItemLabel ul li a:hover { /* efecto rollover sobre los enlaces */
color: #FFFFFF;
}

El ejemplo puede verse funcionando en la sidebar de mi blog de pruebas.

75 comentarios:

Monja  

Muchisimas gracias!!!

Responder
Emilio  

Hola comipi

He seguido los pasos que comentas. En principio me salen al lado de cada etiqueta el número de etiquetas que hay y el simbolo de [ ► ] para poder desplegar las etiquetas (he puesto 4 resultados como máximo) pero cuando clickeo para ver esas 4 etiquetas no pasa nada.

He copiado el código tal y como estaba, variando la url del blog y el número máximo de entradas a mostrar, pero no ha salido.

A ver si me puedes echar una mano para ver donde esta el fallo.

Muchas gracias compi.

http://astronomocegato.blogspot.com/

Responder
JMiur  

Emilio:

Aunque no puedo probarlo al 100%, diría que el problema es la forma en que está incluido el script. Parece estar escrito todo en una sola línea y allí, con CDATA da la impresión de no funcionar correctamente.

Al cambiarla online, escribiendo el script una línea debajo de la otra, parece volver todo la normalidad: CAPTURA

He colocado el script completo en un archivo de texto por si quieres verlo y en todo caso, copir y pegar su contenido para reemplazar esa parte. Es exactamente lo mismo pero las líneas de las instrucciones están escritas una debajo de la otra.

Responder
Emilio  

Gracias compi, se debía a eso que comentas.

Lo curioso es que cuando no iba es porque copié el código del archivo txt. Cuando lo he compiado directamente de la entrada todo ha ido bien.

Muchísimas gracias por ayudarme a resolver el problema.

Tu blog es uno de los imprescindibles de mi lista :-D

Responder
JMiur  

Es raro eso porque se supone que son iguales. Pero. de todas maneras ne alegro que se resolviera, Emilio :D

Responder
Las Pacas  

lo he escrito tal como muestras en tu entrada , sale el mensaje cargando entradas y no aparece nada, y lo he puesto en una etiqueta que solo tiene 1 ¿porque sigue sin desplegarse? gracias por adelantado

Responder
JMiur  

Las Pacas:

El código parece estar bien pero, Blogger me devuelve un error al intentar leer los feeds:

"The feed specified by http://www.blogger.com/feeds
/476215421963486081/posts/summary/-/Pescados is not enabled"

Eso me pasa al tratar de leer cualqueir feed del blog; revisa que estén habilitados en la Configuración.

Responder
k_nelita  

Bárbaro JMiur, como siempre genial lo tuyo y lo mío también ja ja :D Me salió PERFECTO.
Pero... a mi me hubiera gustado que por ejemplo al clicar la etiqueta tango salieran todos los tangos, esteee... como te explico, si, sale así pero el asunto era abreviar etiquetas, no se ni como explicarlo ni como hacerlo, que no salieran todas a la vez, o sea que quedaran ocultas las pertenecientes a la categoría, no se si podrás entender, tal vez si le das una mirada...
Porque como voy a seguir publicando muchos temas musicales, las etiquetas van a ser muuuuchas.
A ver... que saliera solo "tango" o solo "folklore" y al clicar en ellas salieran todas las otras, o sea los autores o intérpretes, pero que mientras estuvieran ocultas, creo que ahí me expliqué mejor.
No se si se puede algo como eso, vos me dirás si?
Fijate porfi, el blog se llama FolkTango y está en mi perfil.
Saludos y muy bueno esto ehh!! ;)

Responder
JMiur  

Creo entender la idea k_nelita ¿Podría ser algo parecido a lo que se muestra en este post?

Si no comprendo mal, lo que quieres hacer es tener categorias que,al desplegarse muestren algo así como sub-categorías, algo que en Blogegr no está implementado y sólo podemos "simulaarlo".

Responder
Las Pacas  

Hola jMiur, en primer lugar gracias por contestarme, y segundo active los feeds (fui a configuracion y puse en todos completo) pero sigue igual se queda parao en cargando entradas.... ¿hay que hacer o incluir algo mas ? muchisimas gracias máquina.

Responder
JMiur  

Las Pacas:

En este momento, lo veo perfectamente, tanto en Firefox como en Internet Explorer (CAPTURA).

Si no logras verlo, borra la caché del navegador porque peude estar perturbando.

Responder
Las Pacas  

gracias gracias gracias, ya me funciona , estoy emocionada era lo que mas queria del blog , ahora me queda lo de poner las imagenes, que seguí tus instrucciones pero ahí me he perdido, no lo entiendo... y subi a photbuchket las fotos y todo pero tus instrucciones se me hacen muy dificiles. gracias de verdad

Responder
SIBARITA  

AH Y EL ARCHIVO DE TEXTO QUE DAS PARA EVITAR ERRORES NO FUNCIONA, NO SALE TAL ARCHIVO DE TEXTO.GRACIAS

Responder
Francisco  

Este es un super buen truco. Lo implementé en mi blog, pero tengo una dificultad que sospecho tiene que ver con una característica qeu hace poco agregué: todos los links se abren en una nueva página. Habrá alguna forma de hacer que las dos modificaciones sean compatibles? Lo que me sucede es que al hacer clic en la etiqueta se abre una nueva ventana vacía!

Espero puedas ayudarme:http://bloglaguino.blogspot.com

Responder
JMiur  

SIBARITA el archivo de texto está llí, no tiene problemas. Igual, repito el enlace

Francisco: no veo forma de resolver eso a menso que el script permita "filtrar" algunos enlaces.

Responder
SIBARITA  

es que meto el codigo y me da error siempre, pincho en el link de texto que pusiste y se me abre una ventana y sale esto: (0) ► (0) ► , no me sale el codigo, no se que pasa pero no puedo. gracias por todo

Responder
JMiur  

El enlace del comentario está mal. Intentaremos otra vez :D
CLICK ACA o usa el botón derecho para descargarlo.

Responder
atajar  

increible pero cierto me ha salido a la primera pero me gustaria cambiar el color de la imagen ▼esta del triangulo eso es posible

Responder
JMiur  

Ese triangulito no es una imagen sino un carácter así que, lo que yo hice fue buscar donde está en la plantilla y colocarle allí el estilo:

<span class="zippy toggle-open" style="color: #elColor ! important; font-size: 12px ! important;">

<span class="zippy" style="color: #elColor ! important; font-size: 12px ! important;">

Fíjate si algo así ayuda.

Responder
atajar  

ohh ese carácter no lo tengo

Responder
JMiur  

Lo debes tener. Despliega los artilugios:
<span class='backlink-toggle-zippy'>&#160;</span>

Busca esta palabra: zippy

Responder
atajar  

huy ya lo encontre pero cuando le pongo el color que quiero me da error

Responder
JMiur  

Dime que escribes, deberías er, por ejemplo:

style='color:#000000'

antes de style hay un espacio y luego también.

Responder
atajar  

ya no me da error pero no cambia el color y lo he puesto tal y como me has dicho

Responder
JMiur  

¿Logras ver en el script algo así?

<a expr:onclick='&quot;showPostLabel(\&quot;&quot;
+ data:label.name
+ &quot;\&quot;,event)&quot;'
href='javascript:void(0)'>►</a>

Coloca el color allí:

<a style='color:#elCOLOR' expr:onclick='&quot;showPostLabel(...........

Responder
atajar  

si lo puedo ver lo he puesto y nada no cambia el color

Responder
JMiur  

Pués, por lo menos en http://atajar.blogspot.com/ no veo que esté puesto.

Responder
atajar  

si JMiur lo tengo puesto si quieres te mando la plantilla y hechas un vistazo

Responder
JMiur  

No hace falta toda la plantilla, sólo lo que está en el elemento Label1 que es donde están las etiquetas.

Responder
atajar  

Gracias 10000000 lo he puesto como me has dicho y ha salido perfecto ,gracias por estar siempre un abrazo

Responder
JMiur  

Me alegro que funcionara :)

Responder
Emi  

Muchas gracias....me funciono!!! excelente tu blog te felicito!!!:D

Responder
JMiur  

Saludos, Emi. Gracias por el comentario.

Responder
porqueyolodiga  

Hola JMiur. Estoy siguiendo tus tips para blogs, algunos pude, otros no. Ya me mandé varios "mocos". Creo que así se aprende. Hace un mes que empecé a bloggear con 0 conocimiento. Por lo que va la pregunta, que significa alojarlo en un servidor? Cómo lo hago? descargué el archivo pero no´se dónde alojarlo.
Otra cosa, se que no viene con este tema, pero los posts/entradas relacionadas no me salen, queda solo el título entradas relacionadas pero nada abajo. Te dejo mi blog porqueyolodiga.blogspot.com todas las críticas son bienvenidas. Gracias

Responder
JMiur  

Subir a un servidor es guardar el archivo en intenet. En algún servicio que l oacepte, tal como lo haces con una imagen que quieres mostrar. Si se trata de scripts, las cosas se complican y ahí, convendría que te fijaras en esta entrada más actualizada.

Sobre los posts relacionados, veo el script colocado pero sólo parcialmente así que no puedo decirte si hay un error o dónde está.

Responder
Cocaso  

Es un placer contartarte por primera vez Jmiur, toda la informacion que ofreces es de primera calidad, te apoyo y espero que nos brindes mas sorpresas, mi consulta es la siguiente, algunas veces coloco los scripts directamente en la plantilla, y luego realizo algunos cambios en las instrucciones despues del (/head, sin embargo un problema que se me a vuelto recurrente es que las instrucciones no hacen la llamada al script colocado en la plantilla, si bien se muestran en vista preliminar no funcionan ya que no ejecutan las instrucciones del script, esto no sucede cuando utilizo un host de archivos, pero cuando coloco en forma directa a l planilla si, entoces es muy cansador poder solucionarlo, quisiera si pudieses decirme si existe algun problema general con los scripts que estan en la planilla o existe algun problema con las instrucciones despues del (/head) que modifico, como funciona las instrucciones cuando llaman a un script, espero pudieses ayudarme.

Responder
JMiur  

Cocaso: Tendría que saber si hay un caso concreto que pueda verse online. En términos genreales, en la plantilla, lo mejor es colcoar los escriots usando CDTA para que no sean engorrosos a la hora de editarlos:

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

También es cierto quecieros scripts no funcionarán a menos que se pongan antes de </head> y hay otros que será exactamante al revés. Depende de qué hagan; por eso, si hay alguno en particular que puedas ver que no funciona o lo hace mal, dime la URL y me fijo a ver si logro descubrir el problema.

Responder
DOMINA YOUR OBSSESION  

Hola JMiur:

Me encanta tu blog y la manera sencilla que tienes de explicar los procedimientos paso a paso para obtener resultados exitosos, cosa que me ha pasado anteriormente al modificar el ancho de la plantilla de mi blog por ejemplo.

Una vez resuelto eso, me propuse realizar un cambio en la presentación de las etiquetas.

Mi idea original era obtener una lista expandible, pero al encontrar este post me encanto la idea de que, a demás, se desplegara debajo de cada etiqueta, la lista de entradas correspondientes.

Seguí paso a paso las instrucciones con la mayor pulcritud posible, modifique varios de los items mencionados, como por ejemplo, borrar numero de entradas, cambiar la cantidad de entradas que se cargan y hasta me anime a cambiar el símbolo (flechita).

Guarde cambios, abrí el blog y mi sorpresa fue que todo sale genial, salvo que no logre mi objetivo primero, que la lista sea expandible.

Reitere el procedimiento dos veces mas (incluyendo copiar el codigo desde el post y desde el archivo que adjuntas) y el resultado sigue siendo el mismo.

Alguna idea de que puede estar pasando?

Desde ya te agradezco la atención y lo educativo de tu blog.

Saludos

Virginia.

Pd: por cierto, el blog en que lo implemente es este: http://eternaobsesion.blogspot.com/

Responder
JMiur  

DOMINA YOUR OBSSESION:
Pués, lo veo funcionar bien tanto en IE como en Firefox, expandiendo las etiquetas normalmente ¿Qué detalle notas¿

Responder
DOMINA YOUR OBSSESION  

JMiur:

Ante todo, gracias por tomarte el trabajo de visitar mi blog y responder a mi consulta.

Lo que yo pretendía era que solo se viera la palabra etiquetas y que al hacer click sobre ella se expanda luego la lista de etiquetas que a su vez luego se expanden cada una para mostrar los post respectivos.

Así lo vi en el ejemplo de tu blog de pruebas si no me equivoco.

Pero como habrás notado en el caso de mi blog queda la lista de etiquetas como estaba normalmente y solo se expanden los post.

No se si fui clara, creo que me enrede un poquito.. jajaja

Bueno te dejo un beso y gracias nuevamente.

Responder
JMiur  

Entiendo entonces que quieres tener el elemento etiquetas oculto y desplegarlo y contraerlo a voluntad. Entonces, este script no te sirve y debes hacer otra cosa.

Si te fijas en esta entrada verás un ejemplo para el elemento Archivos y la idea es similar. Fíjate y me cuentas si lo comprendes. Mira el comentario 74 donde hay un ejemplo aplicado al elemento Etiquetas.

Responder
lk  

hola jmihur. auqí vuelvo apara ver si arreglo mi página.
quiero hacer con el Directorio (lleno de banners) lo que tú has hecho con ARCHIVOS.
es decir: pulsar en la palabra DIRECTRIO Y/O EN UNA FLECHITA ADJUNTA y que se abra y cierre el directorio que tengo en el sidebar en el footer. quiero se despliegue y cierre ese concreto gadget nada más. ¿tienes alguna entrada que lo explique, o me lo podrías explicar? gracias!!!

Responder
lk  

hola jmihur, ya lo he arreglado... a mi manera! fue difícil. pero lo logré. gracias x todo.

Responder
JMiur  

No hay nada específico sobre eso pero, cualquier sistema para desplegar y contraer funcionaria.

Responder
DOMINA YOUR OBSSESION  

MIL DISCULPAS POR NO RESPONDER ANTES, PERO ESTUVE CON POCO TIEMPO. EN CUANTO PUEDA LO IMPLEMENTO Y TE CUENTO COMO ME FUE.

GRACIAS COMO SIEMPRE POR LA ATENCION Y TIEMPO DEDICADO.

SALUDOS

VIRGINIA

Responder
Jabba  

Saludos JMiur,

siento darte de nuevo la lata, pero es que eres susceptible de recurrir cuando a uno le surge una duda plantillera :). Ésta creo que es sencilla, aunque no consigo dar con la tecla. Te cuento: estoy haciendo algunos cambios en la plantilla del blog (un buen lavado de cara) y no encuentro la forma de quitar los puntos que aparecen al crear una lista de enlaces insertando un widget de código HTML. Al crear un widget de enlaces de los que te permite el editor de Blogger no aparece el dichoso punto, sin embargo al crear yo lista de enlaces con la etiqueta [li][/li] (por ejemplo los enlaces de la lista de Últimos comentarios) sí que aparece.

He estado mirando en la sección de la plantilla .sidebar ul y .sidebar li que es donde pensaba yo que estaría la opción de suprimir u ocultar el punto, pero no hay manera. También he buscado y probado a eliminar otras partes de la plantilla relacionadas con los links que tengo en la sidebar pero no consigo quitar el maldito punto. ¿Alguna sugerencia? :)

Como siempre, gracias de antemano.

Responder
JMiur  

Jabba:
No logro ver cuáles son esos puntitos a los que te refieres ¿Dónde los ves? ¿Son esos tres puntos que aparecen al final de cada comentario?
HOLA JABBA blablablabla TENGO UNA PSP…

Responder
Jabba  

Creo que me he explicado muy mal jeje. Lo siento. Mira, he subido un pantallazo a Imageshack marcando con flechas rojas los puntos a los que me refiero. Son los puntos negros que aparecen a la izquierda de los links, justo a la izquierda de la viñeta que tengo definida, sería algo así como una segunda viñeta lo que sale.

Responder
JMiur  

Ahora, sí, Jabba :)
Mira, esos bullets son los que tienen por defecto las listas, para que no los tengan, hay que colocar esta propiedad:
list-style-type:none;

En este caso, para quitarlos de toda la sidebar, agrégalo a esta definición:

.sidebar li {
.......
list-style-type:none;
}

Responder
Jabba  

Eres un genio. Funciona de maravilla :) . Yo trataba de quitar cosas pero no se me había pasado por la cabeza poner una instrucción en lugar de quitar las que ya había, pero vamos, igualmente me hubiese costado adivinar que esos "bullets" son interpretados por la plantilla por el nombre de "list-style-type" :o . Muchas gracias!!

Responder
Jabba  

En otro orden de cosas (ya que estamos, me aprovecho un poco más de ti jeje). No sé que he tocado de la plantilla pero tengo un "ligero" problema. Ha desaparecido la opción de "Añadir gadget" del menú DISEÑO/ELEMENTOS DE PÁGINA. La plantilla que estoy usando ahora, únicamente tenía para añadir gadgets en la sidebar y ahora mismo ya no está el botón (creo que se ha superpuesto lo que he añadido de las suscripciones de feedburner pero he probado a quitarlo y no vuelve a aparecer el botón).

Para intentar explicarme mejor, y que no pase como antes :S , se me ha ocurrido tirar de Imageshack de nuevo para dejarte otra CAPTURA DE PANTALLA ;) , porque creo que me he explicando igual "de bien" que antes jeje.

¿Hay forma de recuperar el botón?, o ya que estamos... ¿hay forma de añadir en otra sección (por ejemplo bajo los posts) un botón de añadir gadgets?

Recuerdo que leí (no sé si en El Escaparate o aquí) una entrada sobre modificar la plantilla para hacer algo similar a lo que te pido, pero ni allí ni aquí consigo dar con ella. Bueno, no me enrollo más. Gracias de nuevo maestro ;)

Responder
JMiur  

Jabba:

Sí, todas las listas LI tienen esa propiedad por defecto, tambien pude eliminarse para todo el sitio colocando al inicio de la definiciones:
ul li {list-style-type:none;}
y luego, definirlas individualemente; suelo hacer eso :D

El botón no ha desaparecido, seguramente, esas secciones están bloqueadas. Sin expandir la plantilla, fíjate si ves las etiquetas SECTION. Pueden decir varias cosas, normalmente, la que tiene los posts dice esto:

<b:section class='main' id='main' maxwidgets='1' showaddelement='yes'>

esta es la del CROSSCOL que generalmente no usamos:

<b:section class='crosscol' id='crosscol' showaddelement='no'>

Esos dos parámetros: showaddelement y maxwidgets determinan si pueden agregarse elementos o no y/o cuántos pueden agregarse.

Es posible cambiar el "no" por "yes ", modificar el número o bien, eliminar los dos parámetros y liberar la sección:

<b:section class='main' id='main''>

Eso, es válido para cualquiera de esas etiquetas de Blogger y es lo que hará que se vea el botón de añadir en la pantalla de Diseño.

Responder
Jabba  

Perfecto. No logro que vuelva a aparecer la opción en la sidebar cambiando el no por el yes en showaddelements de "crosscol", sin embargo sí he conseguido que aparezca la opción de insertar gadget cambiando el no por el yes en el showaddelements de "main", así que con eso me sobra porque puedo crearlos ahí y moverlos a la sidebar :) . Muchas gracias!

Responder
JMiur  

Raro, debería funcionar igual, en todo caso, elimina los dos parámetros. También es posible que si tienen alguna posición fija o absoluta, lo que pase es que el enlace no se vea aunque esté allí. De todas maneras, tal como dices, si puedes moverlas y reubicarlas, significa que está desbloqueada, sino, no se podría hacer eso tampoco.

Responder
Free Zone Vacations  

Hola JMiur!!!... otra vez por acá... para preguntarte sobre los símbolos: cómo hago para que aparezcan dos triangulitos (el de subir y bajar -expandir y contraer gadget-)?... ya tengo un triangulito: el de bajar (desplegar, que es éste ▼)... cuál es el símbolo para poner el triangulito hacia arriba?

Responder
Free Zone Vacations  

Otra vez por acá JMiur... tengo una pregunta: será posible que, tomando como ejemplo lo que tienes (ETIQUETAS DESPLEGABLES), puedas hacerlo más gráfico?... esto es, que en lugar de poner *cada item es un enlace*, pongas *América_Canadá*... etc....
Y bueno, más que nada, porque quienes no somos expertos en la materia, el llevarnos de la mano nos ayuda mucho a comprender... gracias!!!

Responder
JMiur  

► &#9658;
◄ &#9668;
▼ &#9660;
▲ &#9650;

Responder
Mi Tucumán  

¡Muchas Gracias! Quedó mucho mejor así

Responder
jaljz  

hola mira hize todo como lo comentas y todo bien solo q al volver a dar click en triangulo para desplegar no se contrae, quisiera saber como se hace para contraerlo de nuevo gracias

Responder
JMiur  

El tema es que el script, tiene la aprticualridad de mantener siempre una abierta así que, en tu ejemplo, como sólo hay una, ocurre eso.

Por unos dias, voy a dejar un ejemplo en mi blog de pruebas para que veas a que me refiero.

Responder
Gonzalo Lopez  

Buenas,

He conseguido que se desplieguen las etiquetas, pero no me aparece es el simbolito al lado de la etiqueta, no la reconoce me aparece una interrogación (?). Tambien me gustaria cambiarle el tamaño de la letra y formato a lo desplegado y no se bien como. Por ultimo ese desplegable puedo pinchar para que se vuelva a comprimir y poder pinchar en otra etiqueta y que se despliegue sin tenerlas todas desplegadas.

Muchas gracias por adelantado
Un saludo
www.lahoradada.es

Responder
JMiur  

No veo tal cosa. Lo veo normal; esta es una captura

Respecto al funcionamiento, no sabría decirte. Para eso, debería modificarse el script.

Responder
Gonzalo Lopez  

Buenas,

Conseguí cambiar las interrogaciones, que tuve un problema al copiar el texto a un editor antes que a la plantilla y se perdía ese carácter.

El problema que tengo básicamente, es si miras el blog y despliegas una de las etiquetas, el texto desplegado es igual al de la etiqueta y me gustaría modificarlo, explicas algo arriba pero no termino de entender, ya que busque en código "showItemLabel" y no lo encontré, podías ayudarme con esto?

Muchas Gracias
www.lahoradada.es

Responder
JMiur  

No estoy seguro si te refieres a cambiar la forma en que se ven esos textos, el color, la fuente, etc. Si es así, entonces, lo que te falta es agregar el CSS que va justo antes de </b:skin> y es eso que se muestra en la entrada por ejemplo showItemLabel etc.

Una modificacion simple, si agrego esto:

#showItemLabel li a { color: red;}

los enlaces desplegados se verán de color rojo.

Responder
Gonzalo Lopez  

Buenas,

Mas que el color es el tamaño lo que quiero modificar, y si pudiesen desplegarse con un pequeño sangrado respecto a la etiqueta genial.

Eso si lo del color me lo apunto.

Muchas gracias
www.lahoradada.es

Responder
JMiur  

Para eso, debes usar padding o margin; por ejemplo:

#showItemLabel {
display: block !important;
margin-top: 30px;
}

Responder
Gonzalo Lopez  

Buenas,

Eso es exactamente lo que busco, mi duda es donde lo pongo, porque en el código no me aparece nada de showItemLabel, entonces no se exactamente donde ponerlo, en el código copie tu código tal cual, en que punto lo pondría?.

Muchas Gracias
www.lahoradada.es

Responder
JMiur  

No. Eso no es parte del código, deberás agregarlo junto al resto del CSS, dentro de <b:skin> </b:skin>

Responder
Gonzalo Lopez  

Buenas,

Siento dar tanta guerra, pero lo he pegado justo antes del y no he visto cambio alguno, porque no ha funcionado.

Muchas Gracias
www.lahoradada.es

Responder
JMiur  

Pués se ve perfectamente, ahora, la lista de enlaces que se despliega, está separada 30 pixeles del texto de la etiqueta.

Responder
Gonzalo Lopez  

Buenas,

Y ya lo ultimo de todo, podria hacer la letra mas pequeña de lo que se despliega dentro de la etiqueta? quiero decir si el nombre de la etiqueta esta imaginate en Arial 10 que los desplegado fuese Arial 8 por poner un ejemplo.

Muchas Gracias
www.lahoradada.es

Responder
JMiur  

Allí mismo puedes agregar cualqueir propiedad:

#showItemLabel {
.......
font-size:valorpx;
}

o, como es un enlace:

#showItemLabel a {
.......
font-size:valorpx;
}

Responder
Gonzalo Lopez  

Muchísimas Gracias

Una pagina super útil para gente inutil como yo en esto!!!

Un saludo
www.lahoradada.es

Responder
Cemotucu  

Gracias por esta entrada. Me ha servido de mucha ayuda. Ahora, sin embargo, el problema que tengo es en elegir la skin de la barra desplegable de etiquetas.

En esa parte me he perdido. :S

Muchas gracias desde ya, espero puedas explicar mejor el tema de la skin, que la verdad soy un manco en programación -.-

elmundodebaldar.blogspot.com

Responder
JMiur  

No hay mucho que explciar sobre eso; los detalles graficos son a gusto de cada uno, color, fondos, textos.

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