JMiur [E]

Abusando de transiciones y otras modernidades, esta es una variante para mostrar entradas relacionadas en Blogger, creando una especie de slider y se basa en Posts relacionados con miniaturas usando Json a la que simplemente le haremos algunas modificaciones.

El script es igual al que se mostraba en la entrada entrada anterior aunque con los nombres diferentes; para no complicarse la vida puede descargarse desde acá y lo agregamos a la plantilla antes de </head>:
<script type='text/javascript'>
//<![CDATA[
  ... acá pegamos el contenido del archivo de texto ...
//]]>
</script>
Allí es necesario establecer algunos datos personales tal como en el otro:

var relmaxamostrarslider = 20; // cantidad de entradas a ser mostradas
var relmaxlen = 75; // la cantidad de caracteres de los resumenes
var relimagenpodefectoslider = "URL_imagen"; // la imagen por defecto

y otros nuevo que, en este ejemplo son estos:

var SRwidth = 144; // ancho de cada DIV
var SRmin = 0;
var SRmax = -2160; // longitud máxima

Otro cambio es el HTML que decía esto:
<div id='postsrelacionados'>
  <script type='text/javascript'>mostrarrelacionados();</script>
</div>
y que vamos a complicar un poco, cambiándolo así:
<div id="postsrelacionadosslider">
  <a onclick='desplazarrels(1);' class='sflecha' id='relleft' href='javascript:void(0);'>
    <img src='URL_FLECHA_IZQUIERDA'/>
  </a>
  <div id='postsrelacionadosinner'>
    <div id='postsrelacionadoscontenedor' style='left:0'>
      <script type='text/javascript'>mostrarrelacionadosslider();</script>
    </div>
  </div>
  <a onclick='desplazarrels(-1);' class='sflecha' id='relright' href='javascript:void(0);'>
    <img src='URL_FLECHA_DERECHA'/>
  </a>
</div>
¿Que es todo eso? Dentro de un DIV colocaremos una flecha que será un enlace para desplazarse hacia la izquierda, otra hacia la derecha y en el centro mostraremos una tira de entradas relacionadas.

