Mostrando entradas con la etiqueta Widgets. Mostrar todas las entradas

domingo, 28 de mayo de 2017

Chats

Introducir un chat en tu web: aquí o aquí.

Últimos comentarios con avatar

Gadget de comentarios recientes en Blogger

A los Bloggers que leen esta nota hoy les enseñaré de forma sencilla como poner el gadget de últimos comentarios en nuestros blogs, su visualización en el blog quedará así:

Interesante!... Para insertar este Gadget en nuestro blog vamos a Diseño > Añadir un Gadget > HTML/JavaScript allí pegaremos el siguiente código:

<style type="text/css">
ul.latest_recent_comments{list-style:none;margin:0;padding:0}
.latest_recent_comments li{position: relative;background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none}
.latest_recent_comments li a{float:right;width:250px;font-size:12px;font-family:Arial;color:#888;background:#2c2c2c;margin-top:9px;padding:10px 7px 5px;border:1px solid #161616;border-right:3px solid #5390ad}
.latest_recent_comments li a:hover{color:#fff !important}
.latest_recent_comments li a:hover{color:#5390ad;background:#2c2c2c}
.latest_recent_comments li .avatarImage{float:left;margin:0 6px 0 0;position:relative;overflow:hidden}
.avatarRound{width:34px;height:34px}
.latest_recent_comments li img{padding:0;position:relative;overflow:hidden;display:block}
.latest_recent_comments li span{position: absolute;left:42px;padding:1px 3px;color:#8f887c;background:#444;display:block;font-size:12px;line-height:1.4}
.latest_recent_comments span{display:none}
</style>
<script type='text/javascript'>
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('8 z=z||5,2=2||1E,p=p||18,7=7||"17://14.13.6/-11-V/U-1y/1t/1b/12/10.w",x=x||" X &1d;",k="l"===m k?!0:k,n="l"===m n?!1:n,9="l"===m 9?!0:9,K="l"===m K?!1:9;16 M(h){8 c;c=\'<E B="M">\';A(8 e=0;e<z;e++){8 f,g,a,d;15(e==h.F.G.o)1c;c+="<H>";8 b=h.F.G[e];A(d=0;d<b.r.o;d++)"S"==b.r[d].T&&(f=b.r[d].y);A(d=0;d<b.v.o;d++)g=b.v[d].W.$t,a=b.v[d].Y$Z.I;-1!=a.3("/J/")?a=a.q("/J/","/s"+2+"-c/"):-1!=a.3("/D/")?a=a.q("/D/","/s"+2+"-c/"):-1!=a.3("/L-c/")&&0!=a.3("j:")?a="j:"+a.q("/L-c/","/s"+2+"-c/"):-1!=a.3("u.6/i/1a-N.C")?a="j://1.O.P.6/-1e/1f/1g/1h-1i/s"+2+"/1j.w":-1!=a.3("u.6/i/1k-N.C")?a="j://4.O.P.6/-1l/1m/1n/1o/s"+2+"/1p.w":-1!=a.3("u.6/i/1q.C")&&(a=-1!=7.3("1r.6")?7+"&s="+2:7);!0==k&&(d=!0==9?"1s":"",c+=\'<Q B="1u \'+d+\'"><i B="\'+d+\'" I="\'+a+\'" 1v="\'+g+\'" 1w="\'+2+\'" 1x="\'+2+\'"/></Q>\');c+="<R>"+g+"</R>";b=b.1z.$t.q(/(<([^>]+)>)/1A,"");""!=b&&b.o>p&&(b=b.1B(0,p),b+="&1C;",!0==n&&(b+=\'<a y="\'+f+\'">\'+x+"</a>"));c+=\'<a y="\'+f+\'">\'+b+"</a>";c+="</H>"}c+="</E>";1D.19(c)};',62,103,'||avatarSize|indexOf|||com|defaultAvatar|var|roundAvatar|||||||||img|http|showAvatar|undefined|typeof|showMorelink|length|characters|replace|link|||blogblog|author|png|moreLinktext|href|numComments|for|class|gif|s220|ul|feed|entry|li|src|s1600|hideCredits|s512|latest_recent_comments|rounded|bp|blogspot|div|span|alternate|rel|UPb7SL|32nw|name|More|gd|image|personal|5YeC_6|s80|googleusercontent|lh5|if|function|https|40|write|b16|QJRpUV7G9bc|break|raquo|NAMZejK41So|T0evV0_SSUI|AAAAAAAACso|ol6|PKkZipA|md_blogger_logo|openid16|k0U7v1WpNRs|T0euKMHQi_I|AAAAAAAACsg|DNqzinhvxt4|md_openid_logo|blank|gravatar|avatarRound|AAAAAAAABWE|avatarImage|alt|width|height|uGXI|content|ig|substring|hellip|document|34'.split('|'),0,{}))
</script>
<script type="text/javascript" src="http://NOMBRETUBLOG.blogspot.com/feeds/comments/default?alt=json&callback=latest_recent_comments&max-results=5"></script>

Ahora simplemente reemplazamos en el código lo que está en naranja por la URL de nuestro blog, y procedemos a guardar, muy simple.

Si presentan dudas pueden comentar...

Widget entradas recientes con imágen

Widget de Posts recientes con imágenes para Blogger

Blogger Publicado por Claudia en Febrero 7, 2012

Hay varias versiones de widgets para mostrar los últimos posts el Blogger. Si buscamos “recent posts” en los widgets de Blogger, podremos encontrar dos opciones distintas en inglés; no obstante, hay una versión que tomé de Webaholic y modifiqué muy levemente, y que considero útil de compartir por tres razones: (1) está en español; (2) no tienes que preocuparte del alojamiento del script; y (3) es fácilmente modificable.

Añade el widget

Este widget de posts recientes se añade simplemente copiando el siguiente códígo en un gadget en blanco (Diseño>Añadir un Gadget>HTML/Javascript):

<style type='text/css'>
img.recent_thumb {padding:2px;width:70px;height:70px;border:0;
float:left;margin:5px 10px 10px 0; border: 1px solid #ccc;}
.recent_posts_with_thumbs {float: left;width: 100%;min-height: 100px;margin: 0px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:75px;}
.recent_posts_with_thumbs a {text-decoration:none;}
.recent_posts_with_thumbs strong {font-size:10px;}
.recent_posts_with_thumbs h4 {
text-transform: uppercase;
font-size: 14px;
}
</style>
<script type='text/javascript'>
//<![CDATA[
function showrecentpostswiththumbs(json) {document.write('<ul class="recent_posts_with_thumbs">'); for (var i = 0; i < numposts; i++) {var entry = json.feed.entry[i];var posttitle = entry.title.$t;var posturl;if (i == json.feed.entry.length) break;for (var k = 0; k < entry.link.length;k++){
if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if (entry.link[k].rel == 'alternate') {posturl = entry.link[k].href;break;}}var thumburl;try {thumburl=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=d;} else thumburl='http://www.webaholic.co.in/other/no-image.jpg';
}
 
var postdate = entry.published.$t;var cdyear = postdate.substring(0,4);var cdmonth = postdate.substring(5,7);var cdday = postdate.substring(8,10);var monthnames = new Array();monthnames[1] = "Ene";monthnames[2] = "Feb";monthnames[3] = "Mar";monthnames[4] = "Abr";monthnames[5] = "May";monthnames[6] = "Jun";monthnames[7] = "Jul";monthnames[8] = "Ago";monthnames[9] = "Sep";monthnames[10] = "Oct";monthnames[11] = "Nov";monthnames[12] = "Dic";document.write('<li class="clearfix">');
 
 
if(showpostthumbnails==true) 
document.write('<img class="recent_thumb" src="'+thumburl+'"/>');
document.write('<b><h4><a href="'+posturl+'" target ="_top">'+posttitle+'</a></b></h4>');
 
    if ("content" in entry) {
      var postcontent = entry.content.$t;}
    else
    if ("summary" in entry) {
      var postcontent = entry.summary.$t;}
    else var postcontent = "";
    var re = /<\S[^>]*>/g; 
    postcontent = postcontent.replace(re, "");
 
 
if (showpostsummary == true) {
 
      if (postcontent.length < numchars) {
          document.write('<i>');
         document.write(postcontent);
          document.write('</i>');}
      else {
          document.write('<i>');
         postcontent = postcontent.substring(0, numchars);
         var quoteEnd = postcontent.lastIndexOf(" ");
         postcontent = postcontent.substring(0,quoteEnd);
         document.write(postcontent + '...');
          document.write('</i>');}
}
 
var towrite='';var flag=0;
document.write('<br><strong>');
 
if(showpostdate==true) {towrite=towrite+monthnames[parseInt(cdmonth,10)]+' - '+cdday+' - '+cdyear;flag=1;}
 
if(showcommentnum==true) 
{
if (flag==1) {towrite=towrite+' | ';}
if(commenttext=='0 Comments') commenttext='0 comentarios';
if(commenttext=='1 Comment') commenttext='1 comentario';
commenttext = '<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';
towrite=towrite+commenttext;
flag=1;
;
}
 
if(displaymore==true) 
{
if (flag==1) towrite=towrite+' | ';
towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">Más</a>';
flag=1;
;
}
 
document.write(towrite);
 
document.write('</strong></li>');
if(displayseparator==true) 
if (i!=(numposts-1))
document.write('');
}document.write('</ul>');
 
}
//]]>
</script>
<script style='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var displaymore = true;
var displayseparator = true;
var showcommentnum = true;
var showpostdate = true;
var showpostsummary = true;
var numchars = 80;</script>
<script src='http://TUBLOG.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>

Para que funcione, en la última línea debes reemplazar “TUBLOG” por el nombre de tu blog.

Vista previa del widget

Algunas opciones de configuración…

En general, puede ser que no necesites hacer ningún cambio extra al widget ya añadido; sin embargo puedes hacer algunas pequeñas modificaciones para hacer que éste se adapte a tus preferencias.
En los estilos, por ejemplo, puedes ver que el tamaño por defecto de los thumbnails o miniaturas de imagen, es de 70×70 píxeles (segunda línea), y que éstos tienen un borde. También, en los estilos puedes cambiar los estilos de letras.
Al final del código veremos una serie de variables, donde:

numposts: indica el número de posts que se muestran (por defecto, “5”).
numchars: indica el número de caracteres de los resúmenes (por defecto, “80”).

Las siguientes variables pueden ser cambiadas de “true” a “false” (o viceversa) para habilitar o deshabilitar alguna de las funciones:

showpostthumbnails: muestra miniaturas de imagen.
displaymore: muestra el enlace “Más”.
displayseparator: muestra una línea de separación entre cada ítem.
showpostdate: muestra la fecha de cada post.
showpostsummary: muestra un resumen de cada post.

domingo, 21 de mayo de 2017

Contadores de visitas

Feedburner.

Biblioteca de libros

Cómo poner una biblioteca personalizada en nuestro blog

Laboratorio Edu... 2 comentarios Imprimir Laboratorio

Si queremos exponer en nuestro blog los libros de lectura de clase, los que recomendamos a los alumnos o los libros que nos gustan, contamos con una herramienta fantástica que nos presenta los libros que seleccionemos en una estantería virtual muy útil. La web aNobii cuenta con millones de libros de diferentes temáticas e idiomas. Además, se pueden dejar comentarios y opiniones en los libros. Aunque en esta web no se pueden leer los libros es un servicio interesante para dar a conocer nuestros gustos literarios y fomentar la lectura a través del blog.

Herramienta propuesta

http://www.anobii.com/

Cómo se hace

Entramos en la web aNobii y nos registramos como usuarios. Una vez confirmada la cuenta accedemos a la página para elaborar nuestra biblioteca personalizada. En primer lugar, hacemos clic en "Mi estantería" y ya podemos comenzar a configurarla. Buscamos el libro que nos interesa poniendo el título, autor o ambos.

Paso 1

Después de ver los resultados de la búsqueda de nuestro libro, seleccionamos el que nos interesa y hacemos clic en "Agregar". A continuación, lo veremos colocado en nuestra estantería virtual.

Paso 2

Una vez terminada la estantería con todos los libros que queremos, accedemos a la parte inferior y hacemos clic en "Crear un bloque para su blog" y seleccionamos la opción de nuestro blog: Blogger, Wordpress, etc. o el bloque HTML para incrustarlo. En la barra lateral de este blog tenéis un ejemplo.

Saber más
Anobii es más que un servicio para crear estanterías virtuales de libros, es una red social para lectores donde compartir opiniones y recomendar libros de lectura. En el siguiente artículo encontraréis más información sobre esta herramienta. También en la web Leer.es aparece información sobre este servicio web.

Tienes todas las Herramientas y Recetas disponibles en...

Mensajes de voz en el blog

https://www.speakpipe.com/

Frases aleatorias 2

Gadget de entradas aleatorias

Acabo de colocarlo a prueba en la sidebar del Escaparate.

En mi caso muestra siete entradas al azar, que irán cambiando de forma aleatoria cada vez que se refresque la página o se acceda al blog.

Para usarlo en vuestro blog, tenéis que copiar y pegar este script en un gadget HTML en vuestra sidebar:

<div id="random-posts">
<script type="text/javascript">
function getRandomPosts(json) {
var maxEntries = 5;
var numPosts = json.feed.openSearch$totalResults.$t;
var indexPosts = new Array();
for (var i = 0; i < numPosts; ++i) {
indexPosts[i] = i;
}
indexPosts.sort(function() {return 0.5 - Math.random()});
if (maxEntries > numPosts) {
maxEntries = numPosts;
}
var container = document.getElementById('random-posts');
var ul = document.createElement('ul');
for (i = 0; i < maxEntries; ++i) {
var entry = json.feed.entry[indexPosts[i]];
var li = document.createElement('li');
var a = document.createElement('a');
a.title = entry.title.$t;
for (var j = 0; j < entry.link.length; ++j) {
if (entry.link[j].rel == 'alternate') {
a.href = entry.link[j].href;
break;
}
}
a.appendChild(document.createTextNode(entry.title.$t));
li.appendChild(a);
ul.appendChild(li);
}
container.appendChild(ul);
}
</script>
<script src="/feeds/posts/summary?alt=json-in-script&callback=getRandomPosts&max-results=999" type="text/javascript"></script>
</div>

Modificaciones:

En var maxEntries = 5; colocamos el número de entradas a mostrar.
En max-results=999 yo he dejado 999 ya que son bastantes más de las que tengo publicadas, podéis poner un número mucho más alto, incluso 999999...

El script está incluido dentro de un div al que hemos llamado "random-posts", usando ese nombre podéis añadir unas líneas de CSS (siempre antes de ]]></b:skin>) para añadir un icono delante de cada título por ejemplo.
Este es el código que yo uso para mi gadget:

#random-posts li{
background: url(http://3.bp.blogspot.com/_8PJ-pgoBhWQ/Scp5LCbO5qI/AAAAAAAAGc0/i8lABu0DF7I/s320/0027_datadialogsbullet.png) no-repeat 0px 4px;
padding: 0px 0 0px 12px;
}

Nota:
He notado que a veces el gadget tarda algo en cargar, así que lo más adecuado será no colocarlo demasiado arriba en la sidebar para que no retarde la carga del blog.

Si queremos usarlo para mostrar en nuestro blog las entradas aleatorias de otro blog, colocamos la url del blog en esta línea del gadget:

<script src="http://elescaparatederosa.blogspot.com/feeds/posts/summary?alt=json-in-script&callback=getRandomPosts&max-results=999" type="text/javascript">

Frases aleatorias

Frases aleatorias en cualquier sitio

La última vez que propuse un script para mostrar frases o citas aleatorias, mis conocimientos de JavaScript eran todavía menores de lo que son ahora (que ya es decir), así que no pensé en usar aquella función en un sitio distinto que en un gadget de la sidebar o similar. Sin embargo el otro día, a Seba77 le interesó conocer cómo montar este mismo código para sustituir el típico "Haga su comentario" que por defecto lleva Blogger justo antes del formulario correspondiente.

Para poder hacer eso tanto en el sitio que nos preguntaban como en cualquier otro, la solución consiste en utilizar el mismo código de entonces, pero formando parte de una función. Después, a diferencia también de entonces, tendremos que hacer una llamada al script dónde nos interese. Verbigracia:

<script type='text/javascript'>
function frasesaleatorias (){
frases = new Array()
frases[0] = "Comenta, que es gratis."
frases[1] = "Por cada comentario regalo un abrazo virtual."
frases[2] = "Comenta que algo queda."
frases[3] = "No por mucho comentar, amanece más tarde."
frases[4] = "Tienes dos opciones: Opinar aquí o callar. Tú eliges."
aleatorio = Math.random() * (frases.length)
aleatorio = Math.floor(aleatorio)
document.write(frases[aleatorio])
}
</script>

Está función habría que grabarla antes de </head> que es el lugar habitual para este tipo de códigos. Una vez que la tengamos ya sólo tenemos que poner esto otro, allí dónde queramos que aparezca la frase...

Para el ejemplo mencionado del texto antes del formulario de comentarios Blogger, la cosa quedaría así:

<h4 id='comment-post-message'>~~<data:postCommentMsg/>~~<script type='text/javascript'>frasesaleatorias();</script></h4>

Lo tachado es la variable con el texto estándar, que para que no aparezca, hay que borrarla del código.

De la misma manera, una vez grabado el script en la plantilla, la llamada al mismo se puede colocar en cualquier parte.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Chats en un blog

Introducir un chat en tu web: aquí o aquí.

Widget comentarios recientes con avatar

Widget de comentarios recientes con avatar para Blogger

Blogger Publicado por Claudia en Septiembre 24, 2012

Osman había preguntado cómo agregar un gadget con los últimos comentarios pero mostrando avatar de los autores. Hay varios tutoriales al respecto, pero a veces es tedioso e innecesario seguirlos cuando tienes un generador que en menos de treinta segundos añadirá el gadget que necesitas. En Way2Blogging encontré un genial generador para añadir un widget de comentarios recientes a tu blog de Blogger. Aunque está en inglés, es realmente simple de usar, y no necesitarás tocar el código de tu plantilla en absoluto.
Comentarios recientes con avatar para Blogger

Sólo hay dos campos que necesitamos cambiar: Widget title (el título que queramos que lleve nuestro widget) y Blog URL (el enlace a nuestro blog, no el del feed). Los demás pueden quedar tal cual. Por defecto, el wiget mostrará 5 comentarios, con avatares de 60 píxeles de diámetro y con bordes redondeados. Aquellos comentarios de usuarios sin avatar mostrarán la imagen de incógnito de Gravatar, la cual podemos cambiar simplemente modificando el enlace que allí aparece (necesitamos alojarla previamente).
Una vez que hayamos hecho los cambios correspondientes, presionamos el botón “Generate“. A continuación, veremos un botón azul que dice “Add to Blogger“. Hacemos click sobre él, luego en “Añadir artilugio” en la nueva pestaña que se abrirá, y veremos que el widget se ha agregado a la barra lateral de nuestro blog.
El resultado será el siguiente:
Comentarios recientes Blogger

Podemos hacer cambios en el CSS que se ha añadido en el widget, aunque quizás no sea necesario.
Enlace: Generador de comentarios recientes con avatar

Gadget de comentarios recientes en Blogger

18:05 blogger 41 comentarios

A los Bloggers que leen esta nota hoy les enseñaré de forma sencilla como poner el gadget de últimos comentarios en nuestros blogs, su visualización en el blog quedará así:

Interesante!... Para insertar este Gadget en nuestro blog vamos a Diseño > Añadir un Gadget > HTML/JavaScript allí pegaremos el siguiente código:

<style type="text/css">
ul.latest_recent_comments{list-style:none;margin:0;padding:0}
.latest_recent_comments li{position: relative;background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none}
.latest_recent_comments li a{float:right;width:250px;font-size:12px;font-family:Arial;color:#888;background:#2c2c2c;margin-top:9px;padding:10px 7px 5px;border:1px solid #161616;border-right:3px solid #5390ad}
.latest_recent_comments li a:hover{color:#fff !important}
.latest_recent_comments li a:hover{color:#5390ad;background:#2c2c2c}
.latest_recent_comments li .avatarImage{float:left;margin:0 6px 0 0;position:relative;overflow:hidden}
.avatarRound{width:34px;height:34px}
.latest_recent_comments li img{padding:0;position:relative;overflow:hidden;display:block}
.latest_recent_comments li span{position: absolute;left:42px;padding:1px 3px;color:#8f887c;background:#444;display:block;font-size:12px;line-height:1.4}
.latest_recent_comments span{display:none}
</style>
<script type='text/javascript'>
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('8 z=z||5,2=2||1E,p=p||18,7=7||"17://14.13.6/-11-V/U-1y/1t/1b/12/10.w",x=x||" X &1d;",k="l"===m k?!0:k,n="l"===m n?!1:n,9="l"===m 9?!0:9,K="l"===m K?!1:9;16 M(h){8 c;c=\'<E B="M">\';A(8 e=0;e<z;e++){8 f,g,a,d;15(e==h.F.G.o)1c;c+="<H>";8 b=h.F.G[e];A(d=0;d<b.r.o;d++)"S"==b.r[d].T&&(f=b.r[d].y);A(d=0;d<b.v.o;d++)g=b.v[d].W.$t,a=b.v[d].Y$Z.I;-1!=a.3("/J/")?a=a.q("/J/","/s"+2+"-c/"):-1!=a.3("/D/")?a=a.q("/D/","/s"+2+"-c/"):-1!=a.3("/L-c/")&&0!=a.3("j:")?a="j:"+a.q("/L-c/","/s"+2+"-c/"):-1!=a.3("u.6/i/1a-N.C")?a="j://1.O.P.6/-1e/1f/1g/1h-1i/s"+2+"/1j.w":-1!=a.3("u.6/i/1k-N.C")?a="j://4.O.P.6/-1l/1m/1n/1o/s"+2+"/1p.w":-1!=a.3("u.6/i/1q.C")&&(a=-1!=7.3("1r.6")?7+"&s="+2:7);!0==k&&(d=!0==9?"1s":"",c+=\'<Q B="1u \'+d+\'"><i B="\'+d+\'" I="\'+a+\'" 1v="\'+g+\'" 1w="\'+2+\'" 1x="\'+2+\'"/></Q>\');c+="<R>"+g+"</R>";b=b.1z.$t.q(/(<([^>]+)>)/1A,"");""!=b&&b.o>p&&(b=b.1B(0,p),b+="&1C;",!0==n&&(b+=\'<a y="\'+f+\'">\'+x+"</a>"));c+=\'<a y="\'+f+\'">\'+b+"</a>";c+="</H>"}c+="</E>";1D.19(c)};',62,103,'||avatarSize|indexOf|||com|defaultAvatar|var|roundAvatar|||||||||img|http|showAvatar|undefined|typeof|showMorelink|length|characters|replace|link|||blogblog|author|png|moreLinktext|href|numComments|for|class|gif|s220|ul|feed|entry|li|src|s1600|hideCredits|s512|latest_recent_comments|rounded|bp|blogspot|div|span|alternate|rel|UPb7SL|32nw|name|More|gd|image|personal|5YeC_6|s80|googleusercontent|lh5|if|function|https|40|write|b16|QJRpUV7G9bc|break|raquo|NAMZejK41So|T0evV0_SSUI|AAAAAAAACso|ol6|PKkZipA|md_blogger_logo|openid16|k0U7v1WpNRs|T0euKMHQi_I|AAAAAAAACsg|DNqzinhvxt4|md_openid_logo|blank|gravatar|avatarRound|AAAAAAAABWE|avatarImage|alt|width|height|uGXI|content|ig|substring|hellip|document|34'.split('|'),0,{}))
</script>
<script type="text/javascript" src="http://NOMBRETUBLOG.blogspot.com/feeds/comments/default?alt=json&callback=latest_recent_comments&max-results=5"></script>

Ahora simplemente reemplazamos en el código lo que está en naranja por la URL de nuestro blog, y procedemos a guardar, muy simple.

Si presentan dudas pueden comentar...

Widget entradas recientes más rápido

cambiar feed de la etiqueta por: http://tublog.com/feeds/posts/default/?start-index=1, y añadir más modificando el número final.

Últimas entradas con imagen miniatura, por categoría o etiqueta

Blogger ofrece muchos widgets, y por medio de ellos se pueden lograr muchas cosas, como crear un menú de navegación, mostrar los últimos comentarios por medio del feed etc., y sin necesidad de usar scripts adicionales, o agregar más código.

Una de esas cosas que podemos tener fácilmente es mostrar "las útimas entradas con imagen miniatura", por medio del widget de "lista de Blogs", ya que ese widget funciona con los feeds.

Hace tiempo Rosa, (que en paz descanse) publicó una entrada, en donde explicaba como mostrar las últimas entradas, usando este widget, ahora veremos, como mostrar las últimas entradas, de cierta categoría o etiqueta, usando ese widget.

Esto puede ser muy útil, cuando queremos mostrar las últimas entradas de cierto contenido, por ejemplo, vamos a suponer que tienes un blog de recetas, y quieres publicar las últimas entradas de la etiqueta: "pasteles", o que tengas un blog de manualidades y quiere mostrar las ultimas entradas de la etiqueta: "fieltro", en cualquier caso, lo podemos lograr, de este modo que a continuación se explica.

Cómo hacerlo paso a paso...

Paso 1: Desde tu escritorio, ve a Diseño ► Elementos de la página, en la nueva interfaz de Blogger, (en Blogger in Draft) ve a Diseño.

Paso 2: Agrega el widget de "Lista de Blogs":

Paso 3: Configúralo para que muestre:

Título del el elemento más reciente
Miniatura del elemento más reciente

...y también si quieres, puede agregar el "Fragmento del elemento más reciente", y la fecha de la última actualización, pero no el ícono.

configuración del widget de lista de blogs

Paso 4: Ahora, has click en Agregar un blog a tu lista y agregarás el siguiente enlace, para obtener el feed de la etiqueta que nos interesa:

http://MI-BLOG.blogspot.com/feeds/posts/default/-/ETIQUETA?start-index=1&max-results=1

Con ese enlace, se pueden obtener los Feeds de una etiqueta, y con el parametro: start-index podemos especificar el orden del contenido a mostrar; cambia, lo que esta marcado de rojo, donde dice: ETIQUETA, escribes el nombre de la etiqueta.

Deberás repetir esto, las veces necesarias según el número de entradas que quieras mostrar; cambiando el valor de start-index; tomando en cuenta que, cuando dice: "1", mostrará la última entrada con esa etiqueta, para leer la anterior en lugar de 1, pondrás 2, luego para la anterior a esa 3 y así sucesivamente.

Nota: Cuando uses una etiqueta con más de una palabra, escribes en medio de estas: %20

Por ejemplo, esta es mi etiqueta de "Explorando Blogger", y si la usará, la escribiría así:

Explorando%20Blogger

Paso 5: Guarda los cambios.

Paso 6: Luego necesitamos un poco de CSS, para eliminar el título del Blog, en cada artículo, también agregue otro poco de CSS básico, para que puedan personalizar el widget, y para agregarlo, lo pegan en Añadir CSS, desde el diseñador de plantillas (al hacerlo así, pueden editar el CSS añadido ahí mismo, las veces que quieran, y sin ingresar al HTML de la plantilla):

#BlogList1 h2 { /*El título del widget*/margin:0;
padding: 0;
background: url(tu-imagen.gif) no-repeat left top;
}
#BlogList1 ul{
margin: 0;
padding: 0;
width: 100%;
}
#BlogList1 .blog-title {
display: none; /*importante, eliminamos el título del Blog*/
}
#BlogList1 .item-title{ /*El título de cada artículo o post*/ margin:0;
padding:0;
}
#BlogList1 li img { /*La imagen miniatura de cada post*/ background-color: #ffffff; /*ponemos fondo*/
padding: 4px;
margin: 0;
}
#BlogList1 ul li { /*estilos de cada elemento de la lista*/ border-bottom: 1px dashed #cccccc; /*el borde*/
padding: 6px 0 0 0;
margin: 0;
}
#BlogList1 ul li a {
color: #7796d0; /*El color de el enlace*/
}
#BlogList1 ul li a:hover {
color: #7796d0; /*El color de el enlace al poner el puntero encima*/
}

