JMiur [E]

Hay varias entradas bastante viejas (el reloj de la web es particularmente cruel y todo es viejo en cinco minutos) donde se explican diferentes métodos para mostrar entradas relacionadas en Blogger [1] [2] [3]

Muchos otros emplean LinkWithin que es un sistema externo que permite agregar un gadget para diferentes plataformas y es un método muy usado porque se ha puesto de moda y también porque muestra un imagen junto con el título y el enlace: Ver detalles en El escaparate de Rosa [1] [2]

Como no me gustan las modas ni los servicios externos, vamos a ver una forma de transformar el método original que mostraba una lista con los títulos y los enlaces de las entradas relacionadas para que sea similar al otro y se le añadan las miniaturas de las entradas.

Para eso, basta seguir con la idea de lo explicado en las entradas que hablaban de JSON y de la forma en que podemos acceder a los diferentes datos de los feeds de nuestro blog. Uno de ellos es justamente ese, la miniatura (si es que existe una imagen en el post) así que bastaría modificar aquellos scripts originales para leer más datos y luego, cambiar la forma en que son mostradas.

Repaso el tema de los posts relacionados.

Tiene tres partes; la primera es el script en si mismo y que agregamos a la plantilla antes de </head>:
<script type='text/javascript'>
//<![CDATA[
  ... acá pegamos el contenido del archivo de texto ...
//]]>
</script>
Allì sólo es necesario establecer los datos personales:

var relmaxamostrar = 4; // cantidad de entradas a ser mostradas
var relmaxlen = 100; // la cantidad de caracteres de los resumenes
var relimagenpodefecto = "URL_imagen"; // la imagen por defecto

Las otras dos partes requieren desplegar los artilugios de la plantilla. Buscamos el código donde se muestran las etiquetas en el footer de cada entrada y allí agregamos lo indicado en color:
<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>
Eso, condicionará el llamado a JSON para que sólo funcione en las entradas individuales y leerá los feeds de las etiquetas de nuestro blog.

callback=leerpostetiquetas es la función de JavaScript que se ejecutará e interpretará esos datos
max-results=50 es la cantidad de datos a leer y puede ser cualquier número pero, siempre debe tenerse en cuenta que si el número es muy alto, el proceso será más largo y por lo tanto, la carga del blog será más lenta

El tercer paso es decidir donde vamos a mostrarlo. Normalmente, debajo de las entradas así que deberemos buscarlo y eso no es fácil de explicar porque depende de cada plantilla pero, por ejemplo, podemos intentar encontrar alguno de los DIVs donde se muestran el autor, la fecha, los botones para compartir, etc que suelen estar en algo así:
<div class='post-footer-line post-footer-line-X'>
  .......
</div>
Agregamos entonces otro DIV que también condicionamos:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div class='post-footer-line post-footer-line-4'>
    <div id='postsrelacionados'>
      <script type='text/javascript'>mostrarrelacionados();</script>
    </div>
    <div style='clear:both;'/>
  </div>
</b:if>
Eso es todo, faltará claro, el CSS que es personal y agregamos junto con el resto, entre <b:skin> y </b:skin> o bien, tambien lo podemos condicionar y poner antes de </head>. Ver/Ocultar [+]


Para quien quiera personalizar un poco las cosas, veamos si es posible explicar el funcionamiento de los scripts y las posibles variantes. Ver/Ocultar [+]
¿Será esto mas fácil que agregar un gadget pre-diseñado? No, claro que no pero, algunos nos resistimos a eso de hacer click-click-click y preferimos el estilo "fatto in casa" porque el exceso de clicks genera callos en el dedo índice y también en las neuronas.

238 comentarios:

Adrián J. Messina  

¡Wow! Fenomenal. Magnífico trabajo.
Lo veo a simple vista y sinceramente si, es genial.
Es que lo casero tiene un gustito muy especial y en especial, único.
¡A trabajar se ha dicho!

Domin-Omega  

¿Así que el secreto de las entradas relacionada está en la url del feed? ¿Qué ocurre si la entrada tiene más de una etiqueta, data:label.name considera la primera o la combinación de todas?

Unknown  

Agradecida que el reloj solo sea para la Web ;)

Precioso Jmiur, como estoy de retiro espiritual tengo mucho que probar:D

Unknown  

Esto era lo que estaba buscando, mil gracias, el de Linkwithin no me gustaba ni poquito, ya que a mi me gusta las cosas a mi modo, y de alguna forma, también me gusta complicarme la vida :D

Genio en Potencia  

hace un par de días no visitaba el sitio. Y queiro hacer una pregunta para los participantes, que tan aplicable es lo que escribe jmuir a wordpress con dominio propio.

gracias

JMiur  

Adrián:
Ohhh es que si no ponemos algo caserito, todo sería muy pero muy aburrido :D

Domin-Omega:
Eso es todo, el script es siempre el mismo porque los datos son siempre los mismos así que las diferencias están en la URL que cargamos y en la forma en que mostramos las cosas.
Si una entrada tiene varias etiquetas, este método las lee todas ya que cada etiqueta tiene su feed asi que si tiene tres, habrá tres feeds y se leerán tres feeds. De ahí que en este caso de los relacionados, una parte del script verifica que no haya repeticiones y los elimina .

Graciela:
Puebe, va a ver que es bastante fácil y que las posibilidades de mostrar las cosas son muchísimas.

Yurika-Chan:
Esto es ideal para eso, aunque no es tan complicado, basta un poco de paciencia. La ventaja es esa de la que hablas: poder personalziarlo a gusto.

Genio en Potencia:
Depende de qué cosoas sean. Esto, puede usarse en WP aunque no tiene mucho sentido porque hay métodos mucho más adecuados para leer las bases de datos y establecer relaciones entre las entradas.
Si hablas de JS, HTML o CSS el sistema donde esté un blog es indiferente.

@rielCastellanos  

Jmiur, tengo una pregunta, quizas tu si puedas solucionar el problema.

Veras cuando busca esos articulos relaciondos, carga un archivo que dependiendo del numero maximo que hemos puesto, es demasiado grande.

En mi caso, este http://www.mejorarfinanzas.com/feeds/posts/default/-/Consejos%20de%20Ahorro?alt=json-in-script&callback=related_results_labels&max-results=7

mide 44 kilobites.

¿44 kb solo para recoger 7 titulos?

Hay alguna manera, para que cargue el feed, pero que solamente cargo los titulos de los articulos relacionados, que al final de cuentas es ese texto (el titulo del post) el que miran los lectores.

Gracias.

JMiur  

Lo que se lee (se carga en la memoria y por lo tanto es de uso temporal) es el archivo de feeds codificado con una longitud que dependerá de la cantidad de datos solicitados.

En ese caso, el texto (lo puedes ver colocando esa URL en el navegador mismo) tiene 44kb que no es una cifra grande. Un feed normal de Blogger, codificado con Json pesa más de 200KB, el de Feedburner unos 150, etc, etc. En términos de acceso a datos, no son archivos "grandes".

Salvo sistemas que permitan manejar base de datos (que tampoco tienen un costo cero en cuanto a procesos de carga y lectura) no existe otra forma de acceder a la información. Incluso, en esos otros sistemas, se usa PHP pero lo que se lee es el mismo archivo o archivos similares.

En situaciones normales, leer 7 entradas es prácticamente nada en términos de performance y se pueden usar tranquilamente, valores de 50, 100 e incluso más.

No existen parámetros para obtener datos filtrados o parciales.

matias  

Hola JMiur buenas noches acabo de hacer todo los pasos pero no me sale las entradas relacionadas cual puede ser problema porfavor espeo su respuesta gracias.

JMiur  

No sé en cual de tus blogs mirar.

Anónimo  

Bien!!, lo logré... pense que sería dificil :D

Pero tengo una pregunta, como hago para que NO se habra en otra pestaña al hcer clic en una de las miniaturas ? ...

