Doce iconos RSS llenos de color en formato png y con unas medidas de 128px x 128px.
Como su creadora dice, están bajo licencia "haz lo que gustes con ellos y se feliz".
Para descargarlos pincháis sobre el que os guste con el botón derecho del ratón y "guardar como".
[+/-] |
Iconos RSS muy coloridos |
[+/-] |
"Volver arriba" con efecto deslizante usando Scriptaculous |
Ya vimos antes como colocar el "volver arriba" en cada entrada y lo que conseguiremos ahora, es esto mismo pero con un efecto deslizante muy elegante.
Podéis comprobar como funciona una vez aplicado, si pincháis en cualquiera de las flechitas que veis a la derecha en el post-footer (pie de entradas) de mi blog.
"Volver arriba" desde el pie de cada entrada (post-footer).
[1] Si no tenemos Scriptaculous aplicado en la plantilla, lo haremos ahora colocando el código necesario antes de </head> (acordaros que si ya lo estamos usando en algún efecto, no es necesario volver a incluirlo):
<!-- Prototype y Scriptaculous-->
<script src='http://www.google.com/jsapi'/>
<script>
google.load("prototype","1.6.0.3");
google.load("scriptaculous", "1.8.2");
</script>
<!-- Prototype y Scriptaculous-->
[2] Expandimos las plantillas de artilugios y localizamos más o menos esta línea (es donde yo lo he colocado en mi blog):
<p class='post-footer-line post-footer-line-1'>
En algunas plantillas podría mostrarse de esta manera:
<div class='post-footer-line post-footer-line-1'>
[3] Debajo de esa línea colocamos el código para la flechita:
<!--Flecha ir arriba -->
<a href='#outer-wrapper' onclick='new Effect.ScrollTo("outer-wrapper",{offset:-140}); return false'><img align='right' alt='Volver arriba' src='URL_DEL_ICONO_FLECHA' title='Volver arriba'/></a>
"Volver Arriba" desde la parte inferior derecha de la página
[1] Usaremos el mismo sistema que para incluir la flecha o el icono al pie de cada entrada, es decir, incluimos el código del paso [1] si no lo tenemos incluido de usos anteriores.
[2] Desde Edición HTML bajamos casi hasta el final del código de la plantilla y pegamos este código antes de </body>:
<a href='#outer-wrapper' onclick='new Effect.ScrollTo("outer-wrapper",{offset:-140}); return false'><img alt='Ir Arriba' border='0' src='URL_DE_LA_FLECHA_ICONO' style='position:fixed; bottom:0; right:0;' title='Ir Arriba'/></a>
Publicado por Anónimo a las 22:47 h. Etiquetas: Scriptaculous
[+/-] |
Google y el logo de cumpleaños de Morse |