Para que esto funcione lo fundamental es el CSS:
<style>

   /* al rectángulo contenedor lo centramos, le damos altura y eliminamos los saltos de línea indeseados */
  #postsrelacionadosslider {
    height: 180px;
    position: relative;
    width: 635px;
  }
  #postsrelacionadosslider br { display:none; }

  /* las imágenes que sirven para navegar las posiconamos una a cada extremo */
  #relleft { left: 0; }
  #relright { right: 0; }
  .sflecha { height: 180px; position: absolute; width: 25px; }
  .sflecha img { height: 180px; width: 25px; }

  /* al rectángulo central lo dimensionamos, lo posicionamos e impedimos que se deborde */
  #postsrelacionadosinner {
    height: 180px;
    left: 30px;
    overflow: hidden;
    position: absolute;
    width: 576px; /* es el ancho real de cada post resumido por la cantidad visible, en este caso 4 */
  }
  /* esta será la "tira" a desplazar */
  #postsrelacionadoscontenedor {
    height: 180px;
    position: absolute;
    width: 2800px; /* es el ancho real de cada post resumido por la cantidad a mostrar, en este caso 20 */
    /* el efecto */
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
  }

  /* cada post resumido */
  .relspostsslider {
    background-image: -moz-linear-gradient(100% 100% 90deg, #303941, #101921);
    background-image: -webkit-gradient(linear, left bottom, left top, from(#303941)), to(#101921));
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FF101921', EndColorStr='#FF303941');
    float: left;
    height: 180px;
    margin: 0 2px;
    overflow: hidden;
    padding: 0 5px;
    text-align: center;
    width: 130px;
  }

  /* los contenidos de esos posts resumidos */
  .relspostsslider a {
    color: #EEE;
    display: inline;
    font-size: 11px;
    line-height: 1;
  }
  .relspostsslider img {
    height: 72px;
    padding: 5px;
    width: 72px;
  }
  .relspostsslider h6 {
    display: table-cell;
    height: 5em;
    margin: 0;
    overflow: hidden;
    padding: 0;
    vertical-align: middle;
    width: 130px;
  }
  .relspostsslider p {
    color: #AAA;
    font-size: 10px;
    height: 4em;
    line-height: 1;
    margin: 0;
    overflow: hidden;
    padding: 0;
  }

</style>
Si nada falló, el resultado sería algo así:

98 comentarios:

Felipe  

Santos chorizos JMiur, este está fenomenal. :)
Usted sabe que JSON es enviciante, y no dejaré de utilizar uno de estos en algun blog, muy elegante, sencillo y bonito.

Responder
JMiur  

Saludos, Robin. Digo, Felipe :D

Responder
Adalberto  

Vaya genial! Cada vez que digo que esta listo el diseño propones algo nuevo, bastante bueno esto. Gracias jmiur

Responder
Felipe  

Jajajaja :P
Todo un gustico de esos que comparto hasta el infinito. Saludos.

Responder
Gem@  

No dejo de reír desde hace un rato, es increíble de verdad :D

Responder
Zoro Swordsman  

wow... nice :D
thanks :S

Responder
Graciela  

Rebello! :D

Responder
deathdan93  

Muy interesante :D voy a intentar integrarlo en mis miniaturas ;)

Responder
Beben Koben  

every come to here, always get an amazing tutorials...hohoho :O
thank's a lot master \m/ ;)

Responder
César  

Ante todo, mi enhorabuena por tu trabajo como blogger. Eso me anima a plantearte una duda no relacionada con el tema de hoy, aunque espero sea de interés para otros lectores de tu blog: ¿cómo hacer para que en una o más entradas específicas del blog -pero sólo en ésa o ésas- desaparezca la sidebar lateral y el post pase a ocupar íntegramente la ventana?

Gracias anticipadas.

Responder
John Mistery Doe  

Hola JMiur!
Eres un Crack me encanta este nuevo gadget, de nuevo te has superado!
Como siempre cundo me ilusiono con algo nuevo para el blog me surge algún problema, he seguido todos tus pasos pero no se cargan las entradas relacionadas, es decir, aparecen los contenedores de las entradas pero dentro solo pone “UNDEFINED”.
¿Cual puede ser el motivo? SOS!
Haber si puedo darle pasaporte de una vez al Linkwhitin, Gracias por compartirlo. Saludos!

Responder
JMiur  

Adalberto:
Pués, en realidad, nunca nada está listo y terminado ... por suerte :D

Gem@
Y eso que no le adosé el cuenta-chistes :D

deathdan93:
Pruebe y cuente.

Beben Koben:
Thanks to you :D

César:
Depende. Si se trata de unas pocas entradas, pueden usarse los condicionales de Blogger:
<b:if cond='data:blog.url == &quot;URL_post&quot;'>
<style> #sidebar-wraper {display:none;} </style>
</b:if>
agregando más detalles que dependen del CSS de la plantilla.

También pese hacerse lo mismo colocando la etiqueta STYLE directamente en esas entradas pero, en ese caso, debería usarse el MORE o algo así y poner STLE debajo para evitar que se oculte también cuando no se está en una entrada individual.

Otra forma es dar esa opción a todas las entradas

John Mistery Doe:
Eso debe pasar porque estás llamando a la función con el nombre de la función del post anterior. Si n oleo mal, dice:

<script src='/feeds/posts/default/-/Lista de Juegos?alt=json-in-script&amp;callback=leerpostetiquetas&amp;max-results=50' type='text/javascript' />

donde la función se llama leerpostetiquetas
pero esta se llama leerpostetiquetasslider

o cambias el nombre de la función en el script, o cambias la llamada:

<script src='/feeds/posts/default/-/Lista de Juegos?alt=json-in-script&amp;callback=leerpostetiquetasslider&amp;max-results=50' type='text/javascript' />

Responder
Céz  

Madre santa!!! JMiur no sé cómo lo haces pero eres todo un mago!!! tengo que agregarlo a mi blog -claro cuando este completo- jeje. Tu entrada va directamente a mis favoritos :D

Muchas gracias!

Responder
Zoro Swordsman  

how to add the number of thumbnails ??? ;)
suppose to 6 thumbnail

Responder
Adrián J. Messina  