Muchas gracias, saludos!.

JMiur  

Fijate que en el script, donde se crea la salida, hay unos atributoos que dicen target='_blank' y que debes eliminar. Quedaría así:

salida += "<a href='" + relurls[r] + "' rel='nofollow' title='" + reltitulos[r] + "'><img src='" + relimagen[r] + "' /></a>";
salida += "<h6><a href='" + relurls[r] + "'>" + reltitulos[r] + "</a></h6>";

Si eso te complica, simplemente busca _blank y cámbialo por _self

@rielCastellanos  

Muchas gracias por responder JMIUR

Flenning  

No hay caso, no logro que aparezca. Compila sin errores pero no acierto a detectar el problema. Deje el codigo en el html por si queres mirrlo. Tambien esta el gadget de Linkwith para que me siga mostrando algo.

Gracias y muchs felicidades-

JMiur  

Flenning:
No revisé todo tu blog pero en los tres o cuatro posts que vi, lo veo funcionando bien.

Flenning  

Finalmente logré acomodarlo anoche. Gracias, JMiur.
Quisiera hacerte unas preguntas respecto del algoritmo de búsqueda de relacionados

1. En el algoritmo de búsqueda que usa Linkwith noté que obtiene thumbnail de los videos de youtube. Al no estar esta parte en el nuevo algoritmo debo poner imágenes en todos los posts o hacer algo parecido a lo que vos haces al analizar la categoría del post para evitar que siempre aparezca la misma imagen por defecto. La pregunta es ¿hay por ahí un algoritmo público que tenga en cuenta el detalle de los videos?
2. vi algunos posts que se referencian a sí mismos y también vi que aparecen algunas referencias “Undefined”. ¿Sabes cómo puedo solucionar esos errores?
3. Noto que el algoritmo prioriza, o eso me parece a mí, la referencia por label antes que por título. ¿Puede cambiarse eso? En mi caso sería más interesante.

JMiur  

Todo agregado puede hacerse; por ejemplo, si uno quisiera detectar los videos de YouTube, habría que analizar el contenido del post (que es dato que se tiene) y buscar allí el ID y en base a eso, usar la imagen de YouTube. En lo personal, me parece un poco engorroso y es preferible hacer algo más simple.

Como los feeds no muestran videos, lo que yo hago es agregar una imagen que no se ve en los posts pero que se ve en los feeds. Dado cualquier ID de YouTube que son 11 caracteres como:
VU51K6LuHIY
la imagen se obtiene con esta URL:
http://img.youtube.com/vi/VU51K6LuHIY/0.jpg
así que yo agrego esto:
<img src="http://img.youtube.com/vi/VU51K6LuHIY/0.jpg" style="left:-1000px;position:absolute;" />

Para que no siempre salga la misma imagen lo que hice fue eso que dice al final, simplemente coloco una imagen por categoria:
if(cat=="MIETIQUETA"){postimg = "URL_etiqueta1"}

Podría haber variantes y ponerse imágenes aleatorias, por ejemplo o, simplemente, si lo estético es importante, poner siempre una imagen en las entradas aunque sea oculta como en el caos anterior.

Si aprece undefined es que algo no está definido pero, deberías mostrarme la entrada concreta a ver si veo cuál es el error o que dato no esleido.

La referencia son las etiquetas, lo que hacen estos scripts de posts relacionados es buscar entradas con la misma etiqueta y no analizan los titulos; para eso, ser requeriría algo mchísimo más sofisticado.

Unknown  

mí me funciono pero no como yo quería, Jmiur te mande un E-mail espero me entiendas a lo que quise preguntar :P

Anónimo  

Definitivamente eres un crack! Gracias por compartirlo, me sirvió mucho.

Anónimo  

Solo una pregunta, yo puse en el script que mostrara como máximo 5 posts. Algunas entradas aveces las muestra completa, pero en algunas ocasiones solo muestra 4 o tres posts. Anda algo mal o esto es normal? Gracias de antemano, saludos!

JMiur  

Sí. Es probable que la parte donde se mezclan los resultados y se seleccionen aleatoriamente los que se van a mostrar tenga que ser ajustada de alguna manera; lo mismo pasa cunado son sólo los títulos pero ahí es menos evidente.

JMiur  

Daniel:

Me quedé pensando en eso y me parece haber dado con el error. Lo he probado en blogs auxiliares porque no tuve tiempo de probarlo en este pero, parecería ser que funciona. Subí un TXT con la corrección que en realidad, es sólo de una parte de la función original.

Bastaría entonces, reemplazar toda la función: function mostrarrelacionados() por el contenido de este archivo.

Mañana lo probaré acá :-)

Anónimo  

EXCELENTE, funciona a la perfección. Gracias por el aporte, saludos! :)

JMiur  

Perfecto :D

Ya está cambiado en este blog y el post ha sido actualizado.

Gracias por el aviso.

Unknown  

¡Hola JMiur!
Tengo un problema con los títulos de las entradas en miniatura, ya que éstos se muestran con una fuente muy pequeña. ¿Cuál puede ser el problema?

Desde ya, muchas gracias.

JMiur  

Ezeguko:

Simplemente agrégale el tamaño que quieras en esta parte:

.relsposts h6 {
.......
font-size: 11px;
line-height:1;
}

El valor 11 es el tamaño, pede ser cualquier otro y el valor de line-height es la distancia entre líneas si es que el título es muy largo y ocupa varias.

Unknown  

¡Muchas gracias JMiur! :D
Un par de consultitas más: ¿cómo puedo hacer para que no quede tan sobre el borde del post-footer? Fijate en mi blog Trecarunga que queda de esa forma, "en el borde" y quisiera que tuviera una distancia.
Otra, ¿cómo disminuyo la cantidad de caracteres en los resumenes? Probé disminuyendo el número de var relmaxlen = y funcionó...

¡Gracias otra vez!

Unknown  

Me corrijo: Probé disminuyendo el número de var relmaxlen = y no funcionó...

JMiur  

Sí; la longitud se controla con relmaxlen.

Tal como se ve en tu blog, si agregas esto, se separará de arriba y de abajo 20 pixeles; usa esa propiedad para darle la distancia que creas necesaria:

#postsrelacionados {
float:left;
padding: 20px 0;
}

Unknown  

¡Gracias JMiur! :D

JMiur  

Fíjate que el script dice esto en una línea:

relresumen[reltituloscantidad] = eliminattags(postcontent,75);

cambai eso así:

relresumen[reltituloscantidad] = eliminattags(postcontent,relmaxlen);

Unknown  

¡Gracias nuevamente! Está todo solucionado :D

Karla Castañeda  

:)Hola JMiur

Se ve interesante, casi me convence, pero siendo honesta lo que no me gusta del todo es el tamaño de la imagen, y si se crean estilos para aumentar su tamaño, no se verán nítidas y/o lucirán distorsionadas, a menos de que se obtengan desde el feed sin ser miniaturas(thumbnails).

Desconozco los principios y fundamentos sobre javascript, así que no puedo opinar mucho sobre lo del script que facilitas, sin embargo, Jmiur :) no creo que salgan callos en las neuronas por el hecho de usar servicios externos como LinkWithin, que además de ser útiles, son muy prácticos, pensando que no todos tienen tiempo de sobra para enredarse con temas ajenos a sus conocimientos y/o interés. Existen muchas maneras de ejercitarlas neuronas :D

JMiur  

Las imágenes serán iguales o similares uses el servicio que uses. En cuanto a si es mejor algo hecho que algo que hace uno o algo que ya esta prefabricado, eso es totalmente subjetivo; mis neuronas también se ejercitan así y cada uno puede ejercitarlas como se le de la gana. Yo nunca aconsejo usar esto o aquello porque no creo que en estas cosas haya algo que sea mejor o peor.

Kas-Tro  