El inventor y pintor estadounidense Samuel Finley Breese Morse, nació el 27 de abril de 1791 en Charlestown, Massachussets.
Inventó el telégrafo y el código que lleva su nombre.
Y este es el logo con el que Google celebra el aniversario de su nacimiento.
Publicado por Anónimo a las 1:42 h. Etiquetas: Buscadores, Cosas mias
[+/-] |
Efecto deslizante (slide) para entradas expandibles |
Usando este efecto las entradas se abren y se cierran con un efecto deslizante muy agradable y que además es muy sencillo de incorporar a los títulos de las entradas expandibles, tanto si estamos usándolas en la página principal, como en las páginas de etiquetas.
[1] Para aplicar el efecto deslizante, necesitamos usar las librerías (Prototype y Scriptaculous) de las que hablamos en una entrada anterior.
[2] Estas librerías las incluimos en la plantilla con un script de Google API y tendremos que añadirlo justo antes de </head>:
<!-- Prototype y Scriptaculous-->
<script src='http://www.google.com/jsapi'/>
<script>
google.load("prototype","1.6.0.3");
google.load("scriptaculous", "1.8.2");
</script>
<!-- Prototype y Scriptaculous-->
[3] Localizamos ahora con los artilugios expandidos, esta línea que forma parte del código que habíamos añadido para nuestras entradas expandibles:
<a expr:onclick='"javascript:toggleIt("" + data:post.id + "");"' href='javascript:void(0)' style='text-decoration:none' title='Expandir/Contraer la entrada'>[+/-]</a>
[4] La sustituimos por esta otra línea y guardamos los cambios:
<a expr:onclick='"Effect.toggle(\"" + data:post.id + "\",\"slide\");"' href='javascript:void(0)' style='text-decoration:none' title='Expandir/Contraer la entrada'>[+/-]</a>
Podéis comprobar el resultado pinchando en el [+/-] que acompaña al título de mis entradas expandibles en las páginas de etiquetas.
Publicado por Anónimo a las 2:25 h. Etiquetas: Entradas, Scriptaculous
[+/-] |
Sugerencias a Blogger |
Algunos recordaréis la campaña que Pizcos había lanzado el año pasado para reclamar el alojamiento de archivos en Blogger.
Se trataba de usar una imagen en nuestro blog con un enlace a la página de sugerencias de Blogger, donde por supuesto la intención era el sugerir la posibilidad de disponer de un espacio en Blogger para alojar archivos.
Los que estábamos usando la imagen en el blog, hace un tiempo que notamos que la página de sugerencias de Blogger ha desaparecido por lo que el enlace de la imagen lleva a una página que no existe como podéis comprobar en el enlace.
Por supuesto Pizcos se vio obligado a colocar un aviso en la entrada que proporcionaba la imagen, aclarando el porque el enlace ya no existía y sugiriendo la posibilidad de seguir usando la imagen aún sin enlace.
Esta mañana he leído en Blogger Buster que el equipo de Blogger tiene abierto una "especie de foro" donde los usuarios podemos dejar nuestras sugerencias e ideas para mejorar la plataforma, además de votar por las que otros usuarios han dejado antes.
Una vez en la página del foro tendremos que usar nuestra cuenta de Google para poder acceder y entonces veremos un pequeño formulario donde hemos de introducir un nick y un lugar de procedencia que será visible a los demás usuarios del foro.
Una vez logueados con esos datos, ya podremos sugerir ideas o votar por las que ya han sugerido otros usuarios.
En la parte izquierda de la página, donde dice "Pick a topic" hay tres enlaces a los que acceder según que nos interese votar o sugerir:
- Suggest a New Feature (Sugerir una nueva función)
- Suggest a Blog of Note (Sugerir un blog para que aparezca en su lista de destacados)
- Suggest a New Gadget (Sugerir un nuevo gadget)
En el caso de la imagen de Pizcos, lo lógico es que esta enlace con "Sugerir una nueva función" y una vez en el foro, tendremos que poner algo como lo que Pizcos ya apuntaba en su día: "Upload other files to my blog" en nuestra sugerencia.
También podemos votar a otros usuarios que ya están reclamando eso mismo, como Felipe Xavier de Brasil que sugiere "To upload multiple files, such as javascript" es decir El alojamiento de archivos, incluido Javascript"
Podemos entonces seguir usando la imagen de Pizcos, cambiando la dirección del enlace, para que apunte al nuevo foro de sugerencias Blogger y continuar así con la campaña que Pizcos inició en su día:
Actualizacion:
Leo en Blogger Buzz que el foro de suguerencias solo estará abierto hasta el día 14 de Mayo... menos es nada.
[+/-] |
Iconos para todos los gustos |
Drink Web 2.0
28 iconos sociales en forma de "latas de refresco" en formato ICO, .PNG, ICNS y JPG
Disponibles en distintos tamaños (32x32 px, 48x48 px, 64x64 px, 128x128 px, 256x256 px)
Chococons
12 iconos sociales con sabor a chocolate y forma de corazón en formato ICO
Disponibles en distintos tamaños: 32x32 px, 48x48 px, 64x64 px, 128x128 px, 256x256 px
Social Post Stamps
13 iconos sociales en forma de sellos de correos. Todos los iconos están disponibles en tres tamaños diferentes: 32x32, 64x64 and 128x128 px. excepto los de Digg y del.icio.us
Web 2.0 User
28 iconos en formato PNG (256x256, 128x128, 48x48, 32x32, 16x16), ICO (256x256, 128x128, 48x48, 32x32, 16x16) y ICNS (256x256, 128x128, 48x48, 32x32, 16x16).
(max)Icone Blog
25 iconos en formato .png tipo "pegatina".
[+/-] |
Gadget para mostrar los últimos retweet (RT) |
Si usas Twitter entonces sabrás que los retweet (RT) son una rápida manera de propagar todo tipo de información en Internet a través de Twitter.
El funcionamiento es sencillo.
Alguien escribe un update en Twitter, un seguidor lo lee y lo considera interesante, original o, por la razón que sea, le llama la atención y decide hacer un RT de ese mensaje.
En realidad es una especie de "copie y paste" consentido, donde se reproduce el update anterior, precedido de las letras RT escritas en mayúsculas.
Esta tarde he incluido un gadget que muestra los últimos RT que me han hecho en el footer y mi amiga Selene me ha preguntado como hacerlo.
Hay una web llamada retweetrank donde con solo introducir nuestro nombre de usuario en Twitter iremos a una página donde están recogidos todos los RT que nos han hecho.
Una vez accedemos a la página con nuestros RT, pinchamos en el icono de RSS que está bien visible a la derecha, y copiamos la url del navegador.
Desde la parte de Diseño de nuestro panel, añadimos un nuevo gadget FEED y colocamos dentro la dirección del feed obtenida que será algo parecido a esta:
http://www.retweetrank.com/rosatorre/feed
Donde dice rosatorre irá el nombre de vuestro usuario de Twitter en minúsculas.
Si además de los RT, quieres colocar un gadget donde se vean todos los updates donde aparezca nuestro nick en Twitter, el sistema es prácticamente idéntico pero para usarlo tendrás que visitar a Pizcos y seguir sus instrucciones.
[+/-] |
Destacar los enlaces visitados en los posts |
Hace tiempo que usaba este sistema de pequeños iconos en el Escaparate para señalar los enlaces de las entradas que ya habían sido visitados, hoy he vuelto a incluirlo.
Los enlaces solo en el cuerpo de las entradas (post-body) se verán resaltados como muestra la imagen:
Como veis, para el enlace normal (a la vista) no añadiremos ningún código, con lo que mostrará el mismo aspecto que los demás enlaces del blog.
Una vez que alguien haya visitado ese enlace y vuelva después a esa entrada, el enlace se mostrará con un pequeño icono de color gris que avisa de que ya hemos pinchado antes en ese enlace.
Si aún así, pasamos el ratón sobre ese enlace, el icono gris cambiará a uno de color rojo para "reforzar" el aviso.
Por supuesto podéis usar otros iconos distintos a estos, cambiando la url en el código por la de vuestras imágenes.
Y este es el código para los enlaces, que colocaremos en el CSS (antes de ]]></b:skin>) de nuestra plantilla:
/* Posts links
----------------*/
.post-body a:visited {
color:#006699;
padding-right: 13px;
background: url(http://i33.photobucket.com/albums/d100/manas_tripathy/visitedLink.gif) no-repeat 100% 50%;
}
.post-body a:visited:hover {
background: url(http://i33.photobucket.com/albums/d100/manas_tripathy/visitedHoverLink.gif) no-repeat 100% 50%;
padding-right: 13px;
color:#4192e5;
}
color:#006699; Color del enlace visitado.
color:#4192e5; Color del enlace al paso del ratón.
padding-right: 13px; Distancia para dejar espacio al icono (el ancho del icono en pixeles).
[+/-] |
Librerías JavaScript : script.aculo.us, y prototype, |

Unas de las librerias de Javascript más conocidas son Prototipe y Scriptculous, que pueden usarse en Blogger para conseguir algunos efectos muy funcionales en distintas partes del blog.
Lo mejor de estas librerías es que no es necesario colocar la "llamada" a sus funciones cada vez que vayamos a usar algún efecto que las necesite.
Tendremos que cargarlas solo una vez en nuestra plantilla colocando antes de </head> el código API de Google:
<!-- Prototype y Scriptaculous-->
<script src='http://www.google.com/jsapi'/>
<script>
google.load("prototype","1.6.1.0");
google.load("scriptaculous", "1.8.3");
</script>
<!-- Prototype y Scriptaculous-->
Este código hará que se carguen todos los códigos que necesitamos para los distintos efectos, como por ejemplo el Effect.toggle que es el que uso en el Escaparate para el "mostrar/ocultar" en el título de las entradas expandibles y que nos posibilita el mostrar y ocultar elementos de forma animada.
Tendremos que revisar de vez en cuando, si las versiones son actualizadas en Google Apis ya que aunque los efectos que estemos usando funcionaran igualmente, lo mejor es mantenerse actualizado.
En próximas entradas veremos algunos de los efectos que podemos conseguir con el uso de estas librerías, como el "ir arriba" con efecto slide o el mostrar y ocultar para los gadgets de la sidebar.
Publicado por Anónimo a las 4:08 h. Etiquetas: Scriptaculous
[+/-] |
Iconos RSS "de madera" |
[+/-] |
Expandir y contraer cualquier gadget |
Habíamos visto antes como expandir y contraer el gadget de "Etiquetas" usando un sencillo script y poco después también vimos como hacerlo con los gadgets de "Archivos" y "Feed".
Me ha llegado un email de Woody Jagger donde me pregunta como hacer esto mismo con cualquier otro gadget (Perfil, Archivos, Lista de Blogs, etc.), así que vamos a ver como aplicar el efecto de "expandir y contraer" a cualquier otro gadget de los que incluimos normalmente en la sidebar.
Una vez que incluimos uno de estos gadget, en la parte de "Edición HTML" de nuestro panel y expandiendo las plantillas de artilugios, podemos ver que la estructura de cualquiera de los gadgets añadidos es muy similar, en algunos casos idéntica o parecida a esta:
<b:widget id='Text1' locked='false' title='Bienvenidos' type='Text'>Para aplicar este script en cualquiera de estos gadget, solo tendremos que fijarnos bien en que parte hemos de añadir las piezas de código que componen el script y que, en todos los casos, es el mismo código (el resaltado en negrita):
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
<b:widget id='Text1' locked='false' title='Bienvenidos' type='Text'>
<b:includable id='main'>
<script type='text/javascript'>
//<![CDATA[
if(typeof(rnd) == 'undefined') var rnd = '';
rnd = Math.floor(Math.random()*1000);
rnd = 'id-' + rnd;
document.write('<a href="#" onclick="tmp = document.getElementById("' + rnd + '"); tmp.style.display = (tmp.style.display == "none") ? "block" : "none"; return false;" style="float:left;margin-right:5px;">');
//]]>
</script>[+/-]
<script type='text/javascript'>
//<![CDATA[
document.write('<\/a>');
//]]>
</script>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<script type='text/javascript'>
//<![CDATA[
document.write('<div id="' + rnd + '" style="display:none;">');
//]]>
</script>
<data:content/>
</div>
<script type='text/javascript'>
//<![CDATA[
document.write('<\/div>');
//]]>
</script>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
Si queremos sustituir el símbolo de expandir y contraer [+/-] por una imagen, colocamos directamente en su lugar el código para mostrar la imagen:
<img src="url_de_la_imagen"/>
Ver ejemplo funcionando
[+/-] |
Últimos comentarios personalizados con icono |
Este script mostrará los últimos comentarios del blog en la sidebar, tal como lo venían haciendo los que he explicado anteriormente en el Escaparate con la diferencia de que, delante de cada comentario, se mostrará una imagen o icono que hayamos escogido previamente.
El script hará que se muestre un icono personalizado para el autor o autores del blog, otro para los demás comentaristas (los que comentan logueados) y uno más para los comentaristas anónimos.
El script puede aplicarse directamente en el mismo gadget, así que no vamos a necesitar de ningún alojamiento externo, ni vamos a depender de ningún servicio externo que nos deje "colgados" sin previo aviso.
[1] Elegimos las imágenes que vamos a usar que, como siempre os recomiendo en casos parecidos, lo mejor es que sean de las mismas medidas y estilo.
Las subimos a un alojamiento adecuado o al mismo Blogger, para obtener la url de cada una de ellas ya que tendremos que incluirlas en el código.
[2] En la parte de Diseño de nuestro panel, añadimos un nuevo gadget HTML y colocamos dentro este código:
<script type="text/javascript">
function showrecentcomments(json) {
for (var i = 0; i < numcomments; i++) {
var entry = json.feed.entry[i];
var alturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
var photoslink=new Array()
photoslink[0]='<img src="http://1.bp.blogspot.com/_8PJ-pgoBhWQ/SeJp1pMWkLI/AAAAAAAAGmo/ggSsVIrdtms/s320/otros.png"/>';
rosa='<img src="http://2.bp.blogspot.com/_8PJ-pgoBhWQ/SeJpxgrXlGI/AAAAAAAAGmg/7KS4S9cQiro/s320/yo.png"/>';
anonymous='<img src="http://3.bp.blogspot.com/_8PJ-pgoBhWQ/SeJp4vL4RKI/AAAAAAAAGmw/x20-2kKSkEU/s320/anonymous.png"/>';
alturl = alturl.replace("#", "#comment-");
var postlink = alturl.split("#");
postlink = postlink[0];
var linktext = postlink.split("/");
linktext = linktext[5];
linktext = linktext.split(".html");
linktext = linktext[0];
var posttitle = linktext.replace(/-/g," ");
posttitle = posttitle.link(postlink);
var commentdate = entry.published.$t;
var cdyear = commentdate.substring(0,4);
var cdmonth = commentdate.substring(5,7);
var cdday = commentdate.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";
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, "");
if (!standardstyling) document.write('<div class="bbrecpost">');
if (standardstyling) document.write('<br/>');
if (showcommentdate == true) document.write('El ' + cdday + ' ' + monthnames[parseInt(cdmonth,10)] + ' ');
if( entry.author[0].name.$t == 'Rosa'){ document.write(rosa)}
else{
if( entry.author[0].name.$t == 'Anonymous'){ document.write(anonymous)}
else{document.write(photoslink)}
}
document.write('<a href="' + alturl + '">' + entry.author[0].name.$t + ', dijo' +'</a> ');
if (showposttitle == true) document.write(' en ' + posttitle);
if (!standardstyling) document.write('</div><div class="bbrecpostsum">');
if (standardstyling) document.write('<div class="txtmsg"><br/></div>');
if (comment.length < numchars) {
if (standardstyling) document.write('<i>');
document.write(comment);
if (standardstyling) document.write('</i>');}
else
{
if (standardstyling) document.write('<i>');
comment = comment.substring(0, numchars);
var quoteEnd = comment.lastIndexOf(" ");
comment = comment.substring(0, quoteEnd);
document.write(comment + '...<a href="' + alturl + '">(leer mas)</a>');
if (standardstyling) document.write('</i>');}
if (!standardstyling) document.write('</div>');
if (standardstyling) document.write('<br/>');
}
if (!standardstyling) document.write('<div class="bbwidgetfooter">');
if (standardstyling) document.write('<br/>');
if (!standardstyling) document.write('</div>');}
</script>
<script type="text/javascript">
var numcomments = 8;
var showcommentdate = true;
var showposttitle = true;
var numchars = 50;
var standardstyling = true;
</script>
<script src="http://elescaparatederosa.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>
[3] En el CSS de nuestra plantilla, antes de ]]></b:skin>, colocamos este código:
/* ultimas opiniones */
.txtmsg {margin: -20px 0 0 0;}
[4] Guardamos los cambios. El resultado será algo como lo que veis en la imagen.