Probándolo rápidamente me funcionó sin problemas en el blog de pruebas.
Ahora voy a intentar adaptarlo con algo de CSS a el blog original.
Vos sabés Jmiur que mi blog tiene scripts raros que bloquean sin sentido, por ahora no surga problemas.
Ojalá pueda dejarte tranquilo el fin de semana.

¿te acordás que estuve probando mostrar el total de entradas con JSON?
Al final quedó ahí me rendí, pasaron cosas raras, hasta ayer intenté.

Una bronca terrible, ojalá entendiera algunas cosas mejor.
Lo que ocurre es que uno arrastra errores de cuando empezó y de ahí se hizo una bola. Es casi como los inicios de Windows.

Abrazo y buen fin de semana.

Responder
Karla  

Maravilloso JMiur!, me encanta la idea de ponerlo en un slider, si fueran las imágenes más grandes enloquezco XD.

Responder
JMiur  

Zoro Swordsman:
The number to load in the slider is defined by this:
var relmaxamostrarslider = 20;

Adrián J. Messina:
Pruebe y luego cuenta el resultado :D
Sí, recuerdo ese tema y no le veo solución salvo limpiar todo; a mediad que se agregan cosas, las posibilidades de error aumentan.

Karla:
Si en lugar de uilziar las imágenes que están en elfeed y define Blogegr, usas este otro método, esas imágenes podrían ser de cualquier tamaño ya que es una forma de leer la imagen real que está en el post así que ... puede enloquecer tranquila :-D

Responder
NMitra  