@JMiur perdona la molestia pero el enlace del scrip esta caido..gracias esperare que lo suba para implementar este truco en mi nuevo blog.

JMiur  

Es un problema de Fileden así que, meintras tanto, los archivos los puedes descargar de acá

Kas-Tro  

Gracias ya lo descargue voy a provarlo..

Kas-Tro  

NO se que hize mal pero a mi me salen todas unas abajo de la otra alguna idea aqui un ejemplo http://www.10curiosidades.com/2011/02/10-curiosidades-sobre-el-hundimiento.html

JMiur  

Porque estás colocando el CSS con las etiquetes B:IF y STYLE dentro de b:skin y eso es un error, por lo tanto, nada de lo definido allí se toma en cuenta.

Dentro de <b:skin> </b:skin> no se colcocan etiquetas de ninguna clase.

Kas-Tro  

es que lei mal creia que agregamos junto con el resto, entre y siginificaba dentro.

JMiur  

Sín tambiens lo puedes colocar tal como dice el post sin problemas pero, las etiquetas STYLE están de más igual.

Kas-Tro  

una curiosidad que tengo comopongo el borde a las imagenes como los tienes medio redondiado.?

JMiur  

Fíjate en esta entrada.

Kas-Tro  

@JMiur Excelente pude hacer lo que queria, pero hace dias que vengo buscando como aplicarle borde, a las etiquetas pero no eh encontrado nada.

JMiur  

No sé a cuales etiquetas te refieres.

Kas-Tro  

A las etiquetas normalas que le colocas a las entradas me gustaria ponerle un borde y desupes aplicarle un hover para hacerlas mas llamativas, otra cosa que no entinedo en blog 10curiosidades.com les aplique un icono a las etiquetas de la sidebar pero el gaget de las entradas recientes tambien lo tomo y no tengo idea por que seria eso..

JMiur  

Ls etiquetas son enlaces asi que debería usarse una regla como esta:
.post-labels a { ............. }

Si agregas un fondo en esta parte:
.sidebar ul li, .rsidebar ul li, .lsidebar ul li { }
eso afectaráa todas las listas de las sidebars así que, si ese fondo sólo queire aplciarse a las categorías, por ejemplo, debería estar en esta regla:
#Label1 ul li {}

Kas-Tro  

.post-labels a {
color: #333;
text-transform: uppercase;
background: #db0000; /* Color de fondo */
-moz-border-radius: 5px; // en Firefox
-webkit-border-radius: 5px; // en Chorme y Safari
border-radius: 5px; // la propiedad según al w3.org
}

Con estos codigo logre ponerle el fondo y los bordes redondiados pero el color del texto no quiere cambiar si lo cambia cambia para todo los link ando buscando algo como se muestran las etiquetas en este blog.. http://gemablog-.blogspot.com/search/label/Blogger

JMiur  

No veo que hayas puesto nada de eso.
Los comentarios en CSS se escriben como el primero, con /* y */ y no como los otros.
Si has colocado color #333 en esa regla de estilo y todo lo que sigue es sintácticamente correcto, de ninguna manaera cambiará el color del resto de los enlaces del sitioy , a lo sumo si el color no cambia, deberá agregarse la palabra !important.

Gem@  

Me gusta esta forma de mostrar las entradas recientes, la tuve hace tiempo pero no daba tanto juego a personalizarlas.
El enlace del archivo parece que está roto, será algo pasajero o algún error?

Kas-Tro  

@Gem@

Aqui esta el enlace que Jmiur me paso cuando tube el problmea con el archivo. http://cid-9e6e2ced59738fb5.office.live.com/self.aspx/TXTS/relconthumbs.txt

JMiur  

Pués así es, Gem@, es el enlace que dejó Kas-Tro. Se ve que me olvidé de cambairlo en el post ... espero que ahora me haya acordado :D

Kas-Tro  

Lo colo que asi
.post-labels a {
color: #ffffff;!important
text-transform: uppercase;
background: #db0000; /* Color de fondo */
-moz-border-radius: 5px; /*en Firefox */
-webkit-border-radius: 5px; /* en Chorme y Safari */
border-radius: 5px; /* la propiedad según al w3.org /*
}

Pero me afecto los link de las entrada relacionadas que estan en
.jump-link {

En el blog de gem@ las etiquetas tiene el efecto que quiero pero ella no tiene un tutorial tampoco..

JMiur  

El código de tu plantilla dice:

.jump-link {
float:right;
background: #db0000; /* Color de fondo */
border: 0px solid #000;
-moz-border-radius: 5px; // en Firefox
-webkit-border-radius: 5px; // en Chorme y Safari
border-radius: 5px; // la propiedad según al w3.org
font-weight: bold;
padding: 1px 2px;
margin-left:200px;
}

y .post-labels a { ... } no está definido.

Gem@  

Me confundí en mi comentario cuando dije las entradas recientes, me refería a las relacionadas.
Gracias por el enlace Kas-Tro, sobre los estilos de las etiquetas que tengo en el post-footer si hay un tutorial:
http://gemablog-.blogspot.com/2010/11/personalizar-las-etiquetas-de-post.html

Gracias JMiur si HOY me da tiempo me permito el lujo de añadir las relacionadas con imagen a mi blog :D

JMiur  

Suerte, Gem@ ... y que se divierta :D

Nathy  

Hola yo tengo un problema :( recien instale esto en el Blog del Refugio de Animales que llevo porque es super util pero no me muestra las imagenes estoy hecha un lio!!! podrias ayudarme, si le coloco una imagen por defecto si me la muestra, pero lo que yo quiero es que me muestre cada una de las imagenes de los post relacionados como hago??? te envio el acceso aun post para que veas de lo que hablo http://www.refugioapanot.com/2011/03/barbie-una-peque-muy-carinosa.html

JMiur  

Nathy:
Pués si, por algún motivo,lo que se ve en los códigos fuentes de muchas de tus entradas es que falta justamente ese dato que es el que leen los feeds. No es que te falte agregarlo ya que es algo que Blogger debería colocar automáticamente.

Tal vez, podría haber alguna otra clase de alternativa pero habría que modificar un poco el script. Si me envias un mail, podría darte algún detalle más porque en un comentario, es muy complciado escribir algo así

del batitú  

Hola jmiur, cómo estás?
he estado buscando en tus post algo que quiero hacer, que se parece a este pero que no es igual, heheh, te explico: he subido a youtube videos con imágenes, y en un blog minimalista quisiera poner uno de los videos en la primera y única entrada que se verá al entrar al blog, y en el footer, en lugar de los datos de navegación anterior-inicio-siguientes, quisiera 3 o 4 miniaturas-links, que no serían a entradas relacionadas porque no voy a poner etiquetas, sino a entradas específicas que tendrán los otros videos cada una.
Cómo la ves? Ya has explicado esto o algo parecido? chas grá y saludos jmiur

del batitú  

ja! una línea de links como la que aparece en tu solapa "enlaces" o "estadísticas", es lo que quiero, aunque sin solapa.;)

JMiur  

Pero no entiendo el problema ¿Has hecho algo de eso? Porque por lo que entiendo, se trata de un tema exclusivo de diseño.

del batitú  

claro jmiur, de diseño. me compliqué al santo botón :D, encontré un post de Gem@ que me viene bárbaro. Gracias por tu tiempo. (tengo una conexión malísima, no sé cuántos mensajes iguales te mandé.perdón)

Unknown  

A mi tambien me salia el error "undefined" y lo solucioné subiendo el b:loop values='data:post.labels' var='label' para que el div que contiene el contenido relacionado estuviera después de que se hayan cargado las etiquetas, eso es lo que no estaba definido, las etiquetas, ya que primero cargaba el div de contenido relacionado y nos ejecutaba el script pero aun no se cargaban las etiquetas, saludos

Andres  