Como podéis comprobar el script muestra una serie de datos en cada comentario: la fecha, el icono respectivo, el nombre del autor, el título de la entrada, un resumen del comentario y, por último, un "leer más".
Todos esos datos podemos controlar si mostrarlo o no, en esta parte del script:
var numcomments = 8 Número de comentarios que mostraremos.
var showcommentdate = true; La fecha. Para ocultarla ponemos false.
var showposttitle = true; El título del post. false para ocultarlo.
var numchars = 50; Número de caracteres que muestra el resumen del comentario
var standardstyling = true; Estilo del resumen, true o false.
Notas:
En color naranja he destacado la url del icono que acompaña a todos los comentaristas, en rojo la url del icono de autor y en verde la de los comentaristas anónimos.
He dejado incluidas la url de las imágenes que uso yo en el código por si queréis usarlas y también para que podáis probar el gadget con ellas antes de incluir las vuestras.
[5] Como podéis ver estoy usando el script en el Escaparate con algunas modificaciones, os explico los cambios que tenéis que hacer en el código si queréis que el gadget se vea como aquí:
- Localizáis en el código ,dijo (con la coma incluida) y lo sustituis por dos puntos :
- Ponéis false en estas dos líneas del script:
var showcommentdate = false; y var showposttitle = false; - Por último, colocáis estas líneas de código en el CSS de la plantilla (antes de ]]></b:skin>):
/* ultimos comentarios */
.txtmsg {
margin: -20px 0 0 0;
border-bottom: 1px dashed #88B3C3;
}
[6] Por último estoy segura que algunos vais a preguntar por la manera de incluir en el gadget a más de un autor (en el caso de blogs compartidos), así que os explico como hacerlo.
Supongamos que el nick del otro autor que vamos a incluir es "Abel".
Localizamos en el script la línea que corresponde a la imagen de "Anónimo":
anonymous='<img src="http://3.bp.blogspot.com/_8PJ-pgoBhWQ/SeJp4vL4RKI/AAAAAAAAGmw/x20-2kKSkEU/s320/anonymous.png"/>';
Y justo debajo pegamos una nueva para el otro autor (en realidad es una copia de las anteriores a la que cambiamos el nick):
abel='<img src="http://3.bp.blogspot.com/_8PJ-pgoBhWQ/SeJp4vL4RKI/AAAAAAAAGmw/x20-2kKSkEU/s320/icons.png"/>';
Una vez añadida y modificada esa línea, vamos a localizar en el código algo más abajo estas líneas:
if( entry.author[0].name.$t == 'Rosa'){ document.write(rosa)}
else{
if( entry.author[0].name.$t == 'Anonymous'){ document.write(anonymous)}
else{document.write(photoslink)}
}
Justo debajo de la del autor del blog, añadimos la del nuevo autor, que al igual que antes es una copia de esta misma a la que cambiamos el nick y añadimos también una nueva llave de cierre:
if( entry.author[0].name.$t == 'Rosa'){ document.write(rosa)}
else{
if( entry.author[0].name.$t == 'Abel'){ document.write(abel)}
else{
if( entry.author[0].name.$t == 'Anonymous'){ document.write(anonymous)}
else{document.write(photoslink)}
}
}
Publicado por Anónimo a las 0:58 h. Etiquetas: Comentarios, Gadget
[+/-] |
Numeración de comentarios |
Siguiendo estos pasos, vuestros comentarios se verán numerados como en El Escaparate.
Nos situamos en la pestaña "Edición HTML" de nuestro panel de Blogger, y marcamos la opción de expandir las plantillas de artilugios.
[1] Localizamos esta línea al comienzo del bloque de código perteneciente a los comentarios:
<dl id='comments-block'>
Una vez localizada esa línea como referencia, hacia abajo en la plantilla encontramos el resto del código tal como lo vemos aquí, donde hemos de añadir el código necesario y que está resaltado en color naranja:
<dl id='comments-block'>Nota:
<script type='text/javascript'>var contadorComentarios=0;</script>
<b:loop values='data:post.comments' var='comment'>
<div class='' expr:id='data:comment.id'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'>
<data:comment.author/>
</a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
<span class='comentacontador'>
<a expr:href='"#comment-" + data:comment.id' title='Vinculo al comentario'>
<script type='text/javascript'>
contadorComentarios=contadorComentarios+1;
document.write(contadorComentarios)
</script>
</a>
</span>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</div>
</b:loop>
</dl>
Tendremos en cuenta que si hemos añadido el "truco" de cambiar el "dijo" que sigue al autor del comentario la etiqueta <data:commentPostedByMsg/> no aparecerá y en su lugar estará el texto que hayamos colocado en lugar del "dijo".
[2] Iremos ahora hacia arriba, a la parte del CSS de la plantilla y antes de ]]></b:skin> colocaremos este código:
.comentacontador {
float: right;
display: block;
width: 50px;
margin-top: -30px; /* la posición de los números */
text-align: right; /* el número a la derecha */
/* el tipo y tamaño de la fuente */
font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
font-size: 36px;
font-weight: normal;
}
Idea original de: Vagabundia
Publicado por Anónimo a las 3:09 h. Etiquetas: Comentarios
[+/-] |
LinkWithin. Entradas relacionadas con imagen. |
En LinkWithin podemos añadir un gadget de Entradas relacionadas con miniatura de imagen.
[1] Accedemos a la página de LinkWithin y a la derecha vemos el formulario para obtener el gadget. Tenemos que introducir nuestro email, la url del blog donde vamos a colocar el gadget y la plataforma, que en nuestro caso será Blogger:
[2] Si nuestro blog tiene fondo oscuro en las entradas, marcamos la opción que dice "My blog has light text on a dark background" para que el gadget adapte el color de su texto al del fondo.
Pinchamos en "Get Widget".
[3] Pasamos entonces a otra página donde se nos dan las instrucciones para integrar el gadget, que se hace de la misma manera que cualquier otro que se integra directamente al blog.
Pinchamos en "Install Widget".
[4] Una vez instalado el Gadget este se verá en la sidebar pero solo en la parte de diseño, dentro de ese gadget está el código que le hace funcionar, así que para eliminar las entradas relacionadas cuando ya no nos interese usarlas, lo unico que tenemos que hacer es eliminar ese gadget.
Las entradas relacionadas se mostrarán de forma automática al final de cada entrada, justo sobre el post-footer (pie del post) .
Algunas de las cosas que he notado en mis pruebas:
Si en nuestro blog no usamos imágenes en las entradas, en el gadget se verán solo los títulos de los posts.
El gadget se carga una vez ha cargado el resto del blog.
Algunas veces el gadget tarda algo en cargar e incluso no llega a hacerlo; cuando esto pasa en el lugar que el gadget con el código ocupa en la sidebar, se muestra un enlace a LinkWithis.
Para evitar que salga este enlace, en el "editar" del gadget eliminamos esta parte del código:
<a href="http://www.linkwithin.com/"><img alt="Related Posts Widget for Blogs by LinkWithin" style="border: 0" src="http://www.linkwithin.com/pixel.png"/></a>
[+/-] |
Administrar nuestros seguidores |
Aunque supongo que la mayoría sabrá como administrar los agregados del gadget de seguidores, son muchos los que me han preguntado como acceder, sobre todo para poder eliminar algún seguidor no deseado.
Accedemos a nuestro panel de Blogger y vemos, al lado del nombre de nuestro blog, el muñequito verde que acompaña al número de seguidores. Pinchamos ahí.
Iremos entonces a la página donde veremos un listado de nuestros seguidores con sus nombres y avatares.
Pinchando en cada uno de ellos veremos sus datos concretos y podremos bloquear al que nos interese.
Tendremos acceso a los seguidores bloqueados por si en cualquier momento queremos volver a admitirlos:
[+/-] |
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">
[+/-] |
Firma en los comentarios del autor |
En una entrada anterior vimos como destacar los comentarios del autor del blog, dándoles un diseño distinto a los demás comentarios.
Usando este mismo sistema, voy a explicar como añadir una imagen como firma en los comentarios del autor del blog, tal como lo he hecho yo.
[1] En primer lugar incluimos las modificaciones en la plantilla que se explican en esa entrada si no lo hemos hecho anteriormente.
[2] Una vez tengamos incluidos todos los cambios para distinguir nuestros comentarios del resto, añadimos la llamada a la imagen en el mismo código que habíamos colocado:
<b:if cond='data:comment.author == data:post.author'>
<dd class='blog-author-comment'>
<p><data:comment.body/><img class='firma' src='url_de_la_imagen_firma'/></p>
</dd>
<b:else/>
Como podéis ver, le hemos dado una clase (class) a la imagen (en el ejemplo "firma") aunque podéis poner cualquier nombre.
[3] Colocamos ahora en el CSS de la plantilla (antes de ]]></b:skin>) el código necesario para controlar la posición de la firma dentro del cuerpo del comentario:
.firma {
display:block;
width: 45px;
height: 28px;
}
En width: pondremos el ancho que tiene nuestra imagen y en height: el alto.
El resultado será entonces algo así:
Para controlar la posición de la firma, añadimos una nueva instrucción en el mismo código anterior:
.firma {
display:block;
width: 45px;
height: 28px;
padding-left: 90%;
}
Tendremos que variar el porcentaje (90% en el ejemplo) según la posición que queramos conseguir para la imagen.
En el blog de BanakaBanaka podéis ver otra forma muy interesante de incluir la firma del autor del blog en los comentarios.
Publicado por Anónimo a las 0:24 h. Etiquetas: Comentarios
[+/-] |
Iconos Blogger |
[+/-] |
Escoger que etiquetas mostrar |
Hay una forma de ocultar las etiquetas que no queremos mostrar en el gadget de "Etiquetas".
Como Blogger no limita la cantidad de gadget de "Etiquetas" que podemos usar en el blog, esto sería útil por ejemplo para un blog con más de una temática, ya que podría usar un gadget de "Etiquetas" distinto para cada tema.

