sábado, 7 de febrero de 2015

Como poner post relacionados al final de una entrada (sin usar linkwithin)




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 != &quot;true&quot;'>
</b:if>
<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=7&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</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