como hago para agregar las entradas relacionadas en el sidebar asi como tu las muestras

JMiur  

Veremos si en unos dias lo publico, Andrés.

Unknown  

La imagen que se carga de los feeds ¿es por defecto siempre la primera que aparece en el post?, o ¿es según el tamaño?, esque yo quiero que tomen siempre las primeras imagenes de los feeds (la que esta mas arriba xD).
En mis posts hay 2 imágenes, las cuales se vizualizan correctamente en los feeds, pero a la hora que se muestran en los posts relacionados con miniaturas en algunos cuadros aparece la primera imagen y en otros la segunda, y cada vez son mas miniaturas que muestran la segunda imagen, y yo quiero la primera en todas :(
Tiene que ver con los feeds o es debido a las imágenes, pues creo que esto me sucede desde hace algún tiempo en que picasa otorga a las imágenes https://hx.googlecontainer y no http://x.bp.blogspot.com o algo parecido.

JMiur  

Thor:
Sí, en teoría si; la imagen es la primera que aparece en el post es un dato que Blogger agrega a voluntad. Si se quiere usar otras, el script debe ser diferente, hay que leer la entrada, extraer las imágenes, etc, etc.

¿Por qué Blogger detecta una y no otra? Lo desconozco pero, n ocreo que tnga nada que ver con el cambio de URL de Picasa ya que las imágenes detectadas pueden estar en cualquier servidor.

Anónimo  

¡Estupendo!, me sirvió :D, aunque tuve que ajustar un poco el CSS para que cabieran 4 articulos y para que las letras se visualizaran, ya que están en blanco :P

solo una dudilla, ¿Cómo modifico el CSS para que cuando pase el cursor sobre el articulo este se cambie de color? (el que sea

JMiur  

Si estás utilizando los mismos nombres de clases, sería algo así:

.relsposts:hover {background-color:red;}

con el color que quieras.

Anónimo  

Gracias JMiur aunque eso me genera otro error. Al parecer...jeje todo lo configurado cambia, :$

el tamaño del titulo, el color del titulo... ¿Porqué pasa eso?

JMiur  

Eso no puede causar ningún tipo de conflicto con otra cosa salvo que la sintaxis esté equivocada.

Veo que tienes la regla agregada aunque no hay propiedades así que, simplemente para probar, colcoa esto:

.relsposts:hover {
background: red;
}

Verías lo que meustra esta captura.

Anónimo  

ah! ahora si :P aunque pensándolo mejor me quedo sin ese efecto, pensaba que iba a ser algo más espectacular. Gracias JMiur por tu tiempo :)

Andrés  

Hola, JMiur.

Logré instalarlo y hacer que funcione, pero no se cómo poner la letra en mayúscula y minúscula y que no quede toda en mayúscula. ¿Qué podrá ser?

Muchas gracias de antemano. Un abrazo

JMiur  

Eso ocurre porque la plantilla qie utilizas tiene definido que todos los textos del footer de las entradas se vean en mayúsculas:

.post-footer {
.......
text-transform: uppercase;
}

Puedes eliminar esa propiedad globalmente o , si quieres conservarla en el resto y que los posts relacionados no la utilicen, agregar la propiedad contraria en esta regla:

.relsposts {
.......
text-transform: none;
}

Eventualmente, puedes poner:

text-transform: none !mportant;

si es que no hay cambios.

GRUNGE1990  

Tengo un problema estetico con la slider jaja. Ocurre que quiero que aparezcan las tapas de los cds, no los botones de descarga en la thumbnails. Por favor decime que son tan groso como para resolverme ese problema te lo agradeceria muchisimo.
De todas formas muchisimas gracias por la excelente info.

JMiur  

Blogegr agrega en los feeds la primera imagen que haya en el post. Si lo hace mal o no lo hace, puede leerse de manera directa como muestra esta entrada

Si lo que quiere mostrarse es otra imagen que no sea la primera sino una del interior, deberá ser identificada de alguna manera, mediante una clase o un ID y luego, pensar cómo leer eso y extraerlo para lo que debe modificarse el script.

GRUNGE1990  

Voy a intentar ponerle un id y que lo llame, cualquier cosa vuelvo. Muchas gracias por tu ayuda.

GRUNGE1990  

Me funcionó, no lo puedo creer. Buenisimo gracias gracias!

XpertoMarketer  

Hola.
Esto se puede modificar para que muestre los últimos post de una categoría en la pagina de inicio?
Gracias

JMiur  

No tiene sentido modificarlo, leer las últimas entradas en una etiqueta determinada es más fácil. Fíjate en esta entrada o en esta otra.

Anónimo  

Hola jmiur, me funciona todo perfecto, lo que pasa es que no me muestra imagenes las minuaturas me aparece el texto pero la imagen no, como lo puedo solucionar?

JMiur  

Puede ser que Blogger no las incluya en los feeds de algunas entradas de tu sitio. Eso lo puedes comprobar miarando el código fuente generado y buscando si esxte una etiqueta LINL con el atributo rel="image_src".

Puedes usar lo explicado en esta otra entrada para obvair ese sistema y leer directamente la entrada.

Anónimo  

Ya hize lo que me dijiste JMiur pero sigue el problema, hay algo extraño: Las imagenes alojadas en blooger si me las muestra en las miniaturas, pero si las imagenes son alojadas en servidores externos no me las muestra. esto tiene solucion?

JMiur  

No veo que hayas hecho eso. Esl script sigue leyendo el feed:

if ("media$thumbnail" in entry) {
postimg = entry.media$thumbnail.url;
} else {
postimg = relimagenpodefecto;
}
relimagen[reltituloscantidad] = postimg;

además, acá debes colocar la URL de una imagen por defecto propia:

var relimagenpodefecto = "URL_imagen"; // la imagen por defecto

Anónimo  

Listo haora si ya lo cambie pero haora me marca "undefined" en las miniaturas

JMiur  

HAs colocado una imagen por defecto pero el script sigue siendo el mismo y no has cambaido la forma de leer las imágenes:

if ("media$thumbnail" in entry) {
postimg = entry.media$thumbnail.url;
} else {
postimg = relimagenpodefecto;
}

Eso es l oque debes cambiar.

Anónimo  

Gracias JMiur ya lo solucione.
Quiziera saber si me puedes ayudar con esta idea que tengo, en las entradas el posicionamiento del autor , comentarios , sea diferente al post ya abierto es decir. un ejemplo: si en la entrada "plantillas css" el autor, los comentarios y demas esta abjo de la descripcion.
haora en el post ya abierto "plantillas css" el autor, comentarios y demas se muestren arriba.
te dejo unas imagenes para que me entiendas mejor

en las entradas: http://img.webme.com/pic/s/souldhack/entradas.png

en los post: http://img.webme.com/pic/s/souldhack/enlospost.png

espero porfavor me ayudes con esta idea que tengo ya que yo soy nuevo en blooger. Gracias

Jusssasa  

hola me llamo pedro y gracias por el hack me funciono de lo mejor pero nesesito ayuda me sale undefinited y no se por que sale no se si es por que no e udado una etiqueta aun espero su respues a tambien tengo problemas con la paginacion que la saque tambien de esta pagina http://vagabundia.blogspot.com/2008/08/paginacin-en-blogger.html
espero su respuesta mi blog es http://animekawaiii-xd.blogspot.com/
espero no molestarlo

JMiur  

Manolo:
Seguramente se puede pero no es algo que puedo responderte. Depende de la plantilla, habrá que condicionarla, etc, etc.

Anime Anime:
Ya te respondí en el comentrio que dejaste en la otra entrada. No hace falta repetirlo pero, de todas maneras: No puedes probar una paginación si sólo agregas ters entradas de prueba; allí no hay páginas, sólo hay una única. Lo mismo pasará con los posts relacionados; no hay datos suficientes.

Jusssasa  

0ok muchas gracias pense que lo habia hecho mal ejej

Manuel Alberto  

Quedó espectacular el efecto en mi blog Avibert.
Gracias JMiur!!!

JMiur  

Manfenix: Me alegra que haya quedado bien.

Mikotube  

Respetadisimo JMiur esto me funcionaba bien hasta ayer , ahora me aparece el mensaje undefined no se que paso,de antemano muchas gracias le dejo mi blog

http://www.mikotube.com/

Mikotube  

Muchas gracias ya lo solucione :D

Empar  

Hola, faltaba yo todavía... he agregado tal como indicas, pero alguna cosa no hago bien, pues no aparece nada. Si pudieras ayudarme te estaría muy agradecida. Saludos.

Empar  

Perdona, el blog donde he agregado estos códigos de entradas relacionadas es http://historiaenpresent.blogspot.com/

JMiur  

Lo que me dice el navegador es que hay un error en el script de tu blog pero, no veo dónde puede estar porque no me permite hacer un debug del sitio ya que hay demasiados scripts ejecutándose.

Prueba en un blog auxiliar más simple para ver si se trata de un error de sintaxis.

Empar  

Gracias. Probaré.

Empar  

Hola de nuevo. Es evidente que alguna cosa hago mal. Lo he probado en un blog con la plantilla simple (de las nuevas de blogger) y continua sin aparecer nada: http://projecteseneso.blogspot.com/
Agradecida nuevament por tu ayuda.

JMiur  

Perfecto. En ese blog de prubas todo se ve mejor y el script panda bien. Lo que pasa es que sol otiene una entrada y por lo tanto, no se muestra ningún otro. Sia gregas algunos posts más de ejemplo, vas a ver que se muestran debajo

Unknown  

Hola JMiur, muchas gracias por el post, es lo que estaba buscando hace tiempo, pero al aplicarlo a mi blog http://frusilandia.blogspot.com/ no aparece nada, he revisado el codigo por todos lados pero nada :(, y tambien tengo otro problema el cual esq no sale la paginacion del blog en el home, pero sí en los post individuales, porfavor quisiera que me ayudes en esos 2 problemas ya que estoy en ellos desde hace varios dias!

Muchas gracias de antemano!
Me gusta mucho tu blog.

JMiur  

Si sólo hay una entrada por etiqueta, no hay posts relacionados y por lo tanto, no hay nada que mostrar.

Con la paginación debe pasar algo similar.

Unknown  

:O!! pense eso en algun momento, pero ahora que me lo dices tu!! tons debe ser eso!! Muchas gracias!!

Una ultima pequeña consulta, porque el url de mis feeds en chrome se ve mal y en firefox se ve bien?? es una miradita rapida!

http://frusilandia.blogspot.com/feeds/posts/default

Eso seria todo!! Muchisimas gracias!!

JMiur  

No es que en Chrome los feeds se vean mal, Jhony Page; sino que Chrme no los muestra en formato HTML porque no maneja archivos de ese tipo así que muestra el código fuente.

Eso no afecta a este tipo de scripts.

Unknown  

ahhh okas!! gracias por la explicación!!

Tengo otra consulta, espero que no caer espeso, hace tiempo yo usaba un blog para una cosa, pero hace poco le cambie de nombre y estoy poniendo otras cosas, pero cuando pongo en google site:http://frusilandia.blogspot.com/ me salen enlaces de los archivos que cree en esa epoca, como " Chico de mi Barrio Capitulos: agosto 2010 " ,es posible poder eliminar esos archivos?, ya que yo borre todos los post de ese entonces.

Mucgas gracias de antemano!!

JMiur  

Eso es casi imposible de resolver. En lso resultados de los buscadores, verás páginas que levan a sitios que hace años que han dejado de existir. Es un problema de tiempo hasta que desaparezcan pero, de larguísimos tiempos.

Unknown  

:(, weno al menos ya se me fue la duda!!

Gracias!!

JMiur  

En la página para desarrolladores de Google hay algo al respecto pero, me parece que es más para eliminar un sitio por completo e incluso allí, advierten que no es algo que ocurrirá instantáneamente.

Se me ocurre que si usabas n sitemap, podría borrarlo y poner otro pero no mucho más que eso.

L  

Gracia JMiur ya lo instale :D
una cosa... como hago para añadir un titulo al div de las entradas relacionadas... ALgo asi con una imagen
..:: Entradas relacionadas ::..
-❒ - ❒ - ❒ - ❒ - ❒

Gracias de antemano

JMiur  

Para eso, bastaría que colocaras ese título antes o después del DIV:

<div id='postsrelacionados'>

Si lo colocas en una etiqueta, luego, puedes darle estilo.

L  

Gracias Loco pero la verdad no tengo idea de como hacerlo
pero le quiero poner una imagen como titulo, como seria?
esta es la imagen : https://picasaweb.google.com/108490396141136580150/EcuaSagasCom?authkey=Gv1sRgCLCrs-6Mz5L_ggE#5649014118234310946

JMiur  

Esa dirección que colocas, no es la de la imagen sino la de la página web de Picasa, la imagen es esta:

https://lh4.googleusercontent.com/-ZqculSY7gNY/TmVUaSiFySI/AAAAAAAAAkE/ijdCIwZPpB0/s000/EntRadasRELA.png

Basta ponerla en una etiqueta IMG:

<img src='https://lh4.googleusercontent.com/-ZqculSY7gNY/TmVUaSiFySI/AAAAAAAAAkE/ijdCIwZPpB0/s000/EntRadasRELA.png'/>

L  

Gracias otra vez
ya me esperaba la correccion ¬¬" jaja
yo andaba tratando poner un div pero la verdad es q no se mucho de esto..
igual Gracias JMiur :D

Unknown  

JMiur: Hola :), hice todo como lo explicaste paso por paso, pero no me aparece nada en imagen, en titulo solo dice "undefined" y en la pequeña descripción también dice "undefined".

Leí en comentarios anteriores que puede ser que no definí algo no? La verdad que yo solo pegue los códigos que dijiste nada mas no cambie nada u.u

este es mi blog http://televisoresdelfuturo.blogspot.com/2011/08/sony-rebaja-el-precio-de-sus.html

JMiur  

Es un problema de orden. En tu sitio, veo que estás colcoando esto:
<script type='text/javascript'>mostrarrelacionados();</script>
y más abajo esto:
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name .......
cuando, debería ser al revés.

La función mostrarrelacionados(); debe ser ejecutada después de haberse leido las etiquetas.

Unknown  

Muchísimas Gracias JMiur

Ahora tengo una solo pregunta o dos en realidad, pero mas me interesaría que puedas contestarme esta.
Como puedo hacer para centrarlas? Para que queden una entrada al lado de la otra, como lo muestras en la imagen del post.

Y la otra es. A donde tendría que agregar el código de la función mostrarrelacionados(); para que no me quede encerrado en el cuadro verde donde están los datos de quien lo escribió, la hora, la fecha y las etiquetas.

http://televisoresdelfuturo.blogspot.com/2011/08/sony-rebaja-el-precio-de-sus.html

JMiur  

Para empezar, tendrías que agregar el CSS tal como indica este post.

Unknown  

JMiur, le puse este código:


#postsrelacionados {
top:50%;
left: 50%;
width: 25%;
text-align:center;
}