Si vamos en nuestro panel a la pestaña de "Diseño", pinchamos en "Añadir gadget" y escogemos un gadget de "Etiquetas" para añadir en nuestra sidebar, el resultado sería una lista con todas las etiquetas que estamos usando en las entradas del blog.
Para añadir un gadget de "Etiquetas" y filtrar en el las que no queremos mostrar, tendremos que hacerlo directamente desde el HTML de la plantilla.
[1] Vamos a la pestaña "Edición HTML" de nuestro panel y sin expandir la plantilla de artilugios, localizamos la línea que marca el comienzo de la sidebar:
<b:section class='sidebar' id='sidebar' preferred='yes'>
[2] Justo debajo de esa línea pegamos este código para mostrar el gadget de "Etiquetas":
<b:widget id='Label5' locked='false' title='Etiquetas2' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<!-- Muestra las etiquetas excepto las de esta lista -->
<b:if cond='data:label.name != "Links"'>
<b:if cond='data:label.name != "Widget"'>
<b:if cond='data:label.name != "Comentarios"'>
<b:if cond='data:label.name !="Blogger"'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>
</li>
<!-- Tags de cierre -->
</b:if></b:if></b:if></b:if>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
Cada línea como esta (señaladas en negrita): <b:if cond='data:label.name != "Links"'> corresponde a una etiqueta que no va a mostrarse en el gadget.
Podemos añadir las líneas que necesitemos según las etiquetas que queremos ocultar, teniendo en cuenta que por cada nueva línea añadida, colocaremos una etiqueta de cierre (</b:if>) a continuación de las que veis en "Tags de cierre".
Si solo vamos a filtrar un par de etiquetas por ejemplo, borramos las líneas sobrantes y los </b:if> de cierre correspondientes.
El nombre de las etiquetas que queramos ocultar, ha de ir escrito en el código exactamente igual que como las usamos en las entradas.
En el ejemplo la id del gadget es id='Label5', tendremos que cambiarla por cada gadget de "Etiquetas" que coloquemos ya que no puede haber dos elementos con la misma id en la plantilla y Blogger nos marcaría error al guardar.