no funciona. escribió "undefined". :(

Responder
JMiur  

Sí. Funciona.

Está ahí en la entrada funcionando y está funcionando en todo este blog y en otros.

Si mi comentario terminara allí, sería inútil.

¿Qué te parece si explicas que te ocurre, donde tienes el ejemplo, etc, etc etc?

Responder
lerh  

Hola JMiur, disculpa mi ignorancia intente agregar este post cambiando los valores y tomando como base la entrada anterior, y no puedo me queda todo mal me podrías explicar? por favor, porque me encanto tu entrada

Responder
JMiur  

Tendrías que mostrarme donde está tu ejemplo.

Responder
SmiThzhiTo  

Hola soy novato en esto y necesito una ayuda mira quisiera saber: que imagen por defecto pongo? me dice "var relimagenpodefectoslider = "URL_imagen"; // la imagen por defecto" y lo otro es donde coloco el codigo que esta debajo de esta palabra "Para que esto funcione lo fundamental es el CSS" bueno espero que me ayudes y de antemano Gracias

Responder
JMiur  

Imagen, la que quieras. La subes a alguna parte o al mismo Blogegr y usas la dirección URL que en ese caso es lo que ves en el atributo SRC de la etiqueta IMG.

El CSS puede ir en el mismo elemento HTML donde colocas el resto, en el post si va en un post o implemente, antes de &lt/head> en tu plantilla.

Thee teddy  

what i must change this "relimagenpodefectoslider var =" URL_imagen "/ / the default image" i dont understand.. URL_imagen = ???

JMiur  

the url direction of the image

Responder
SmiThzhiTo  

Hize todo los pazos pero no logro encontrar esto < div id='postsrelacionados' > para poder reemplazar el otro codigo con las flechas. que puedo hacer alli? , lo busque tambien con Crtl + F pero nada :/

Responder
JMiur  

No sé si lo habías agreagdo alguna vez.

Responder
lerh  

hola que tal JMiur mira en este archivo te describo lo que hice espero me puedas ayudar gracias

enlace

Responder
JMiur  

Tendría que ver el ejemplo concreto.

Responder
lerh  

a ver JMiur aki lo hice en un blog de pruebas
http://pruebaslerh.blogspot.com/

mi blog es:

http://conta-lerh.blogspot.com/

Responder
JMiur  

Como esta entrada es una variación de una entrada anterior, te falta una parte; fíjate acá.

Es, donde dice que debes editar esta parte que es la que muestra las etiquetas de las entradas

<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
.......
</b:loop>

Allí, hay una etiqueta script a la que sólo debes cambiarle el nombre de la función. En esa entrada dice:

callback=leerpostetiquetas

y con este modelo debes poner:

callback=leerpostetiquetasslider

Responder
Edgar  

hola... disculpa una pregunta, no se si sea tonta o complicada pero esta es... quisiera saber si se podría usar el mismo slide pero no para entradas relacionadas, es decir, que las entradas que aparezcan sean debido al resultado de una palabra clave ejemplo (http://blog.blogspot.com/search?q=prueba) pero que esta no sea etiqueta, si no solo el resultado de una busqueda?... quisiera saber si existe un metodo, pues lo he estado buscando demasiado... saludos y gracias.. excelente blog.

Responder
JMiur  

Este tip ode scripts no interpretan páginas web sino los feeds disponibles de algún sitio y por lo tanto, si el feed existe, se puede leer pero si no existe, no.

Los feeds disponibles en Blogger son los enumerados en esta entrada pero no todos ellos son accesibles con JSon ni todas las opciones están disponibles.

Responder
EpideMia  

Jmiur, te hago una consulta porque no logro hacer que funcione.

el html lo puse en una entrada para que lo puedas ver.
http://epidemia-mella.blogspot.com/2011/06/prueba-para-postsrelacionadosslider.html

pareciera ser que el script funciona, pero no lee las entradas del blog.

puede ser que halla que poner el feed de del blog en alguna parte y no me estoy dando cuenta??


esta es la tercera vez que me siento a intentar poner este truco, pero no sale y me gusta mucho.

una última pregunta que no me quedó claro. esto funciona para entradas relacionas o para las últimas entradas??
si es solo para las relacionadas,se puede cambiar para que lea las últimas??

muchas gracias

Responder
JMiur  

Como esta entrada es una continuación de la anterior, te faltaría agregar una aprte que es laq ue lee las etiqeutas de las entradas y las guarda. Fíjtate acá y en esa aprte que dice:

<b:loop values='data:post.labels' var='label'>
.......
</b:loop>

Sólo cambia el nombre del script:
leerpostetiquetas
por este otro:
leerpostetiquetasslider
leerpostetiquetas
leerpostetiquetasslider

Responder
estrategia  

Hola, a mi no me sirve, sigo los pasos así como estan pero no me sirve no funciona no se muestran las entradas relacionadas

Responder
JMiur  

Si acá funciona es que sirve.

Es obvio que estás haciendo algo erróeneo pero, como ni muestras un ejemplo ni tienes un perfil habilitado, no hay manera de saberlo así que tu comentario es completamente inútil.

Responder
TuMultitec  

hola que tal e estado buscando algo como esto--> https://lh6.googleusercontent.com/-Kl0D2y3Ks0Y/Tix-YIVl4JI/AAAAAAAAA4c/oBio_lNemeA/Captura.PNG

que lo puedes ver en esta web--> http://www.webadictos.com.mx/

se ve bastante bueno.y e visto que las entradas que se muestran son de solo una etiqueta.

espero y m ayudes.. saludos..:)

Responder
Ariane  

genial, pretendo usar no próximo template, obrigada :)

Responder
JMiur  

Esperaremos esa plantilla :D

Responder
JMiur  

TuMultitec:

Cuál es el script que usan no puedo decirte. Hay decenas de formas de hacer lo mismo en Blogger, utilizando Json que es lo que permite leer los feeds; la parte gráfica, es variable.

Las entradas relacionadas son aquellas que poseen una cierta etiqueta así que, básicamente, es lo mismo.

Responder
Daniel Paredes  

