noireloise test design: March 2016

¡Hello my sinners! Hoy les traigo una entrada nueva sobre como añadir el apartado de Post Relacionados/Entradas relacionadas y no morir en el intento y sin usar esas odiosas alternativas que al final no sirven del todo bien. Este apartado se maneja por medio de Etiquetas, y busca las etiquetas relacionadas en tus otros post.

Primero que nada, asegúrate bien de conocer las partes del blog, aquí te dejo una entradita rápida de las partes que debes conocer: Blogging 101 Knowing Your Blog.

Y segundo paso, y el más importante de todos siempre que vayamos a modificar nuestro blog, es guardar nuestra plantilla: Blogging 101 Backup Your Blog.

Ya guardada nuestra plantilla, vamos a comenzar. He puesto 4 alternativas diferentes para que usen la que más les guste.

AÑADIENDO EL HTML

Primero que nada, vamos a agregar el apartado de Entradas Relacionadas. Iremos a Dashboard ⇾ Plantilla ⇾ Editar HTML

Una vez en el editor de HTML, hacemos clic dentro del editor y presionamos Crtl + F (Ctrl + B si esta configurado en español)

Buscaremos el siguiente código:

Lo encontraremos dos veces, es la segunda en la que tenemos que poner atención. Una vez que la encontramos, lo que vamos a hacer es hacer click en el numero de línea de este código. Al hacer esto, nos aparecerá una flechita negra. Si ya te aparece la flecha negra sobre esta línea entonces haz caso omiso de este paso.

¿Qué fue lo que hicimos? Lo que hicimos en este paso fue cerrar el código donde terminan nuestros post para no revolvernos con tanto cierre de códigos ( los que dicen < / div > )

Justo abajo de donde cierra el código vamos a pegar lo siguiente:

<b:if cond='data:blog.pageType == "item"'>



<div class='post-related'>
<div class='post-box'>
<h4 class='post-box-title'>Post Relacionados</h4>
</div>

<b:loop values='data:post.labels' var='label'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/>
</b:loop>

<script type='text/javascript'>
var defaultnoimage='https://lh3.googleusercontent.com/-Pga_2A7CONM/VvmDM9JEHfI/AAAAAAAAEh4/W85jxTA3_c4j2TAFSYZDOwNuuNw5mq13QCCo/s73-Ic42/Popular%2BPosts-08.png';
var maxresults=4;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs('<data:post.url/>');
</script>
</div>

</b:if>

Lo que podemos modificar de este código es lo que está marcado en color:

⩕ En azul ponemos el título que queremos: Post Relacionados, Entradas Relacionadas, También te puede interesar, lo que tu quieras.
⩕ En morado podemos ingresar la dirección (URL) de la imagen para cuando tu post no tenga alguna imagen en especial.
⩕ En rosa ponemos el número de post que queremos que se muestren. Les puse por default 4 que me parecen perfectos, pero lo pueden cambiar. Ojo, si cambiamos aquí el numero de posts relacionados, tendremos que hacer cambios más adelante en el código CSS.

Ahora añadiremos el script que hará que todo funcione. Debemos buscar el siguiente código:

</head>

Justo encima (arriba) del código pegaremos el siguiente script:

//<![CDATA[

var classicMode = false ;

var summary = 40;

var indent = 3;

imgr = new Array();

imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKaYih-aNhkkC5dEwIM2GLq-48H9r33lzDGukpi9fc8iMnhikA3dXl8-fCmlwbNYir8oW4kleCCK3ysPgbilrh-hMdGSl1nZk7i0H0Yb39qzicCp-r4T2efxXzTV1Ntg7Ji18spaMs7VG_/s1600/no-image-found.jpg";

showRandomImg = true;

aBold = true;

summaryPost = 220;

summaryTitle = 25;

numposts1 = 5;

numposts2 = 8;

var classicMode = false ;

var summary = 50;

var indent = 3;

var relatedTitles = new Array();

var relatedTitlesNum = 0;

var relatedUrls = new Array();

var thumburl = new Array();

function stripHtmlTags(s,max){return s.replace(/<.*?>/ig, '').split(/\s+/).slice(0,max-1).join(' ')}

