Mostrando entradas con la etiqueta Artículos relacionados. Mostrar todas las entradas
Mostrando entradas con la etiqueta Artículos relacionados. Mostrar todas las entradas

Cómo instalar artículos relacioandos por categorías

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.


Artículos relacionados por categorías
Hace tiempo vi en el blog de Hoctro un truco bastante interesante. Se trata de incluir los artículos relacionados, como previamente habíamos visto, pero esta vez por categorías.

Opté por explicar el truco en el balcón y hacer unos retoques en el código para que podamos usarlo en español. ^_^

Te dejo una imagen para que entiendas mejor de lo que hablo:


Como puedes ver, los posts relacionados aparecen según las etiquetas que tengan (Lorem ipsum y Lorem ipsum 2 en este caso).

Para incluirlo en tu blog simplemente debes seguir los pasos que te muestro a continuación...


Diseño>edición HTML>expandimos artilugios


Busca la etiqueta <data:post.body/> y justo debajo pega lo siguiente:

<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>
<!-- ***http://hoctro.blogspot.com***Jan,2007**** -->
<!-- ***Related Articles by Labels - Take Two*** -->
<!--
Modificado por El balcon de jaime y Jackbook.com.
1. Now, users don't need to change anything to use this widget. just copy and paste, and done!
2. The current article will also be listed, now it's no more.
-->
<div class='widget-content'>
<h3>Artículos relacionados:</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 4;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;data2007&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
</div>
</b:if>

Puedes editar lo siguiente...

- El número máximo de entradas relacionadas a mostrar por etiqueta:

Busca la línea var maxNumberOfPostsPerLabel = 4; y cambia el 4 por el número máximo de entradas a mostrar con cada etiqueta. Hay dos líneas iguales, cámbialo en ambas.

- El número máximo de etiquetas (son sus respectivas entradas relacionadas) a mostrar:

Busca la línea var maxNumberOfLabels = 10; y cambia el 10 por el número máximo de etiquetas a mostrar. Hay dos líneas iguales, cámbialo en ambas.

Guarda cambios y tendrás los artículos relacionados por categorías en tu blog. ☺

Como instalar artículos relacionados con fotos en tu blog

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Artículos relacionados con imagen en tu blog
Hace tiempo aprendimos a poner el truco de artículos relacionados en el blog y posteriormente vimos la forma de instalar los artículos relacionados por categorías.

Esta vez te traigo un nuevo truco con el que podrás mostrar las entradas relacionadas de tu blog junto a una captura de imagen (que contiene el artículo)...


Entradas relacionadas con miniatura de imagen, artículos relacionados con imagen en tu blog



Puedes ver el resultado del truco en este blog de pruebas.

Diseño>Edición de HTML>expandimos artilugios




Busca la etiqueta </head> y añade este script encima:

<script type='text/javascript'>//<![CDATA[
var relatedTitles = new Array(); var relatedTitlesNum = 0; var relatedUrls = new Array(); var thumburl = new Array(); 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 thumburl[relatedTitlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF7jbInhS9S3JHPbpFxTla7kq4STYe9HDYmWOglnnMz9l05u8F1EzBYGkrNkrL3eK1Qw2CHWRRLfH-Or156lUOqf5Ryz0ERIo1G2TtxhJrvGetYTR5EPBpN8Dz72WSGV_vG2OhihDEo29i/s320/blnoimg.png';}
if(relatedTitles[relatedTitlesNum].length>44) relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0, 44)+"..."; 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() { for(var i = 0; i < relatedUrls.length; i++) { if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))) { relatedUrls.splice(i,1); relatedTitles.splice(i,1); thumburl.splice(i,1); } } var r = Math.floor((relatedTitles.length - 1) * Math.random()); var i = 0; if(relatedTitles.length>0) document.write('<h4>'+relatedpoststitle+'</h4>'); document.write('<div style="clear: both;"/>'); while (i < relatedTitles.length && i < 20 && i<maxresults) {
document.write('<a style="text-decoration:none;padding:4px;float:left;');
if(i!=0) document.write('border-left: solid 0.5px #6ecf59;"');
else document.write('"');
document.write(' href="' + relatedUrls[r] + '"><img style="width:108px;height:76px;border:0px;" src="'+thumburl[r]+'"/><br/><div id="related-titles">'+relatedTitles[r]+'</div></a>'); if (r < relatedTitles.length - 1) { r++; } else { r = 0; } i++; } document.write('</div>'); }
//]]></script>


Ahora busca la etiqueta ]]></b:skin> e inserta estos bloques de CSS encima:

#related-posts{
border: 1px solid #6ecf59;
overflow:hidden;
min-height:100%;
margin-top: 40px;
margin-bottom: 20px;
text-transform:none;
height:100%;
padding:0;
}
#related-posts h4 {
background:none repeat scroll 0 0 #D7F5D1;
border-bottom:1px solid #6ECF59;
margin:0 0;
padding:6px;
color:#333333;
font-family:Trebuchet MS,Arial,sans-serif;
font-size:14px;
font-weight:normal;
}
#related-titles{
width:114px;
height:78px;
text-align:left border:none;
padding-left:2px;
font-size:90%;
line-height:normal;
font-weight:700;
color: #315d28;
margin:4px 0 0;}

#related-posts a{color:#333;}
#related-posts a:hover{color:#333;background-color: #c3f4b9;}

Por último busca esta línea en tu plantilla:
<p class='post-footer-line post-footer-line-1'>

En caso de no encontrarla, busca esta otra:

<div class='post-footer-line post-footer-line-1'>

Y agrega este código justo debajo:

<!-- bl_Articulos relacionados -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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=6&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=4;
var relatedpoststitle=&quot;Te puede interesar...&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- bl_Fin Articulos relacionados -->

Selecciona la cantidad de entradas relacionadas con imagen a mostrar en la línea que ves en verde, reemplazando la cifra 4 por cualquier otra.

La frase que he marcado en naranja es el título que llevará el recuadro y puede sustituirse por cualquier otra cosa.

Guarda la plantilla para terminar:




Nota:

- Para reducir el tamaño de las casillas que recogen cada entrada relacionada, observa esta imagen y edita lo que ves en color rojo.

- Si deseas editar el gadget (colores, fondos, tamaños...) y no sabes como hacerlo, deja un comentario para que pueda ayudarte.


Referencias: Blogger Plugins
Related Posts Plugin for WordPress, Blogger...