Hola, JMiur. La herramienta es buenísima, pero aún no logro implementarla. Siempre me falla algo. :(
Por ahora seguiré usando LinkWithin. A propósito, tengo un problema con este aparatejo: siempre repite más o menos las mismas entradas (que no son relacionadas con la etiqueta, muestra lo que quiere), y hay una publicación que no la muestra jamás, a pesar de que mis posteos son pocos. ¿Se te ocurre qué puede estar interfiriendo en esa publicación para que LinkWithin no la registre?
Muchas gracias.
Saludos

Responder
JMiur  

No. Ni idea; eso, depende pura y exclusivamente de ellos; desconozco cuál es el algoritmo que utilizan para seleccionar las entradas a mostrar.

Responder
deathdan93  

Estoy experimentado con esto :D y se me ocurre utilizarlo con jQuery, ya que lo tengo en mi blog. ¿Como podría hacerse?

Responder
JMiur  

No tengo idea :D

Responder
The most creative ideas  

Lo he probado, genial tu trabajo amigo, pero si pudieras explicarme para poder adaptarlo solo para entradas individuales. Pues cuando entro a mi pagina principal me salen las etiquetas por cada resultado del mismo modo cuando realizo una búsqueda!

Responder
JMiur  

Ls entradas relacioandas deben estar siempre condicionadas pora que sól osean visiblres en los posts. Para eso, debes colocar los códigos así:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
.... acá el script
</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
.... acá el HTML con el DIV postsrelacionadosslider
</b:if>

Responder
The most creative ideas  

Hermano eres un geneio! Estaba a punto de descartarlo, muchisimas gracias... sigue asi! :D

Responder
CocinaCoco  

Hola JMiur!esta entrada me encanta y estoy intentando con todas la ganas de hacerlo funcionar debe hacer 3 dias que estoy con esto,junto con la entrada anterior logre bastante,queria pedirte si por favor podrias verlo y decirme que me esta faltando,porque no consigo que salgan las imagenes,me sale el famoso "undefined" ya cambie todo como explicas en otras cocnsultas pero nada, donde me estoy equivocando?
agradeceria tu ayuda.
aqui puedes verlo.
http://cocodancing.blogspot.com/
un saludo!

Responder
JMiur  

Creo que, como esta entrada es la continuación de otra o una variante, te falta colocar el script que carga los posts; esta parte:

<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=leerpostetiquetas&amp;max-results=50&quot;' type='text/javascript'/>

Fíjate en la entrada anterior para ver exactametne donde lo debes colocar.

Responder
CocinaCoco  

revisé todo y ya esta puesta esa parte,debajo de data:postLabelsLabel :(

Responder
JMiur  

No sé a que parte te refieres; recuerda que sólo veo el código fuente y ahí, ese script no está y por eso no hay datos.

Ahora reviso un poco más y veo que no hay etiquetas en tus entradas o por l omenos, no veo dónde estan. Si no las tienen, los relacioandos no funcionarán porque justamente, relacionan eso.

Responder
CocinaCoco  

Entiendo,en realidad en ese blog estaba probando ahora voy a trasladarlo a mi nuevo blog aver que pasa luego te comento,muchas gracias por responder.:D

Responder
CocinaCoco  

Gracias gracias!!!lo consegui JMiur!
desde ya que pude lograrlo con tus indicaciones y sobre todo con tu gran paciencia!!
esta bueno intentar e intentar equivocarse y volver a empezar, se puede!!
y cuando ves el resultado da mucha satisfaccion !
beso!:D

Responder
JMiur  

Me alegra que se arreglara :D

Responder
CocinaCoco  

Hola JMiur!!
aplique esta entrada a mi nueva plantilla con exito!
sera posible ocultar la leyenda "Etiquetas" del pie de las entradas?o al tener este truco instalado no es posible?
Saludos!:D

JMiur  

Sí, la puedes eliminar editando el elemento blogs en al primera ventana de Diseño y desmarcar esa opción.

Sino, también la puedes eliminar buscando el DIV que ahs agregado:

<div id="postsrelacionadosslider">

ese texto esta justo encima de ese DIV así que bastaría eliminar lo que dice. Puede ser que tenga la palabra Etiquetas o un código de Blogger.

CocinaCoco  

quedó perfecto!!JM,muchisimas gracias!
muy buen finde para vos!

Responder
Richard  

siempre me marca undefined..

JMiur  

Pués tendrás algun error. No puede saberse sin ver el ejemplo.

Responder
Pepe Pilato  

¿Esta parte la estoy agregando bien? Todo lo demás no hay problema


<div class='post-footer-line post-footer-line-2'><span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=leerpostetiquetasslider&max-results=50"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
</span> </div>

JMiur  

Eso está bien pero no sé dónde lo estás agregando o cuál es el problema que te surge.

Responder
nightcrawler23  

Hola, acabo de colocar las entradas relacionadas en mi blog pero quisisera saber como hacer para que tanto las miniaturas como el titulo del mismo queden centrados en mi blog, ojala me puedas ayudar, saludos...

JMiur  

Dime en cuál de tus blogs y centrados con respecto a que.

nightcrawler23  

este es mi blog: www.solopelisdvdfull.com.ar y si podes decime como hacer para modificar mis commentarios y que queden como en tu web, numerados y con un formato copado...

JMiur  

No veo que en ese blog hayas incluido las entradas relacionadas.

El sistema que utilizo para los comentarios es el que esta explicado en esta entrada.

nightcrawler23  

te hago las ultimas haber si me podes ayudar, como hago para que tanto el top 5 como los widget de etiquetas (año, peliculas alfabeticamente e idioma tengan el fondo transparate y no ese blanco que aparece??? Y como podria modificar el buscador ya que al buscar no encuentra nada, saludos master of the universe...

JMiur  

El color de fondo está definido en esta regla:

.list-label-widget-content LI {
...
background:#fff url('http://4.bp.blogspot.com/-8BwW0J8z1bA/TqsWlyW3jLI/AAAAAAAAAp4/64kbgEmltLY/s1600/li.png') no-repeat;padding-left:35px;
}

y debes cambiar el color #fff por transparent o simplemente no poner nada.

Lo del buscador, depende de la indexación del sitio. No es un tema de diseño. Fíjate en esta entrada

nightcrawler23  

Gracias genio... cualquier cosita puedo contar con vos??? Abrazo..

Responder
Sack  

UNDEFINED, como lo soluciono?, segui todas las instrucciones aunque tuve que hacerlo un poco a mi manera ya que en mi plantilla no aparecia exactamente los codigos indicados en este y el anterior tutorial, por ejemplo en el lugar donde deveria decir esto:



,
.... aqui iba el codigo....



a mi me aparece asi:



,
... y aqui lo puse...



lo que debia agregar era esto:


< script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=leerpostetiquetas&max-results=50"' type='text/javascript'/ >

pero me daba error por lo que tuve que agregarle un al final


bueno intente de varias maneras pero no me funciona, me aparece el UNDEFINED, incluso hice un blog nuevo con la misma plantilla con unas cuantas entradas con las mismas etiquetas pero sucede lo mismo, tal vez en la plantilla que uso sea un poco diferente, podrias ayudarme, aqui te dejo la direccion de mi blog para que veas la plantilla que uso http://infowinner.blogspot.com/ aunque de momento le quite el slider

Espero tu ayuda
Saludos

JMiur  

El código no se ve y si has quitado tu ejemplo, nada puedo hacer.

Sack  

va que raro? si puse el ejemplo.. aqui en el cuadro para escribir el comentario no me permitia escribir el javascript y le tuve que poner espacio despues del "<" para que me permitiera puplicarlo, pero el resto no aparecio :O

Bueno aqui esta de nuevo mi problema:

por ejemplo en el lugar donde deveria decir esto:

< b:loop values='data:post.labels' var='label'>
< a expr:href='data:label.url' rel='tag'>< data:label.name/>< /a>
< b:if cond='data:label.isLast != "true"'>,< /b:if>
.... aqui iba el codigo....
< /b:if>
< /b:loop>

a mi me aparece asi:

< b:loop values='data:post.labels' var='label'>
< a expr:href='data:label.url' rel='tag'>< data:label.name/>< /a>
< b:if cond='data:label.isLast != "true"'>,< /b:if>
... y aqui lo puse...
< /b:loop>
< /b:if>

lo que debia agregar era esto:

< b:if cond='data:blog.pageType == "item"'>
< script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=leerpostetiquetas&max-results=50"' type='text/javascript'/>

pero me daba error por lo que tuve que agregarle un < /b:if> al final

bueno intente de varias maneras pero no me funciona, me aparece el UNDEFINED, incluso hice un blog nuevo con la misma plantilla con unas cuantas entradas con las mismas etiquetas pero sucede lo mismo, tal vez en la plantilla que uso sea un poco diferente y tal vez tengo que agregarle algun codigo mas o en otra ubicacion..

JMiur  

El código original dice algo así:

<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>

Lo que veo en tu explicación es un </b:if> que sobra y por eso el error.

Con el agregado diría esto:

<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != "true"'>,</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=leerpostetiquetas&amp;max-results=50&quot;' type='text/javascript'/>
</b:if>

</b:loop>

Eln la etiqueta script que muestras también es un error usar el carácter & que debe ser reemplazado por &&

Responder
Amets Eroak  

Kaixo JMiur, yo no tengo esta parte del codigo en la plantilla



,


Que lugar alternativo podria usar para pegar el json?

Responder
Amets Eroak  

POr lo que veo no me ha pegado el codigo, me refiero a la parte del codigo <b:loop....

Gracias

JMiur  

No sé cuál es tu blog. Si se muestran las etiquetas, el bucle existe.

Si no existe, simplemente se agrega porque para agregar posts relacioandos, deben leerse las etiquetas.

Amets Eroak  

No muestro las etiquetas. De todas maneras probe a insertar el bluqe entero en el post-footer y si me aparecen las etiquetas, pero por lo que se ve, hay algun problema con json, ya que me dice que undefined.

www.gazatik-gazaruntz.org

Gracias JMiur

JMiur  

Eso es porque estás usando la función de la entrada anterior:

?alt=json-in-script&callback=leerpostetiquetas&max-results=50

en lugar de esta:

?alt=json-in-script&callback=leerpostetiquetasslider&max-results=50

simplemente cambia leerpostetiquetas por leerpostetiquetasslider

Amets Eroak  

Joe, efectivamente JMiur. Tenia mal puesta el callback. Joe, y mira que le estado dando vueltas y vueltas, cosas mas obia.

Gracias por tu ayuda!

JMiur  

Me alegra que se solucionar. Es fácil confundirse entre los dos modelos.

Amets Eroak  

La verdad que si, y mas si andas a varias cosas a la vez. Gracias de nuevo.

Responder
Jordan Vicencio  

Muchas gracias por el tutorial, esta muy muy bueno.
Pero tengo dos dudas:
¿Se pueden eliminar las etiquetas al pie de las entradas? Lo intente desde diseño, pero o se eliminan, imagino que desde el HTML se podrá, pero lo ignoro.

Mi segunda duda es que no lo puedo centrar, lo intente cambiando en position, exactamente aqui:

#postsrelacionadosslider {
height: 240px;
position: relative;
width: 635px;
}

En position coloco center, pero no funciona. ¿Como puedo hacerlo?
Te dejo aqui mi blog para que veas que intento hacer.

http://labruteza.blogspot.com/

Muchas gracias

JMiur  

No entiendo eso de si "¿Se pueden eliminar las etiquetas al pie de las entradas?"

Como el contenido flota, el contenedor puede sentarrse con margen:

#postsrelacionadosslider {
.....
margin: 0 auto;
}

o colocando manualmente un valor en margin-left; position center no existe.

Responder
Jordan Vicencio  

Disculpa, olvidé preguntar una cosa más, sucede que una de mis entradas no tiene etiqueta y no la tendrá tampoco, y me sale este cuadro de post relacionados con UNDEFINED. ¿Puedo controlar en que entradas no colocar esto?

Por ejemplo: http://labruteza.blogspot.com/2012/11/videos-mas-recientes-sean-todos-muy.html

JMiur  

No veo donde se ejecuta el script que lee las etiquetas: leerpostetiquetasslider() Llegado el caso, fíjate en la entrada previa a esta:
http://vagabundia.blogspot.com/2010/12/posts-relacionados-con-miniaturas.html

Tal vez, si no hay etiquetas, podrías evitar que se ejecutara, agrenado una línea al script:

function mostrarrelacionadosslider() {
if(relurlsslider.length==0) { return; }
........

Jordan Vicencio  

Muchas Gracias JMiur ha sido exactamente como tu has dicho. Ahora están centradas las entradas relacionadas y ya no aparece UNDEFINED en el post ese, pero aun así aparece ocupando el espacio. Pero con lo que he logrado gracias a ti estoy mas que satisfecho.

Con respecto a lo de las etiquetas que pregunté, me refiero a estas, que aparecen en todas las entradas ahora:

https://lh5.googleusercontent.com/-sNVeYccBBog/UKWHHHdHHkI/AAAAAAAAATE/rqRVmmEGlco/s961/Etiquetas.png

¿Es posible ocultarlas?

¡Muchas gracias! :D

JMiur  

El espacio que queda podría eliminarse ocultandolo, si cambais la línea del script otra vez y en lugar de:

if(relurlsslider.length==0) { return; }

colocas:

if(relurlsslider.length==0) {
$('#postsrelacionadosslider').hide();
return;
}

Para eliminar als etiquetas que se meustran encima, no queda otra alternativa que editar el HTML de la plantilla porque no hay forma de identificarlas.

Busca algo así que es lo que verías antes del script que las guarda

<a expr:href='data:label.url' rel='tag'><data:label.name/></a>

y borra esa línea. Si no quieres hacer eso, simplemente, agrégale una clase a los enlaces:

<a class='mietiqueta' expr:href='data:label.url' rel='tag'><data:label.name/></a>

y las ocultas con CSS:

.mietiqueta {display:none;}

Jordan Vicencio  

Déjame decirte que ¡eres un maestro!
Me ha servido todo lo que has dicho, me suscribo a tus canales.

Pero me salta otra duda (espero no ser muy molesto D:). He removido las etiquetas tal cual me has dicho, con la primera opción, eliminando:



Pero el problema es que ahora en su lugar quedan las "comas", las que separaban a las etiquetas.

En su lugar ahora quedan ,,,,,

¿Es posible modificar eso? No se nada de HTML, solo lo mas básico, imagino que se pueden eliminar :S

http://labruteza.blogspot.com/
De antemano muchísimas gracias.

JMiur  

Pues sí, faltaría ese detalle. Será sencillo pero otra vez debes editar el HTML. En el mismo lugar, fíjate que debe haber una línea de código que dice algo así:

<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>

elimínala y desaparecerán las comas.

Jordan Vicencio  

Muchisimas gracias JMiur, ha sido una gran ayuda y para muchos también :D

¡Saludos!

Jordan Vicencio  

Aprovechando la gran ayuda que me has dado, me gustaría hacerte una ultima consulta y de la que no he encontrado nada. Se trata del espacio que hay entre la barra del menú desplegable que tengo y las imágenes que hay encima. ¿Es posible eliminar ese espacio?

JMiur  

Una regla como esta eliminaría el espacio:

#HTML7 {margin-top:0:;}

Responder
Sack  

Hola JMiur,
En el Script ¿como debo modificarlo para que se desplaze hacia arriba y abajo?, y no hacia los lados.

parece que es en esta zona:

function desplazarrels(direccion) {
var div = document.getElementById("postsrelacionadoscontenedor");
var pos = parseInt(div.style.left);
pos = pos + (SRwidth * direccion);
if(pos > SRmin) { return }
if(pos < SRmax) { return }
div.style.left = pos + "px";
}

Ya tengo modificados los estilos para que todo quede bien.
Saludos

JMiur  

Dependerá de la estructura que tengas armada.

Imagino que cambiando left por top y SRwidth por alguna otra variable que defina la altura al igual que los valores SRmin y SRmax

Responder
Samir Gaitan  

Muchisimas Gracias todoo me funciono a la perfeccion :3

Responder
Irvis Osbel Medina  

Hola el archivo tex para descargarlo no me abre...me sale un ventana de erro. Me podria pasar el codigo javascrip

Responder
Borja molla robles  

Hola. Muy bueno el post. ¿Se puede hacer lo mismo pero ponerlo de manera vertical y en la columna derecha?
Tengo un blog especializado en baterias (el instrumento) y me gustaria poner una ventana anunciando los proximos eventos. O sea, asignar por ejemplo la etiqueta "clinic" a cada entrada que quiero que alli aparezca.
No sé si me he explicado bien.
Un saludo y enhorabuena por tu blog.
La dirección del mio es esta: http://www.massbateria.com

JMiur  

Se puede poner o armar como se quiera. Lo que muestra el post es un ejemplo genérico. El resto es un tema de diseño personal que debe ser modificado y adaptado a cada caso.

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