function createSummaryAndThumb(pID,title,url,date,comment,tag,author){

var posturl= url;

var title=title;

var date = date;

var comment = comment;

var tag = tag;

var div = document.getElementById(pID);

var img = div.getElementsByTagName("img");

var content1 = div.innerHTML.replace(/<img.*?>/ig,'').replace(/<iframe.*?>/ig,'');

var arr = content1.split(/<br\s*\/?>/);

var content = arr[0]+arr.slice(1,-1).join('<br>')+arr.slice(-1);

var month = new Array();

month[0] = "Jan";

month[1] = "Feb";

month[2] = "Mar";

month[3] = "Apr";

month[4] = "May";

month[5] = "Jun";

month[6] = "Jul";

month[7] = "Aug";

month[8] = "Sep";

month[9] = "Oct";

month[10] = "Nov";

month[11] = "Dec";

var n = month[date.split('/')[0]];

var date1 = date.split('/')[1];

var year = date.split('/')[2];

if(img.length ==1) {

var imgurl=img[0].src;

var thumb = '<div class="post-image"><a href="'+posturl+'"><img width="675" height="450" src="'+imgurl+'"></a></div>';

var summary1 = thumb+'<div class="post-entry">'+stripHtmlTags(content,300)+'...<p> <a class="more-link" href="'+posturl+'">Continue Reading</a></p></div>';

}

else {

if(img.length > 1) {

var li = '';

for(var i=0; i<img.length; i++){

var li = li + '<li><img src="'+img[i].src+'"></li>';

}

var thumb = '<div class="post-image"><div class="bx-wrapper"><ul class="bxslider">'+li+'</ul></div></div>';

var summary1 = thumb+'<div class="post-entry">'+stripHtmlTags(content,300)+'...<p> <a class="more-link" href="'+posturl+'">Continue Reading <i class="fa fa-long-arrow-right"></i></a></p></div>';

}

else {

var frame = div.getElementsByTagName("iframe");

if (frame.length >=1) {

var iframe1 = frame[0].src;

var thumb = '<div class="post-image"><iframe width="100%" height="450" frameborder="no" src="'+iframe1+'" scrolling="no"></iframe></div>';

var summary1 = thumb+'<div class="post-entry">'+stripHtmlTags(content,300)+'...<p> <a class="more-link" href="'+posturl+'">Continue Reading <i class="fa fa-long-arrow-right"></i></a></p></div>';

}

else {

var summary1 = '<div class="post-entry">'+stripHtmlTags(content,300)+'...<p> <a class="more-link" href="'+posturl+'">Continue Reading <i class="fa fa-long-arrow-right"></i></a></p></div>';

}

div.innerHTML = summary1;

div.style.display = "block";

var elem = document.getElementsByClassName("separator");

for (var i=0; i< elem.length; i++){

elem[i].innerHTML='';

}

function related_results_labels_thumbs(json) {

for (var i = 0; i < json.feed.entry.length; i++) {

var entry = json.feed.entry[i];

relatedTitles[relatedTitlesNum] = entry.title.$t;

try

{thumburl[relatedTitlesNum]=entry.media$thumbnail.url;}

catch (error){

s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);

if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))

{thumburl[relatedTitlesNum]=d;} else {if(typeof(defaultnoimage) !== 'undefined') thumburl[relatedTitlesNum]=defaultnoimage; else thumburl[relatedTitlesNum]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKaYih-aNhkkC5dEwIM2GLq-48H9r33lzDGukpi9fc8iMnhikA3dXl8-fCmlwbNYir8oW4kleCCK3ysPgbilrh-hMdGSl1nZk7i0H0Yb39qzicCp-r4T2efxXzTV1Ntg7Ji18spaMs7VG_/s1600/no-image-found.jpg";}

}

if(relatedTitles[relatedTitlesNum].length>35) relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0, 35)+"...";

for (var k = 0; k < entry.link.length; k++) {

if (entry.link[k].rel == 'alternate') {

relatedUrls[relatedTitlesNum] = entry.link[k].href;

relatedTitlesNum++;

}

function removeRelatedDuplicates_thumbs() {

var tmp = new Array(0);

var tmp2 = new Array(0);

var tmp3 = new Array(0);

for(var i = 0; i < relatedUrls.length; i++) {

if(!contains_thumbs(tmp, relatedUrls[i]))

{

tmp.length += 1;

tmp[tmp.length - 1] = relatedUrls[i];

tmp2.length += 1;

tmp3.length += 1;

tmp2[tmp2.length - 1] = relatedTitles[i];

tmp3[tmp3.length - 1] = thumburl[i];

}

relatedTitles = tmp2;

relatedUrls = tmp;

thumburl=tmp3;

}

function contains_thumbs(a, e) {

for(var j = 0; j < a.length; j++) if (a[j]==e) return true;

return false;

}

function printRelatedLabels_thumbs(current) {

for(var i = 0; i < relatedUrls.length; i++)

{

if((relatedUrls[i]==current)||(!relatedTitles[i]))

{

relatedUrls.splice(i,1);

relatedTitles.splice(i,1);

thumburl.splice(i,1);

i--;

}

var r = Math.floor((relatedTitles.length - 1) * Math.random());

var i = 0;

while (i < relatedTitles.length && i < 20 && i<maxresults) {

tmb = thumburl[r].replace('s72-c/','s300-c/');

document.write('<div class="item-related"><a href="' + relatedUrls[r] + '"><img width="150" height="100" src="'+tmb+'"/></a><h3><a href="' + relatedUrls[r] + '">'+relatedTitles[r]+'</a></h3></div>');i++;

if (r < relatedTitles.length - 1) {

r++;

} else {

r = 0;

}

relatedUrls.splice(0,relatedUrls.length);

thumburl.splice(0,thumburl.length);

relatedTitles.splice(0,relatedTitles.length);

}

function removeHtmlTag(strx, chop) {

var s = strx.split("<");

for (var i = 0; i < s.length; i++) {

if (s[i].indexOf(">") != -1) {

s[i] = s[i].substring(s[i].indexOf(">") + 1, s[i].length)

}

s = s.join("");

s = s.substring(0, chop - 1);

return s

}

function showrecentposts2(json) {

j = (showRandomImg) ? Math.floor((imgr.length + 1) * Math.random()) : 0;

img = new Array();

if (numposts1 <= json.feed.entry.length) {

maxpost = numposts1

} else {

maxpost = json.feed.entry.length

}

for (var i = 0; i < maxpost; i++) {

var entry = json.feed.entry[i];

var posttitle = entry.title.$t;

var pcm;

var posturl;

var cate = '';

for (var e = 0; e < json.feed.entry[i].category.length; e++) {

cate = cate + '<a href="/search/label/' + json.feed.entry[i].category[e].term + '?max-results=6">' + json.feed.entry[i].category[e].term + '</a>, '

}

if (i == json.feed.entry.length) break;

for (var k = 0; k < entry.link.length; k++) {

if (entry.link[k].rel == 'alternate') {

posturl = entry.link[k].href;

break

}

for (var k = 0; k < entry.link.length; k++) {

if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {

pcm = entry.link[k].title.split(" ")[0];

break

}

if ("content" in entry) {

var postcontent = entry.content.$t

} else if ("summary" in entry) {

var postcontent = entry.summary.$t

} else var postcontent = "";

postdate = entry.published.$t;

if (j > imgr.length - 1) j = 0;

img[i] = imgr[j];

s = postcontent;

a = s.indexOf("<img");

b = s.indexOf("src=\"", a);

c = s.indexOf("\"", b + 5);

d = s.substr(b + 5, c - b - 5);

if ((a != -1) && (b != -1) && (c != -1) && (d != "")) img[i] = d;

var month = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

var month2 = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

var day = postdate.split("-")[2].substring(0, 2);

var m = postdate.split("-")[1];

var y = postdate.split("-")[0];

for (var u2 = 0; u2 < month.length; u2++) {

if (parseInt(m) == month[u2]) {

m = month2[u2];

break

}

var tmb = img[i].replace('s1600/', 's500-c/');

var daystr = day + ' ' + m + ' ' + y;

var trtd = '<li><div class="side-item"><div class="side-image"><a href="' + posturl + '"><img width="150" height="100" src="' + tmb + '"></a></div><div class="side-item-text"><h4><a href="' + posturl + '">' + posttitle + '</a></h4><span class="side-item-meta">' + daystr + '</span></div></div></li>';

document.write(trtd);

j++

}

function stripHtmlTags1(s){return s.replace(/<a.*?>/ig, '')}

function showrecentcomments(json) {

for (var i = 0; i < 6; i++) {

var entry = json.feed.entry[i];

var ctlink;

if (i == json.feed.entry.length) break;

for (var k = 0; k < entry.link.length; k++) {

if (entry.link[k].rel == 'alternate') {

ctlink = entry.link[k].href;

break;

}

ctlink = ctlink.replace("#", "#comment-");

var ptlink = ctlink.split("#");

ptlink = ptlink[0];

var txtlink = ptlink.split("/");

txtlink = txtlink[5];

txtlink = txtlink.split(".html");

txtlink = txtlink[0];

var pttitle = txtlink.replace(/-/g," ");

pttitle = pttitle.link(ptlink);

if ("content" in entry) {

var comment = entry.content.$t;}

else

if ("summary" in entry) {

var comment = entry.summary.$t;}

else var comment = "";

var re = /<\S[^>]*>>/g;

comment = comment.replace(re, "");

document.write('<li>');

commentauthor1 = entry.author[0].name.$t;

commentauthor = stripHtmlTags(commentauthor1,40);

document.write('<div class="small"><i class="icon-comment-alt"></i> ' + commentauthor + '</div>');

if (comment.length < 100) {

document.write('<div class="comments-custom_txt"><a target="_blank" href="' + ctlink + '">'+stripHtmlTags1(comment)+ '</a></div>');

}

else

{

comment = comment.substring(0, 100);

var quoteEnd = comment.lastIndexOf(" ");

comment = comment.substring(0, quoteEnd);

document.write('<div class="comments-custom_txt"><a target="_blank" href="' + ctlink + '">'+stripHtmlTags1(comment) + '...</a></div>');

}

document.write('</li>');

}

//]]>

</script>

Damos clic en Guardar Plantilla.

De esto no cambiaremos nada, no se preocupen :) Ya con esto terminamos de Editar el html, ahora si, vamos a lo bonito que es darle estilo a nuestro nuevo apartado del blog.

AÑADIENDO EL ESTILO

Vamos a Plantilla ⇾ Personalizar ⇾ Opciones Avanzadas ⇾ Agregar CSS y pegamos lo siguiente:

/* Post Relacionados

----------------------------------------------- */

.post-related {

overflow:hidden;

margin-bottom:50px;

margin-top:50px;

}

.post-box { text-align:center; }

.item-related:last-child { margin-right:0; }

.container.sp_sidebar .item-related{

width:182px;

margin-right:5px;

}

.container.sp_sidebar .item-related:last-child {

margin-right:0;

}

.item-related span.date {

font-size:10px;

font-family:"Open Sans", sans-serif;

text-transform:uppercase;

font-style:italic;

color:#999;

}

.post-box-title {

padding-bottom: 3px;

display: inline-block;

margin-top: 0;

font-size: 24px; /* Tamaño de letra del título de la sección */

font-weight: 400;

font-style: normal;

line-height: 1.25;

letter-spacing: 3px;

text-transform: uppercase;

text-align: center;

color: #222222; /* Color del título de la sección */

margin-bottom: 20px;

}

.item-related {

width:23%; /* Tamaño de la imagen.*/

/* Hay que cambiar al porcentaje dependiendo de cuantas entradas quieres que se muestren dividiendo 100 entre el número de entradas y restando 2. Ejemplo, si quiero que muestre 5 entradas: 100 entre 5 = 20, menos 2, pondríamos 18% */

float:left;

margin:1%;

}

.item-related img:hover {

opacity: .5;

}

.item-related h3 a {

font-size: 10px; /* Tamaño del título de la entrada */

text-align: center;

display: block;

font-weight: bold;

color: #222222; /* Color del título de la entrada */

line-height: 16px;

}

.item-related img {

margin-bottom:6px;

width:100%;

height:auto;

}

Damos clic en Aplicar al Blog.

Ahora si, ya tenemos instalado en nuestro blog las entradas relacionadas. Se verá algo como esto:

Por default, es cuadradito, pero si lo quieres cambiar, te doy tres opciones más.

CAMBIANDO EL ESTILO

Para cambiar el aspecto de la imagen vamos a ir nuevamente a Dashboard ⇾ Plantilla ⇾ Editar HTML y buscamos la siguiente linea:

.item-related img {

En este código, vamos a añadir el formato que le queremos dar dependiendo del que escojas, te dejo los estilos. No olvides que el código que agregamos siempre debe tener un cierre de corchete } abajo.

Este es el código que hay que añadir para que queden circulares.

border-radius: 100px;

Este es el código que hay que añadir para que queden en forma de hoja.

border-radius: 50px 0 50px 0;

Este es el código que hay que añadir para que queden con dos bordes redondeados.

border-radius: 25px 0 25px 0;

No olviden dar clic en Guardar Plantilla para que se hagan los cambios.

Ahora si, ya debe ser completamente funcional apartado de post relacionados. Traté de explicarlo lo más sencillo que pude con ayuda de imágenes por si son más visuales. Si tienen una duda, por favor coméntenla aquí y les ayudaré hasta donde me sea posible.

¿Que otro tutorial de blog les gustaría ver?