jueves, 30 de diciembre de 2010

entradas post relacionados con 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 post relacionados con imagen



[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...
 

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.


Fuente

10 comentarios:

Victor dijo...

gracias!! esa nota que dejaste al final era fundamental, los otros sitios que daban esta misma información no la ponían y por eso a mi me parecia que el script no hacia nada

De todo para los blogger dijo...

Me alegro que te funcionase, muchas gracias Victor

Bilias dijo...

Muy bien el post pero lo malo es que en my plantilla no tengo ninguna de estas dos lineas :-s
Lo he pegado debajo de >div id=footer ... pero no funcciona.
Este es mi blog http://minijuegos-online.blogspot.com
Espero tu respuesta gracias

Bilias dijo...

Ahh y abajo me pone esto TEMPLATE ERROR: No dictionary named: 'post' in: ['blog'] :s :s

DoLLyDoLLpRoMm...♥ dijo...

me funciono! el uniico q funciona! estaria bueno que se muestren directamente sin tener que entrar a la entrada! Pero bueno gracias igual!

Héctor B. Cruz dijo...

Excelente! muchas gracias es justo lo que queria,
Aqui puedes ver mi blog donde ya la implementé http://www.vainastecnologicas.com/

De todo para los blogger dijo...

Gracias a todos vosotros

Nina dijo...

pues quedo liada en la parte del script del punto2, cuál http debo poner...estoy hecha un nudo marinero

De todo para los blogger dijo...

Es fácil sólo tienes que seguir los pasos

ritaim dijo...

A mí también me funcionó, muchas gracias :)
--
http://stylesuperfashion.blogspot.com

Publicar un comentario en la entrada

DIRECTORIOS

http://www.trucosblogs.com/post
4.57/5 – 42 opiniones
http://www.fabricaturopa.com/post 4.57/5 – 42 opiniones