Hola de nuevo.
Les traigo un tuto de como poner post relacionados al final de una entrada.
Primero vamos a Plantilla>>Editar HTML y buscamos </head> justo encima pegamos esto:
<script type='text/javascript'>
//<![CDATA[
var defaultnoimage='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSFvjmXBKGdUIZR_oV9KVndufpomdS9ru0XNziQ2qPtpUevCMHczg';
var maxresults=5;
var splittercolor='#fff';
var relatedpoststitle='Post relacionados';
//]]></script>
<script src='https://dl.dropboxusercontent.com/u/49376985/related-posts.js' type='text/javascript'/>
En rojo pon la URL que indica que esa entrada no tiene imagen
En rosa pon la cantidad de post que aparecerán
En azul el nombre del elemento.
Ahora buscamos <div class='post-footer'>. Lo encontraremos dos veces justo debajo de LA SEGUNDA pegamos
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=7"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div>
Y guardamos.
Ahora vamos a personalizarlo
Vamos a Plantilla>>Personalizar>>Avanzado>>Añadir CCS y pegamos
/* Post Relacionados
----------------------------------------------- */
#related-posts {
width:650px; /*Ancho del cuerpo de nuestras entradas*/
float:left;
height:100%;
min-height:100%;
padding-top:5px;
margin-left:20px; /*Variar si queréis que quede centrado o si lo necesitáis, sino borralo*/
}
#related-posts h2 {
color:#e340a1; /*Color del título*/
padding:5px;
margin:0 0 10px;
text-align:center; /*Para que esté centrado*/
background:transparent;
font:normal normal 14px Arial; /*Tamaño y tipografía del título*/
text-transform:uppercase; /*Para que esté en mayúsculas, sino borrarlo*/
}
#related-posts a {
color:#f277d8; /*Color de los títulos de cada enlace*/
overflow:hidden;
display:block;
width:80px;
height:155px;
}
#related-posts a:hover {
background:#c68aee; /*Color de fondo al pasar el ratón por encima*/
color:#000000; /*Color de las letras al pasar el ratón por encima*/
overflow:hidden;
}
#related-posts a img {
box-shadow:none;
padding:4px;
padding-top:7px;
}
#rptxt{
width:68px;
height:65px;
margin:5px;
font:normal normal 10px Arial; /*Tamaño y tipografía del título de las entradas*/
color:#ff00ff; /*Color del título de las entradas*/
}
Y listo.
No hay comentarios.:
Publicar un comentario