Pero sigue viéndose las imágenes y contenido hacia la izquierda :(. lo unico que pude cambiarlo fue que las palabras quedan centradas.

JMiur  

¿Y por qué no empiezas colocando el CSS que indica este mismo post?
top:50%; y left: 50%; no significan nada ni tienen efecto salvo que el contenido se posiciones de manera absoluta.

Unknown  

:P Nunca vi el "Ver /Ocultar +" u.u te pido disculpas JMiur. Pero al fin esta solo falta ponerles los colores del blog.

Un millon de Gracias :) No se como agradecerte por toda la atencion que me diste :)

Martín Rocha  

JMiur yo con nuevas incursiones je, este sistema esta impecable y ya lo habia aplicado pero en la plantilla actual agregue el css y lo ubique pero a la hora de agregar la parte en violeta, encuentro esa linea la cual no cierra misamode esa forma pero lo agrego y a la hora de guardar me dice error comoq eu se cerro mal un intente sustituirlo por el codigo completo que das de ejemplo JMiur pero sigue el error y por ello aparece todo un undefined como bien explicas.
Muchas gracias un saludo JMiur.

JMiur  

Pués n oes algo que pueda verse online. Deberás revisar lo que has puesto. Si en una plantilla funciona, también funcionará en otra.

Martín Rocha  

