205

Entradas Relacionadas con miniatura de imagen

En una entrada anterior vimos como colocar un gadget de "Entradas relacionadas" al pie de cada entrada usando LinkWithin, con este sistema de Blogger Widget conseguiremos un resultado casi idéntico tal y como veis en la imagen.

Entradas relacionadas


[1] En nuestro panel de Blogger vamos a Edición HTML y marcamos la opción de expandir las plantillas de artilugios.

[2] Localizamos la etiqueta </head> y justo encima colocamos este código:

<!--Entradas relacionadas con imagen-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 15px;
font-weight: bold;
color: #000;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color: #000;
}
#related-posts a:hover{
color:#000;
}

#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Entradas relacionadas con imagen-->


Fijaros que he resaltado en negrita la url del script que hace funcionar el gadget, ya que aunque en Blogger Widgets nos la proporcionan, lo mejor sería que cada uno usase su propio alojamiento para evitar problemas futuros...

Podéis ver como alojar un script en vuestro propio servidor si aún no sabéis como hacerlo.

En ese mismo código están incluidos los estilos CSS para el gadget, donde podemos por ejemplo cambiar el tamaño y color del texto de su título en #related-posts h2{

font-size: 15px; Cambiamos aqui el tamaño de fuente.
color: #000; El color de la fuente, negro en el ejemplo.


[3] Localizamos ahora esta línea de código en la plantilla:
<div class='post-footer-line post-footer-line-1'>

Que en algunos casos podría verse así:
<p class='post-footer-line post-footer-line-1'>

[4] Justo después de esa línea colocamos este código:
<!-- Entradas relacionadas codigo-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</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=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle="Entradas relacionadas";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Entradas relacionadas codigo-->

Esto hará que el gadget se muestre justo al final de la entrada, si queremos que se vea a continuación del contenido del post-footer deberíamos de pegarlo entonces después de esta línea o incluso algo más abajo:

<div class='post-footer-line post-footer-line-3'>

[5] Escogemos en esta línea del código cuantas entradas se mostraran en el gadget:

var maxresults=5;

Si queremos ponerle al gadget un título distinto a "Entradas relacionadas" lo cambiaremos directamente en esta parte del código:

var relatedpoststitle="Entradas relacionadas";


Nota:
El gadget solo es visible en las páginas de entrada, es decir, cuando accedemos a una entrada y esta se muestra "abierta" con los comentarios debajo de ella.


Entrada original: Blogger Widgets / Ejemplo online: Eternamente cabreada

Entradas Relacionadas:

205 comentarios:

«El más antiguo   ‹Más antiguo   Total comentarios: 201 – 205 de 205   Más reciente›   El más reciente»
Delikat Essences

Rosa ya he probado lo que me sugieres y ha quedado mucho mejor, muchas gracias. Sólo precisar que quizás me expliqué mal y yo no me refería a disminuir el tamaño del post sino al tamaño de la letra de su título, que apareciera más pequeño.. y quizás así ya saldría entero y no se cortarían las palabras... puede que sea esto lo que me has contestado, perdona tanto lío :$ pero es por dejar ya el asunto zanjado. Muchas gracias de corazón.

Anónimo

Delikat Essences Perdona, entendí que lo que querías era solucionar el "montado" del texto y que sugerías lo del tamaño como posibilidad de que fuese el motivo...

Te explico... si te fijas, todo en el pie de cada entrada está en letras mayúsculas y al mismo tamaño (ejemplo, las etiquetas), eso es porque en el CSS de la plantilla está así diseñado.
Como las entradas relacionadas toman la propiedad de donde se colocan, se ve como el resto del pie de entradas...

¿Solución? Cambiar esa propiedad, pero teniendo en cuenta que también afectará al resto del texto del post-footer...

Haz la prueba y si no queda a tu gusto con volver a dejarlo como estaba, no problem...:D

Localiza esto en la plantilla:

.post-footer {
margin: .75em 0;
color:#333333;
text-transform:uppercase;
letter-spacing:.1em;
font: normal normal 94% Trebuchet, Trebuchet MS, Arial, sans-serif;
line-height: 1.4em;
}

Donde dice text-transform:uppercase; lo cambias por text-transform:normal;

Miguel

Saludos:

Siempre recurro a tí cuando tengo algún problemilla...

Ahora lo que me ocurre es que sin haber tocado nada, se ha desconfigurado esto de las entradas relacionadas en mi blog.

Con Internet Explorer se ha deformado completamente. Con Google Chrome se ve perfectamente.

¿A que se puede deber???

Help, please...

Miguel

Saludos de nuevo:

Como te había comentado en un mensaje anterior, la vista de las entradas relacionadas se me deformaba completamente con Internet Explorer. Se veían bien con Firefox y Google Chrome.

Así que decidí eliminarlas, pero ahora lo que se me ha deformado es el enlace y el texto para llevarte a las entradas antiguas que aparece en la página principal (luego cuando entras a la entrada, se ve bien despues de los comentarios). Solo ocurre con Internet Explorer. Se ve todo a la derecha...

No se si tendrá algo que ver, pero la fecha de cada entrada en la página principal tambien ha sufrido cambios. Los dos primeros dígitos de la fecha o las dos primeras letras (dependiendo del formato de fecha que ponga) aparecen en una linea anterior a la derecha). Luego en cada entrada se ve bien.

Bueno, supongo que se podrá solucionar de algún modo...

Por cierto, ¡¡¡¡¡FELIZ NAVIDAD!!!!!!

Anónimo

Miguel Yo no veo eso como dices... supongo que sea por la versión de IExplorer, ya que yo siempre uso las últimas en todos los navegadores...
Te adjunto una imagen de como yo lo veo en IE:
http://img9.imageshack.us/img9/9958/sigloxx.jpg

«El más antiguo   ‹Más antiguo   Total comentarios: 201 – 205 de 205   Más reciente›   El más reciente»

Publicar un comentario

Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).

Los comentarios están siendo moderados.

:) :(( :( :P :D :$ ;) :I :X :O |O :S