entradas post relacionados con imagen

  • diciembre 30, 2010

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

No Comments Found