Disculas JMiur al final era que faltaba cerrar un of quedo genial.Bloger sigue molestando con mostrar la cantidad de entradas que se le antoja =S je quiero probar con un sistema de leer mas pero no se como logralo o si tenes un tuto Jmiur, el sistema seria este: http://web-blogdesign.blogspot.com/ asi solo la imagen y en varias columnas.
Desde ya muchas gracias JMiur saludos.

Unknown  

Disculas JMiur como hago para eliminar el resumen, solo dejar la imagen y sus titulos, Mi pagina es http://www.diakchimba.com/

Unknown  

Y otra cosa como hago para que no aparezca el mismo post que uno esta leyendo en los Post Relacionados

JMiur  

Para eliminar el resumen se debe editar el scrip y borrar esta línea:
salida += "<p>" + relresumen[r] + " ... </p>";

Para estar seguro queel post no se repite deberías buscar la forma de filtrarlo comaprando las direcciones URL. No puedo darte muchos más detalles al respecto.

Unknown  

Como puedo ponerle un background para que resalte el posts relacionados
Para que lo mires www,Diakchimba.com

JMiur  

Cada post tiene esta clase: relsposts así qeu:
.relsposts {background-color: red:;}
los mostraría con un fondo de color rojo.

Todo ese DIV tiene como id postsrelacionados asñi que una regla así, harái que todo sea de color rojo:
#postsrelacionados {background-color: red;float: left;}

Martín Rocha  

JMiur actualmente las miniaturas me esta tomando la segunda imagen del post, pienso que es por el saltod e linea "more" despues de la primera imagen.
Hay forma de que no tome en cuenta el more y si me muestre la primera imagen? este es el blog.
Un saludo Jmiur que andes bien y gracias.

JMiur  

Esa es la imagen que detecta Blogger y eso no lo puedes modificar ¿por qué lo hace? no lo sé.

En todo caso, puedes cambair el script para leer el post directamente y extraer la imagen correspondiente:
http://vagabundia.blogspot.com/2011/05/json-detectar-la-primera-imagen-de-cada.html

A  

buenas, intente hacerlo pero parece undefinid en los post relacionados, ademásp arece que no se lleve bien con las etiquetas ya que me tardan en cargar las etiquetas

sabrías solucionarlo?

JMiur  

No sé dónde te ocurre eso. Si es en http://openingsanimes.blogspot.com/ los veo normalmente.

A  

se ven bien porque son de thumbails, pero me gusta mas el diseño de json

lo intente pero lo que no se dodne colocar muy bien en el segundo script

ya que ami no me aparece el sitio donde dices de colorarlo.Sera por ese codigo que me aparece con undefined

JMiur  

Tienes que buscar en tu plantilla y encontrar el LOOP que escibe las etiquetas en los posts. Ese código puede tener variantes:
<b:loop values='data:post.labels' var='label'>

A  

solo los encuentro de backlinks y de post. teng uno que es igual pero es del codigo de thumbails S:

A  

jmiur, te paso mi plantilla y miras donde está el fallo?

sería más rápido jeje

JMiur  

Como al parecer, en tu blog, no se muestran las etiquetas a las que correesponde cada entrada, es posible que el código no esté y que haya sido eliminado; de existir, se encuentra en :
<div class="post-footer">
en alguno de estos DIVs:
<div class="post-footer-line post-footer-line-1"> ...........
<div class="post-footer-line post-footer-line-2"> ...........
<div class="post-footer-line post-footer-line-3"> ...........

A  

entonces tengo que poner el código ese en uno de esos apartados? que si que existen por cierto, es donde pongo las cosas que van después de las entradas

JMiur  

Si existe el código es el que debes usar pero, en el código fuente del sitio, esos DIVs (post-footer-line-1, post-footer-line-2 y post-footer-line-3) no tiene contenido, están vacíos y no se ve en ninguna parte que los posts muestren la etiqueta a la que pertenecen que es, justamente, el código que estás buscando.

A  

y si no existe? no puedo hacerlo?

JMiur  

Simplemente lo agregas tal como muestra la entrada y eso debería resolver el problema.

Unknown  

Jmiur, parece tan fácil, 1,2,3, hacemos una torta...por qué será que no me aparece nada...en el blog de Palomas, gracias por tu tiempo!

JMiur  

Lo que n oveo que esté colocado en el código fuente es la parte final, la que llama a la función que lo muestra y es esa que incluye:
<script type='text/javascript'>mostrarrelacionados();</script>
¿En que parte está del post-footer? Recuerda que esa, debe estar después de la otra que es al que lee las etiquetas y que está funcionando bien.

Unknown  