Paso 7: Guarda los cambios, en APLICAR AL BLOG.

Paso 8: Finalmente, lo que resta es cambiar la URL en el código del widget, ya que, cuando se haga click sobre la imagen miniatura, nos llevará a la página de la etiqueta en cuestión (la que estamos usando) , y para ello, vamos a la edición de HTML de la plantilla, marcamos la casilla de expandir plantilla de artilugios, luego, buscamos, con la ayuda de "ctrl F", la siguiente linea:

<div class='item-thumbnail'>

Inmediatamente después viene esta linea:

<a expr:href='data:item.blogUrl' target='_blank'>

La cambiamos por esta:

<a expr:href='data:item.itemUrl' target='_blank'>

Al cambiarla, al hacer click sobre la imagen miniatura, iremos a la "entrada de esa imagen".

También, si no queremos que se abra en una nueva ventana, al hacer click sobre esta, eliminamos:

target='_blank'

Paso 9: Checamos en vista previa, y si todo luce bien, guardas los cambios.

¿y el DEMO?
Lo puedes ver ahora mismo en mi blog en últimas Plantillas, en mi caso, estoy mostrando la imagen miniatura y el título de la entrada...

Actualización: 08/01/2011. Agregue otro parámetro que es &max-results=1, para evitar que se repita la misma entrada.

Widget entradas recientes