martes, 2 de marzo de 2010

Etiquetas relacionas con miniaturas (scripts en la plantilla)

He recibido varias consultas sobre problemas al intentar añadir en la plantilla el script para miniaturas en las etiquetas relacionadas y aprovechando que ÚsuarioCompulsivo lo explicó días atrás vamos a seguir sus pasos para añadir todo directamente a la plantilla sin necesidad de buscar alojamiento externo.
Antes recordar que no son las indicaciones para solucionar el problema es decir si ya se han seguido algunos pasos y nos falta sólo el script hay que comprobar que la forma que lo estamos añadiendo coincide con esta.

En plantilla de edición html añadimos justo antes de ]]></b:skin> los estilos.


#related-posts{
overflow:hidden;
text-transform:none;
height:100%;
min-height:100%;
margin:0 0 2em;
padding:0;
}

#related-posts h4{
color:#333;
font:normal normal 100% Trebuchet,
Trebuchet MS, Arial, sans-serif;
margin:0.25em 0;
}

#related-titles{
width:114px;
height:75px;
text-align:left border:none;
padding-left:2px;
font-size:90%;
line-height:normal;
font-weight:700;
color:#333;
margin:3px 0 0;
}

#related-posts a{
color:#333;
}

#related-posts a:hover{
color:#333;
background-color:#EEE;
}

Después de ]]></b:skin> añadimos el contenido de este archivo.
Guardamos los cambios y marcamos para expandir la plantilla, buscamos:
<div class='post-footer-line post-footer-line-1'>

o también puede venir como
<p class='post-footer-line post-footer-line-1'>



Justo después de cualquiera de esas dos líneas añadimos:


<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<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&amp;callback=related_results_labels_thumbs&amp;max-results=6"' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="Quizás te interese";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>

Ya podemos guardar los cambios.
Para cambiar el aspecto como por ejemplo el color del efecto hover lo haremos en related-posts a:hover (en background)
El tipo de letra de el texto "Quizás te interese" en los estilos donde dice related-posts h4 y el texto en la última parte que añadimos.
La cantidad de miniaturas a mostrar en la última parte que añadimos donde max-results=5

No hay comentarios:

Publicar un comentario