Indudablemente no lo entiendo :((
Lo había colocado luego de div class='post-footer-line post-footer-line-1'

Se coloca otro div?

JMiur  

Pués no veo que haya ningún elemento con esa clase en las entradas individuales.

Para que te guies, veo el otro script en una etiqueta SPAN:
<span class='post-labels'>
y el que falta, debería estar después.

¿Lo habrás puesto condicionado y por eso no se genera?

Unknown  

Okey :D ya se genera, lo hace uno debajo del otro, qué parte debo cambiar para que sea de manera horizontal? gracias Jorge por tanta pregunta!

JMiur  

Uff qué lio. Lo que ocurre es que aparentemente, el footer de los posts está formado por etiquetas LI que miden 130 pixeles de ancho y por eso, lo ves asi. Cualquier cosa que coloques dentro de esas etiquetas LI, tendrá ese ancho. Para colmo, también está dentro de una etiqueta SPAN con las etiquetas y esas etiquetas SPAN tienen una serie de propeidades especiales para mostrase como "flechas" lo cual afectará a los rlacioandos que también son enlaces.

Para no hace muchos cambios, podrías colocar ese DIV con los relacionados, un poco más abajo, que quede afuera de las etiquetas LI; es decir después de una etiqueta </li>

Incluso sería mejor que fuera un DIV afuera del post-footer, así tampoco se ve afectado por todas las demás propiedades de ese sector que, aparentemente, son muchas.

Unknown  

Bien, lo dejo de la manera que estaba, demasiado lío. Muchas gracias :D

JMiur  

Paciencia, Graciela. No es tan complicado como suena. Ahí hay un problema con esas etiquetas LI tan angostitas, eso debería resolverse porque va a pasar lo mismo cada vez que quieras agregar algo en esa parte.

Unknown  

Bien, traté de hacerlo en otro, la mínima de blogger, sin resultados.
http://rinconopaitostraduccion.blogspot.com/

¿Cómo elimino las etiquetas LI? gracias, perdón por hincharte tanto!

JMiur  

EL blog de pruebas es privado así que no puedo verlo.

Más que eliminar las etiquetas LI que me parece que pude ser más engorroso ya que habría que retocar muchas cosas, lo mejor, es que muevas la parte de relacionados y la pongas más abajo, donde termina el post footer de las entradas. O sea. sacarlo de ese DIV.

Si pudieras encontrar esa parte, se solucionaría todo. Así, en egenral debería terminar con un </div> y puesto ahí debajo, voilá, nos olvidamos de lo que pasa arriba.

Unknown  

Disculpas sobre el blog privado, muchas gracias por tu tiempo, intentaré hacerlo de la manera que me decís :D

Tapestry Workerman  

Hola JMiur.
tengo que confesar que soy de los que prefieren no complicarse la vida en campos desconocidos y opté por poner LinkWithin en el blog.
El único inconveniente, visual, es que ahora no me ha quedado espacio entre la entrada en sí y la firma, fecha, etc... ¿se pueden implantar un par de saltos de línea o similar?.
Espero ansioso ;)
Un saludo.

JMiur  

No sé cuál es la idea exactamente pero puedes intentar agregando esta regla y establecer ahí un margen; por ejemplo:

.linkwithin_div {margin-top:30px;}

Tapestry Workerman  

Le daré un par de vueltas a ver si acierto a colocarlo y te cuento.
Gracias JMiur.
Un saludo.

Ernie Simoiz  

Buenas tardes, instalé esto en mi blog pero no quedó como quisiera, podrías ayudarme??? mi blog es redaccionesalamedida.blogspot.com quisiera que diga un título de "También podrías leer..." arriba y que aparezca con un recuadro para que se diferencie....No manejo el lenguaje html, me cuesta muchísimo entender cómo hacer las cosas, por favor, si podrías explicarme con detalle, te agradezco. Espero tu respuesta!

JMiur  

El título genérico lo puedes agregar encima de:

<div id='postsrelacionados'>

Para personalizar la salida, lo primero que sugeriría es que quites la propiedad float de acá:
.post-body { }
porque sólo perturba y si en esa parte quieres ajustar cosas, usa márgenes.

El resto, es personal, puede usar el CSS que figura en la entrada para comenzar porque ese definirá las reglas básicas del estilo, reglas que ahora no se ven en tu plantilla.

Ernie Simoiz  

Gracias por tu respuesta, pero te repito, no manejo el lenguaje html, no entiendo lo que me decís... me encantaría tener algo así en mi blog porque veo que queda bien, pero como no sé cambiar propiedades ni meterme en la plantilla y demás, entonces por eso recurro a gente como vos que la tiene clara...por mi parte, tengo 64 años, y sinceramente, cero paciencia para estas cosas...podrías ayudarme con indicaciones más fáciles?? gracias.

Ernie Simoiz  

Otra cuestión, seguí tus instrucciones tal cual están en esta entrada...y lo que me decís del CSS, que supongo que será lo último, lo copié y pegué tal cual...así que no sé qué habría que modificar. Gracias!!!

JMiur  

Para empezar, el codigo que has copiado no se pone ahí donde lo has puesto sino justo antes de la etiqueta &lt/head>

Ernie Simoiz  

Cuál de todos los códigos te referís??? Disculpame, quizá te estás matando de la risa conmigo, pero realmente, me cuesta bastante esto. Si podrías decirme qué hice mal exactamente y cómo remediarlo, te lo agradezco...porque no entiendo nada...lamentablemente.

JMiur  

Como te referías al CSS, hablaba de ese código. Está mal colocado; no se deben poner etiquetas dentro de <b:skin> </b:skin>

Así como está copiado, debe quitarse de ahi y ponerse antes de </head>

Dra Orueta María  

Es lo único que está mal colocado? porque cuando te referís en último término al css dice que se puede colocar entre y y eso hice...o sino decís que va antes de /head pero condicionado, y ya eso no sé cómo es...tengo que cambiar otra cosa para que quede bien? gracias!

JMiur  

EL CSS son las reglas de estilo; cosas como:

.relsposts { ........... }
.relsposts:hover { /* si queremos algún efecto */ }

Todo eso, puede colocarse dentro de <b:skin> </b:skin> que son dos etiquetas de Blogger equivalen a <b:style> </b:style>

Dentro de eso, no pueden agregarse otras etiquetas por lo tanto, o se copia el contenido completo incluyendo la condición antes de &lt/head> o bien dejas todo como está y eliminas las etiquetas que has colocado y que ahora deben estar entre <b:skin> </b:skin>: estas 4 etiquetas:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>

</style>
</b:if>

Caso contrario, el CSS no tendrá efecto.

Dra Orueta María  

hola!!! Mi viejo es ernie simoiz, y entró por error con mi id...pero yo también estoy intentando poner esto en mi blog pero me sale este error: The element type "b:includable" must be terminated by the matching end-tag "".

Ahora, no sé porqué me sale ese error si lo único que hago es agregar a poost-footer-line-1 el condicional y el resto...nada más. Así queda lo que agrego:

div class='post-footer'

div class='post-footer-line post-footer-line-1'
div id='postsrelacionados'
script type='text/javascript'>mostrarrelacionados();/script
/div
div style='clear:both;'/
/div

/div
El código lo pongo con los signos de cierre y abertura, pero acá no lo puedo poner tal cual porque me sale error....
esto está adentro de un b:include pero la end tag está mas adelante...así que no sé qué hice mal!!! ayuda!!! gracias. Lo estoy haciendo en un blog de pruebas....gracias.

JMiur  

Si el blog de prueba es este:
http://redaccionesalamedida.blogspot.com.ar/2012/03/duro-de-despertar-tango-con-sueno.html
el script esta bien y sólo te falta poner las reglas de estilo de modo correcto.

Dra Orueta María  

Vamos de vuelta....Mi viejo (ernie simoiz) tiene un blog redaccionesalamedida.blogspot.com y quiere colocar esto que tenés para que le quede muy lindo abajo. Como no entiende mucho, y yo quizá igual que él, recurrimos a tus conocimientos y orientación. Pero me perdí.... Lo primero es el script y eso lo bajé, lo coloqué antes de /head, y hasta ahí, todo bien tanto en mi blog como en el de él. Luego viene lo del footer, que también copié y agregué y no tuve problemas. Después viene el tema de "donde colocarlo" y en mi caso, ahí está el problema porque cuando lo coloco en post-footer-line-1 y pongo guardar plantilla me sale el error que te copié antes "The element type "b:includable" must be terminated by the matching end-tag " y ya eso no tengo idea de cómo resolverlo. Mi blog es asesoramientoconsorcios.blogspot.com y lo estoy probando esto en un blog de pruebas http://blogkamikaze.blogspot.com.ar/. En el blog de redaccionesalamedida.blogspot.com lo que tengo que hacer es borrar las 4 etiquetas que me decías para poder dejarlo en b:skin que es donde van los estilos. Hasta ahí, bien, pero el otro problema es el que yo tengo en el blog de pruebas (blogkamikaze) y que pegué lo del css antes de /head, como decís, pero cuando quiero poner lo de post-footer-line-1 me sale el error ese...y no sé porqué. Espero te haya quedado más claro a vos....

Dra Orueta María  

Estoy realmente frustrada...no sé porqué sale eso del b:include si yo sólo estoy condicionando algo...no entiendo!!!! ahora lo intenté probar en mi blog directamente y me sale lo mismo...es lo único que me falta para terminar de colocar esto...y no sé cómo resolverlo!!!! a propósito...en el blog de mi viejo ya lo agregué y quedó lindo, ahora estoy luchando con el de asesoramientoconsorcios.blogspot.com Gracias!

JMiur  

En ese blog de pruebas:http://blogkamikaze.blogspot.com.ar/
lo que te falta es el final, sa apre donde está el script:
<script type='text/javascript'>mostrarrelacionados();</script>
que es el que muestra las entradasrelacioandas; por eso no ves nada.

El por qué sale ese no sabría decirte porque no sé dónde lo está pegando con exactitud.

Dra Orueta María  

No entiendo...qué me falta pegar?? En el blog de pruebas, el primer script lo tengo puesto, después también pegué el agregado donde están las etiquetas, que en mi caso, es en el post-footer-line-2,copié los estilos y le saqué las cuatro líneas que decías antes para ponerlo entre b:skin y /b:skin....por eso no entiendo qué me decís...no hay que pegar lo de post-footer-line-x en algún lado según donde lo querramos ubicar? Yo lo quiero ubicar en el post-footer-line-1, que en mi caso tengo dos líneas así: la primera aparece junto con esto:

div class='post-footer-line post-footer-line-1' span class='post-timestamp'
b:if cond='data:top.showTimestamp'
data:top.timestampLabel/
b:if cond='data:post.ur
.....

y la segunda aparece como:

div class='post-footer'
div class='post-footer-line post-footer-line-1'

span class='post-author vcard'
b:if cond='data:top.showAuthor'
b:if cond='data:post.authorProfileUrl'
.....

así que no sé...no entiendo lo que me decís...disculpame...

JMiur  

En ese blog, esto:
<script type='text/javascript'>mostrarrelacionados();</script>
no está, no aparece en el código fuente; si lo ves en la plantilla, seguramente está colocado en un includable equivocado.

Esa es la función que mostrará los relacionados.

Dra Orueta María  

Entonces qué hago? si ese script no está ni en mi blog de pruebas ni en el blog de asesoramiento, cómo puedo agregar estos post relacionados? sigo sin entender...disculpame.

JMiur  

Simplemente, tienes que agregarlo.

Dra Orueta María  

Ok, y cómo lo agrego? dónde lo agrego? tené en cuenta que algo tan fácil para vos de hacer no es lo mismo para mi...te agradezco la buena onda que tenés al responderme, pero necesito que me digas dónde agregarlo, cómo agregarlo, si sólo el script o con algo más...en qué sección, no sé, no entiendo nada de html y tampoco quiero meter mano y hacer un lio...podrías ser más detallista? gracias!

JMiur  

En el footer de los posts, no sé que dice exactamente tu plantilla pero, normalmente tienen este tipo de etiquetas:
<div class='post-footer-line post-footer-line-.................

En la primera consulta, mostrabas este ejemplo:
http://redaccionesalamedida.blogspot.com.ar/2012/03/duro-de-despertar-tango-con-sueno.html
y allí, estaba colocado perfectamente y sólo faltaba darle estilo.

Dra Orueta María  

Este blog: http://redaccionesalamedida.blogspot.com.ar/2012/03/duro-de-despertar-tango-con-sueno.html es de mi viejo, no mio....en él no tuve problemas en colocarlo...pero el mío, por el que te consulto es: http://asesoramientoconsorcios.blogspot.com que no sé porqué cuando lo agrego al footer me dice lo del error que te puse antes: "The element type "b:includable" must be terminated by the matching end-tag " así que no sé...quizá no se puede agregar en todas las plantillas....

LeiNaD_87  

María, en el post pone que tienes que agregar, que también hay que agregar, por eso te da ese fallo...

JMiur  

María: Volvemos al principio. Si te da error es que está ml ubicado o te falta algo. Revisa la plantilla donde está bien puesto y colócalo igual. Mientras no esté puesto, no funcionará.

LeiNaD_87  

Hola!! Este script me ha servido muy bien, pero he encontrado un fallo ( y he mirado el código pero no lo veo... ) Si hay pocos post relacionados para mostrar, se añade el post desde donde estás ejecutando el script. Ejmplo:
http://manuales-ps3.blogspot.com.es/2012/03/como-obtener-tu-copia-de-battlefield.html

Gracias!!

JMiur  

Eso te ocurre porque la dirección URL del blog tiene la extensión del país y la dirección que está en los feeds (que es lo que lee el script) tiene la dirección "normal" por lo tanto si estás en:
http://manuales-ps3.blogspot.com.es/2012/03/como-obtener-tu-copia-de-battlefield.html

var dirURL = document.URL;
lee ese dato y luego, cuando se condiciona para no mostrar el post actual:
if (relurls[r] != dirURL) {

relurls[r] contiene:
http://manuales-ps3.blogspot.com/2012/03/como-obtener-tu-copia-de-battlefield.html

así que, para el script, son distintos.

El problema es el nuevo sistema de redirecciones de Blogger que afectará este script y muchos otros por l oque es aconsejable, redireccionar la URL del blog para unificarlas.

LeiNaD_87  

Gracias JMiur, lo he arreglado añadiendo la siguiente linea:

dirURL = dirURL.replace('blogspot.com.es','blogspot.com');

Una opción más genérica, podría ser quitarle a todas las direcciónes el comiendo y dejarlas relativas, en lugar de trabajar con http://manuales-ps3.blogspot.com.es/2012/03/como-obtener-tu-copia-de-battlefield.html pues usar solamente /2012/03/como-obtener-tu-copia-de-battlefield.html y así no habría problema.

Gracias de nuevo!!

Anónimo  

Me los muestra en vertical :/ tendrá algo que ver con los div?

JMiur  

No sé cuál es tu ejemplo; probablemente, no tenga definidas las reglas de estilo.

Anónimo  

Si las definí, pero no da resultado. hopyy.blogspot.com

Gracias!

JMiur  

Estás colcoando la condición y la etiqueta STYLE dentro de <b:skin> y eso es un error.

Dentro de <b:skin> </b:skin> no pueden colocarse etiquetas; el estilo condicionado, debe ser colocado afuera.

Anónimo  

Ui pequeño fallo :S no me di cuenta haha te dejé un comentario en "Gradientes con CSS"

Gracias!

Unknown  

Gracias por estos hacks :D, existira una manera en poder miniaturas mas grandes? se que se puede cambiar el s72-c por sXX-c via javascript pero no tengo idea como hacerlo :(

JMiur  

Puede hacerse, debería ser fácil,. Por ejemplo, bastaría buscar el bucle:

while (cuantosPosts < relmaxamostrar) {

y allí, agregar esto:

relimagen[r] = relimagen[r].replace('s-72c','sXX-c');

eso, cambiará la URL de la imagen reemplazando un texto, por otro.

Unknown  

JMiur, me salta 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:if" must be terminated by the matching end-tag "".
Error 500''
Intente buscar de donde provenia el error pero no hay caso, no lo encuentro.

Rebice todas las etiquetas b:if y estan cerradas
:(

JMiur  

No hay mucho que pueda decirte más que verifica bien que el código sea correcto y que las etiqetas estén cerradas cerradas.

Unknown  

Ya lo vi JMiur, el código que distes que va debajo de footer, esta sin cerrar y contiene etiquetas b:if

No Problem.. :P

Saludos y gracias por el aporte.

Unknown  

A proposito, ¿Cómo hago para que no aparezca el resúmen?

JMiur  

Si no quieres cambiar todo el script lo que puedes hacer es borrar esta línea:

salida += "<p>" + relresumen[r] + " ... </p>";

Unknown  

Okay.

Gracias :)

Dra Orueta María  

hola, estoy modificando una plantilla en mi blog de pruebas pero esto no lo puedo instalar porque no está ni lo de post-footer-line ni lo del footer de cada entrada...no está! entonces, quería saber cómo se debe agregar desde cero. Gracias!

JMiur  

En el blog que tienes en tu perfil, el post-footer existe y es allí donde está el gadget de linkwithin.

Dra Orueta María  

En este http://blogpruebas43.blogspot.com.ar/??? está instalado??? Se puede quitar e instalar el que está acá?? qué tendría que borrar y cómo lo podría hacer?? Tené en cuenta que de html, ni idea! Gracias.

JMiur  

En ese blog tienes dos áreas debajo de los posts, una, dentro del rectángulo superior:
<div class='bookmarks'>
donde ahora hay botones de redes sociales así que puedes colocar entradas relacionadas arriba o debajo de ese DIV.

Y más abajo, afuera del rectángulo de color, hay otro:
<div class='sub-first-post' align='center'>
donde puedes hacer lo mismo.

pvillegasy  

Hola Jmiur, no encuentro el código

JMiur  

¿Qué código?

 
CERRAR