¡ 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
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)...
Puedes ver el resultado del truco en este blog de pruebas.
Busca la etiqueta </head> y añade este script encima:
Ahora busca la etiqueta ]]></b:skin> e inserta estos bloques de CSS encima:
Por último busca esta línea en tu plantilla:
En caso de no encontrarla, busca esta otra:
Y agrega este código justo debajo:
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:
Referencias: Blogger Plugins
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)...
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 == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'/>
<b:if cond='data:blog.pageType == "item"'>
<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:if></b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=4;
var relatedpoststitle="Te puede interesar...";
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.
- Si deseas editar el gadget (colores, fondos, tamaños...) y no sabes como hacerlo, deja un comentario para que pueda ayudarte.
Referencias: Blogger Plugins
Blog, alimento de las redes ¡hay que aprovecharlo!
