Como poner entradas relacionadas en Blogger con nuevo diseño de edición HTML | joserobertoap

jueves, 5 de septiembre de 2013

Como poner entradas relacionadas en Blogger con nuevo diseño de edición HTML

Las entradas relacionadas en las páginas y blogger son una gran herramienta, gracias a ello desde el punto de vista funcional los lectores tienen la posibilidad de leer contenido que tiene relación con el que ya estan leyendo. Todo dependerá de la configuración que se tenga y con que tanta organización hemos hecho nuestro blog.

Esta herramienta no es una configuración propia de Blogger, no podemos seleccionar al momento de publicar una entrada las relacionadas con estas, la configuración se hace automática dependiendo de las etiquetas que tengan en relación una entrada con la otra. Se recomienda leer nuestra publicación que son las etiquetas en Blogger, aprenda a colocar etiquetas de calidad que abarquen un gran contenido y relación con la publicación.
A continuación la forma de poner estas entradas relacionadas con el contenido en el pie de la publicación, diremos como cambiar el tamaño y como poner más entradas si así lo consideran.

En nuestra administración de blogger vamos a plantilla luego hacemos clic en edición HTML, puede ayudarle la imagen a continuación. ver imagen...
edicción html blogger
ir a plantilla para edición HTML
Ahora hacemos clic en edición HTML, es cuando llegaremos a introducir los datos necesarios para que puedan aparecer las entradas relacionadas. ver imagen a continuación...
ir a editor HTML en blogger
ir a editor HTML
Cuando estemos en el código de la página sin hacer clic en ningunas de las opciones disponibles, nos posicionamos dentro del código y buscamos dentro de el. Es mucho más fácil cuando buscamos dentro del código haciendo uso de las teclas Ctrl + F.

El primer código que buscaremos será ]]></b:skin> este se pondrá en todo el texto de color amarillo, justo debajo pegamos el siguiente código:

<script type='text/javascript'>
//<![CDATA[

var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();

function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}

function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}

function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}

function printRelatedLabels() {
var cuantosPosts = 0;
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
var dirURL = document.URL;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
if (relatedUrls[r] != dirURL) {
document.write('<li><a href="' + relatedUrls[r] + '" title="Post relacionado: '
+ relatedTitles[r] + '">' + relatedTitles[r] + '</a></li>');
}
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
cuantosPosts++;
if (cuantosPosts == 5) {
break;
}
}
document.write('</ul>');
}

//]]>

</script>

Luego buscamos la siguiente línea: <b:loop values='data:post.labels' var='label'> justo más abajo se encuentra otra etiqueta que debemos buscar, antes de esta etiqueta </b:loop> pegue el siguiente código:

<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&amp;max-results=10"'
type='text/javascript'/>
</b:if>

El contenido que hemos pegado tendrá la siguiente apariencia:
imagen código pegado en plantilla
imagen código pegado en plantilla
Ahora vamos a buscar la siguiente línea: <div class='post-footer-line post-footer-line-3'><span class='post-location'>, justo debajo de la línea pegamos el siguiente código:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='post-footer-line post-footer-line-4' id='relpost'>
<h4>Entradas relacionadas:</h4>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</b:if>
</div></b:if>

Hacemos clic en guardar plantilla y abrimos una ventana emergente de nuestro blog haciendo clic en ver blog en la parte superior de la página editora de plantillas. Vamos a una publicación y es posible que tengamos las entradas relacionadas pero de un tamaño verdaderamente pequeño, algo que podemos hacer es modificar el tamaño del contenido que aparecerá como entradas relacionadas.

Para modificar el tamaño del texto entradas relacionadas como de las entradas relacionadas en el pie de la publicación debemos ir al código que hemos copiado. Buscamos en el código <h4>Entradas relacionadas:</h4> y lo reemplazamos por <h4 style="font-size:18px; ">Entradas relacionadas:</h4> el número 18px le permitirá cambiar de tamaño el texto a su gusto.

Si quiere cambiar la cantidad de entradas relacionadas que aparecen es decir, por defecto esta configuración trae unas cuatro entradas, usted puede cambiar esta cantidad por la que considere. Asegure de no poner una cantidad excesiva ya que debe comprender que las entradas relacionadas se basan en la segmentación gracias a las etiquetas del blog.

Donde dice, if (cuantosPosts == 5) { se cambia el número de entradas relacionadas a mostrar, algo que podemos cambiar es el tamaño de las entradas relacionas. Para ello buscaremos nuevamente el código ]]></b:skin> y agregaremos antes el siguiente código:

.post-footer-line-4 ul li {
font-size: 13px;
}

Al final tendremos una publicación con entradas relacionas que nos ayudan a disminuir el rebote de nuestra página y obtener más páginas vistas. Sepa organizar el contenido con ayuda de las etiquetas, de esta manera las entradas relacionadas que aparezcan después de cada publicación serán correspondiente y efectivamente relacionadas con el contenido.

3 comentarios:

  1. MUY BUENA EXPLICACION, PERO COMO PUEDO PONER LAS NOTICIAS RELACIONADAS CON IMAGENES?

    ResponderEliminar
    Respuestas
    1. Le prometo que trabajaré para hacer esa publicación y en poco tiempo la tendrá, solo deme unos días... le garantizo algo verdaderamente funcional.

      Eliminar
  2. Como se puede hacer para visualizar mas texto del titulo porque solo aparece una pequeña parte del titulo y me gustara que se mostrara mas???????????

    ResponderEliminar