Cómo poner los post relacionados al final de la entrada (sin usar linkwithin)

TUTORIAL BLOGGER: CÓMO PONER LOS POST RELACIONADOS AL FINAL DE LA ENTRADA (SIN USAR LINKWITHIN)

Quien esté harto de linkwithin que levante la mano! Yo soy una de ellas, hasta ahora lo usaba por pura vagancia, por no tener que editar mi plantilla, pero nunca me ha gustado. Para empezar, los acentos no me los mostraba bien y para terminar, no eran post relacionados los que mostraba sino post al azar.

Así que dije basta y he modificado mi plantilla, y hoy os voy a enseñar cómo hacerlo ;) Como veis ahora mis post relacionados muestran los post relacionados de verdad, es decir los que están bajo la misma etiqueta.

Ya sabéis la importancia que tiene tener las entradas relacionadas en nuestro blog (clic aquí para ver consejos para aumentar nuestro número de páginas vistas) y añadirlo es bien fácil, aunque hay que seguir bien los pasos. Vamos a por el tutorial!!! 

MODIFICAR EL HTML DE LA PLANTILLA

Como siempre, guardad una copia de seguridad de la misma. Vamos a Plantila → Editar HTML y buscamos esto:

</head>

Justo encima pegamos el siguiente código:

<script type='text/javascript'>

//<![CDATA[

var defaultnoimage='https://lh5.googleusercontent.com/-6ndDxLLIZRI/VI68wWI6_MI/AAAAAAAAHxo/vSMMPxQaHW0/s70-no/sin-imagen.png';

var maxresults=7;

var splittercolor='#fff';

var relatedpoststitle='Seguro que también te gusta';

//]]></script>

<script src='https://dl.dropboxusercontent.com/u/49376985/related-posts.js' type='text/javascript'/>

• Lo que nos interesa modificar de este código, es lo que os he marcado con color:

  → En morado ponéis la URL a la imagen que indica que ese post no tiene imagen, os he dejado la mía por si preferís usarla.

  → En azul está el número de post relacionados que queréis que se muestren. En mi caso 7 porque son los que caben.

  → En verde, el título que lleva el elemento

Pero todavía no hemos acabado de modificar nuestra plantilla, ahora debemos buscar esto:

<div class='post-footer'>

Lo vais a encontrar dos veces, es la segunda la que nos interesa. Justo debajo pegamos esto:

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

*NOTA: este último código ubica los post relacionados en el pie de post, si queréis que esté encima de él pegad el código justo encima de <div class='post-footer'>

Hale, ya hemos terminado con nuestra plantilla :D Ahora es el momento de darle estilo.

AÑADIR EL CSS

Vamos a Plantilla → Personalizar → Avanzado → Añadir CSS y pegamos esto:

/* 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 borradlo*/

}

#related-posts h2 {

  color:#555555; /*Color del título*/

  padding:5px;

  margin:0 0 10px;

  text-align:center; /*Para que esté centrado*/

  background:transparent;

  font:normal normal 13px Arial; /*Tamaño y tipografía del título*/

  text-transform:uppercase; /*Para que esté en mayúsculas, sino borradlo*/

}

#related-posts a {

  color:#888888; /*Color de los títulos de cada enlace*/

  overflow:hidden;

  display:block;

  width:80px;

  height:155px;

}

#related-posts a:hover {

  background:#fbfbfb; /*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:#333333; /*Color del título de las entradas*/

}

Y ya hemos terminado de instalar nuestros post relacionados. Debéis prestar especial atención en el ancho del cuerpo de las entradas para que los post relacionados no queden más grandes que este.

*NOTA: se mostrarán los post relacionados que están bajo la misma etiqueta, así que si veis que en alguna entrada no se muestran todos los resultados que habéis puesto (en mi caso 7) es porque no hay suficientes post relacionados.

http://www.misslavanda.es/2014/12/tutorial-blogger-entradas-relacionadas-sin-usar-linkwithin.html

http://elrincondeluuy.blogspot.com/2015/02/como-poner-post-relacionados-al-final.html

Read more...