El Escaparate (Ayuda para tu blog)

Twitter icons

2009-07-16T19:30:00.000+02:00

He visto en Webdesigner Depot una colección de 50 iconos Twitter, algunos muy originales.

Los iconos son totalmente gratuitos para uso personal y comercial.

En el artículo original de Depot, encontraréis una completa vista previa de todos los iconos incluidos en esta serie, así como el enlace para descargar el pack.

Estos son los que me han llamado más la atención.

Articulo original / descargar pack

Nuevos gadgets en Blogger in Draft

2009-07-11T18:42:00.001+02:00

A través de un "update" del equipo de Blogger en Twitter me entero de que hay cuatro nuevos gadgets disponibles para usar desde Blogger in Draft.

Como podéis ver en la imagen, son cuatro gadget en total, el primero mostraría las miniaturas recientes de nuestras imágenes subidas a Picassa, pudiendo configurar la altura del gadgets y el número de imagenes.
El segundo muestra los comentarios recientes del blog con un resumen y pudiendo además, mostrar más de cinco comentarios.
El tercero muestra las entradas más recientes con la posibilidad de configurar algunos valores antes de instalarlo (altura del gadget, número de entradas a mostrar, escoger o no mostrar un resumen y la cantidad de caracteres a mostrar en dicho resumen).
Por último el cuarto, mostraría los updates de Twitter en el blog con la posibilidad de escoger el número de updates a mostrar, la altura del gadget, etc.

Los cuatro son creación de Amanda de Blogger Buster y como suele hacer el equipo de Blogger, estarán disponibles para prueba en Blogger in Draft, hasta que sean añadidos en Blogger "normal".

Para añadirlos al blog, accedemos a nuestro panel a través de Blogger in Draft y una vez allí, seguimos los pasos como cuando añadimos cualquier gadget, es decir, pinchamos en "añadir gadget" en la parte de Diseño de nuestro panel y escogemos la opción "Destacados".

"Leer más" con miniatura de imagen ( script en la plantilla)

2009-07-06T20:14:00.001+02:00

Son muchas las personas que me consultan sobre el tema y que aún tienen problemas para saber como alojar los script en algún servidor externo a Blogger.
Como algunos ya sabéis, muchos de los scripts que usamos en el blog, pueden alojarse sin problemas en la misma plantilla.

En el caso de la entrada que publiqué hace algún tiempo "Leer más" con miniatura de imagen, es bastante aconsejable hacerlo así, ya que además de ahorrarnos problemas de dependencia con algún servidor externo, el script no ocupa demasiado tamaño.

Nota:

Si vais a añadir este efecto por primera vez, es aconsejable que leáis antes la entrada anterior al respecto, más que nada porque encontraréis información de como funciona exactamente, así como un ejemplo en funcionamiento y las modificaciones que pueden hacerse.

Para los que ya lo estáis usando, fijaros que la única diferencia está en el código del paso [3] y que no deberéis modificar nada más.

[1] Nos situamos en la pestaña de "Edición HTML" de nuestro panel y marcamos la casilla de "Expandir las plantillas de artilugios" para localizar este código: <data:post.body/>

[2] Una vez lo hemos localizado, lo eliminamos y en su lugar colocamos este otro:

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'> Leer más...</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

[3] Subimos ahora hacia arriba en el código de la plantilla hasta localizar la etiqueta: </head>

Justo antes de esa etiqueta (</head>) colocamos este código:

<script type='text/javascript'>
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[

function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
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);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}

//]]>
</script>

Transforma tus imagenes online a "polaroid"

2009-07-03T14:37:00.000+02:00

Este servicio online, además de rápido es gratuito.

Solo tenemos que escoger la fotografía que vamos a transformar en polaroid desde nuestro PC en "Select A Picture", añadir una pequeña descripción o texto en "Add A Brief Description" (que se mostrará al pie de la imagen) e introducir el grado de rotación (es opcional) en "Rotate?" y por último, pinchar en "Umpload Picture".

Si usamos el link que nos proporcionan para acceder a nuestra polaroid, tendremos en cuenta que solo es válido durante 24 horas, después la instantánea desaparece, así que mejor la guardamos en el PC para conservarla.

Y aunque os parezca increíble, esta imagen que veis como ejemplo del resultado, es una fotografía mía en una fiesta de disfraces hace unos años.

Enlace: Instantizer

Tachado con imagen

2009-06-30T23:52:00.000+02:00

Es un efecto muy lindo que publicó hace tiempo Blog Bazar, en realidad fue una de sus primeras y últimas entradas, ya que el blog lleva tiempo sin ser actualizado.

Habíamos visto en una entrada anterior, como conseguir "tachar" un texto en nuestro blog usando la etiqueta <strike>

La idea que Blog Bazar nos presenta, es esta misma pero usando una imagen para lograr un efecto aún más original.

[1] Aplicamos este código colocandolo en nuestra plantilla antes de </head>

<style type='text/css'>
strike {text-decoration:none; background:transparent url(url_de_la_imagen) repeat-x left 55%}
</style>

[2] Para usarlo en el blog, sencillamente tenemos que incluir el texto que queremos mostrar tachado, entre las etiquetas <strike> y </strike>
Si vamos a usarlo en las entradas, lo haremos desde la pestaña de Edición de HTML del editor.

Nota: Aunque el texto que vamos a tachar sea una frase e incluso más largo, no habrá problema ya que la imagen se repetirá hasta completar el ancho del texto incluido entre esas etiquetas (strike).

Aquí tenéis las imágenes que Blog Bazar comparte con todos nosotros:

¡Invítame a un café!

2009-06-25T02:12:00.002+02:00

Son varias las personas que me han preguntado últimamente sobre la forma de añadir al final de las entradas, la posibilidad de solicitar una donación vía Pay-Pal.

He visto en algunos blog que colocan la frase "si te gustó esta entrada, invítame a un café" al final de cada entrada, la mayoría de las veces acompañada por un icono.

[1] En nuestro panel desde Edición HTML y marcando la opción de "Expandir las plantillas de artilugios" localizamos esta línea de código:

<p class='post-footer-line post-footer-line-3'/>

Dependiendo de la plantilla, podría aparecer de esta otra manera:

<div class='post-footer-line post-footer-line-3'/>

[2] Justo después de esa línea, añadimos este código:

<b:if cond='data:blog.pageType == "item"'>
<br/><img src="http://3.bp.blogspot.com/_8PJ-pgoBhWQ/SicQ0oE7NwI/AAAAAAAAG4k/qZQ3hVqZLwg/s320/Coffee+Time-32.png"/><a href="https://www.paypal.com/cgi-bin/webscr?cmd=_xclick&business=TU_EMAIL_AQUI&amount=&return=Gracias por el café!!&item_name=Donate" rel="alternate" title="Café!!" type="application/rss+xml">Si te gustó esta entrada, invítame a un café!</a><br/>
</b:if>

[3] Sustituimos donde dice "TU_EMAIL_AQUI" por la dirección de correo con la que nos hemos registrado en Pay-Pal.

El widget no será visible en la página principal, para que sea visible en todas las páginas, eliminamos la primera línea del código (<b:if cond='data:blog.pageType == "item"'>) y el cierre del final (</b:if>)

La url para el icono del ejemplo ya está incluida en el código, para usar un icono personalizado, cambiamos esa url por la del nuestro.

Os dejo alguna "tacita" más que he encontrado:

Colocar un botón para Tweetmeme

2009-06-22T12:56:00.002+02:00

Me solicita Kenneth a través de un correo que explique como incluir un botón para Tweetmeme en el blog.

Tweetmeme es una especie de agregador de noticias de Twitter.
Este servicio rastrea y optiene la información de los tweets que comparten los usuarios de Twitter entre si (RT), en su web podemos ver una portada principal donde aparecen los tweets más destacados.

En Blogger podemos añadir un botón que permita a nuestros usuarios enviar la información a Tweetmeme de las entradas de nuestro blog, cuantos más usuarios envien la entrada, más posibilidad tendrá esta de posicionarse en Tweetmeme.

Vamos a ver como colocar el botón al lado derecho del título de nuestras entradas.

[1] Desde "Edición HTML" en nuestro panel y marcando la opción de "Expandir las plantillas de artilugios" localizamos el código que está en negrita y añadimos el que he resaltado en color rojo:

<b:if cond='data:post.title'>
<div id="tweetmeme" style="float: right;">
<script type="text/javascript">
tweetmeme_url = '<data:post.url/>';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</div>
<h3 class='post-title entry-title'>

[2] Usamos vista previa y tendremos que ver nuestro botón a la derecha del título de la entrada:

[3] Guardamos cambios.

Si en lugar de ese botón, queremos usar el otro modelo disponible de botón (más pequeño), el código (que colocaríamos en el mismo lugar) sería este:

<div id="tweetmeme" style="float: right;">
<script type="text/javascript">
tweetmeme_url = '<data:post.url/>';tweetmeme_style = 'compact';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</div>

Podemos colocarlo también al final de las entradas, justo antes del comienzo de los comentarios, de esta manera solo será visible cuando entramos a una entrada concreta.
Para hacer esto tendríamos que incluir el código así:

<b:includable id='comments' var='post'>
<script type="text/javascript">
tweetmeme_url = '<data:post.url/>';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
<div class='comments' id='comments'>

Firma del último mensaje en Twitter

2009-06-20T04:09:00.004+02:00

Usando el servicio que nos ofrece TwiSig podemos crear con facilidad un banner que muestra nuestro último mensaje en Twitter.

[1] Para conseguir nuestro banner solo tenemos que ir a TwiSig, teclear nuestro nombre de usuario en Twitter y pinchar en "Get Signature".

[2] Se mostrarán entonces los cuatro modelos de firma (por colores) que tenemos para escoger, y debajo de cada una, el código que hemos de copiar (HTML Code).

[3] Una vez obtenido el código de nuestra firma, podemos incluirlo en un gadget HTML en el blog.
Tendremos en cuenta que no podemos controlar su tamaño, así que si la sidebar no es lo suficientemente ancha la firma se verá cortada, pero podemos incluirla en el footer o en cualquier zona con el ancho suficiente.

[4] Lo mejor de este gadget, es que puede incluirse como firma en nuestro correo.
En mi caso, lo he probado en Hotmail y en Gmail, aunque supongo que servirá para cualquiera que ofrezca la posibilidad de añadir firma usando código html.

Aquí tenéis un par de direcciones donde explican paso a paso como incluir una firma en estos dos servicios de correo:

Añadir una firma en Hotmail

Añadir una firma en Gmail

Formulario de contacto

2009-06-18T13:59:00.001+02:00

Estos últimos días me han estado preguntando sobre el sistema que estoy utilizando en la sección de "Contacto" del blog.

Hasta hace poco tiempo, para incluir un formulario de contacto en Blogger, teníamos que depender de algún servicio externo que nos facilitara el formulario y, a través del mismo, la redirección de nuestros correos.

Ahora ya es posible usar en Blogger un formulario de contacto sin depender de servicios externos, tal como nos explican paso a paso en Zona Cerebral.

En esta entrada, voy a tratar de explicar el sistema que yo estoy usando y que depende de 123 Contac form, y no porque crea que es mejor, más bien porque ya me he acomodado a este servicio y como he comprobado que además trabaja sin problemas, pues no he pensado en cambiarlo.

[1] Accedemos a la web que va a prestarnos el servicio en 123 Contac form y pinchamos en "Sign Up FREE" para registrarnos.

El registro es rápido y sencillo. En el formulario no es necesario rellenar más que los campos que aparecen en negrita. Una vez esté completado, pinchamos en "Create account" y de forma instantánea podremos acceder con nuestros datos a nuestra cuenta.

[2] Accedemos entonces a nuestra cuenta y en el menú de arriba pinchamos en "Create new form".

[3] Una vez completados los campos que tendrá nuestro formulario, pinchamos en "Save form" y en la nueva ventana aparecerá una vista previa del formulario y la posibilidad de modificar algunas cosas.
En mi caso lo dejé todo tal como estaba, solamente cambié los textos de los campos para que se mostraran en español:

[4] En la siguiente pantalla es donde escogemos el aspecto del formulario entre varios temas que allí nos proponen, en mi caso escogí "none" (ninguno).
El siguiente paso sería copiar el código html que nos proporcionan para pegarlo en una entrada o donde vayamos a mostrar el formulario, en nuestro caso copiaremos el código de la opción 2.

Notas:

Una vez instalado el formulario, cada email que nos llegue estará precedido en su "asunto" de las palabras [Contac form]

Si lo colocáis en una entrada y queréis añadirle una imagen de fondo como he hecho yo, usáis este código:

<div style="background:url(url_de_la_imagen);">
Aquí colocamos el código del formulario
</div>

Menú de pestañas

2009-06-14T17:03:00.002+02:00

Hace tiempo publiqué como instalar un menú de pestañas en Blogger usando las etiquetas.
En ese menú, cada vez que se etiqueta una entrada, una nueva pestaña aparece de forma automática en el menú, esto hace que el aspecto del menú deje bastante que desear cuando en el blog usamos demasiadas etiquetas.

Basándonos en la misma idea y usando casi el mismo código, vamos a instalar un menú con el mismo aspecto que el de pestañas con etiquetas, pero en el que incluiremos los enlaces que creamos oportuno.

Antes de empezar, podéis ver un ejemplo funcionando en este blogs de pruebas instalado sobre las entradas.

[1] Una vez en nuestro panel de Blogger vamos a Edición HTML y colocamos el CSS necesario para el menú.

El lugar adecuado para colocar cualquier código CSS es siempre entre las etiquetas <b:skin><![CDATA[/* y ]]>%lt;/b:skin> de nuestra plantilla.

En este caso estaría bien ponerlo después de la sección del header, más o menos antes de /* Outer-Wrapper-------- */ por ejemplo:

/* Menu pestañas*/

#tabsmenu {
float:left;
width:100%;
font-size:13px;
border-bottom:1px solid #2763A5;
line-height:normal;
}
#tabsmenu ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsmenu li {
display:inline;
margin:0;
padding:0;
}
#tabsmenu a {
float:left;
background:url("IMAGEN IZQUIERDA (LEFT)") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsmenu a span {
float:left;
display:block;
background:url("IMAGEN DERECHA (RIGHT)") no-repeat right top;
padding:5px 14px 4px 4px;
color:#24618E;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsmenu a span {float:none;}
/* End IE5-Mac hack */
#tabsmenu a:hover {
background-position:0% -42px;
}
#tabsmenu a:hover span {
background-position:100% -42px;
}

[2] Como veis en el código, se necesitan dos imágenes para que formen las pestañas, una que irá en "IMAGEN IZQUIERDA (LEFT)" y otra en "IMAGEN DERECHA (RIGHT".

Podéis descargar las imagenes en varios colores en este archivo en formato .zip y una vez escogidas las que vais a usar, las subís a un alojamiento de imágenes o al mismo Blogger para obtener su url.
No os será dificil reconocer cual es cada imagen ya que se llaman tableft y tabright respectivamente y terminan con una letra que identifica cada pareja: tableftB, tabrightB

Guardamos los cambios.

[3] Vamos ahora a la parte de Diseño de nuestro panel, pinchamos en añadir un nuevo gadget HTML y pegamos dentro este código:

<div id="tabsmenu">
<ul>
<li><a href="#"><span>INICIO</span>
</a></li>
<li><a href="mailto:direccion email"><span>CONTACTO</span></a></li>
<li><a href="http://www.blogger.com/"><span>BLOGGER</span></a></li>
<li><a href="http://www.google.es"><span>GOOGLE</span></a></li>
<li><a href="http://elescaparatederosa.blogspot.com/"><span>EL ESCAPARATE</span></a></li>
</ul>
</div>

Es aquí donde editaremos los enlaces del menú y la información que se mostrará en las pestañas.
Después arrastramos el gadget a debajo del header o a la parte del croscoll por ejemplo.
Si necesitamos un espacio extra en esa zona podemos consultar como añadir elementos adicionales en Diseño o ver también como aprovechar la zona del croscoll.

Iconos Manto

2009-06-10T23:40:00.000+02:00

Los he visto en noobr y me han encantado.

Pack con 20 iconos de caritas muy originales en formato .png y con unas dimensiones de 128 x 128.

Efecto página doblada con JQuery

2009-06-09T00:11:00.003+02:00

Antes de nada tenéis que saber que para conseguir este efecto se usa la librería JQuery.
Si estamos usando en el blog Protype y Scriptaculous para cualquier efecto no podemos usar JQuery al mismo tiempo en el blog.

Este efecto lo había visto publicado en CSS Reflex y me había llamado la atención, pero no ha sido hasta hace un par de días que ordago13 me indicaba de nuevo la posibilidad de publicar este mismo truco.

Se trata de usar el efecto de página doblada en la esquina superior derecha de nuestro blog, para mostrar la posibilidad de suscribirse al blog (aunque puede usarse para mostrar cualquier otra cosa).

Podéis ver el ejemplo de CSS Reflex en funcionamiento en este blog, aunque yo he modificado la imagen para que el texto se muestre en español.
Ya sabéis algunos que lo de trabajar con imágenes no se me da nada bien, así que cada uno puede hacer la suya propia, yo he hecho lo que he podido...

[1] Copiamos este código y en Edición HTML de nuestro panel lo pegamos justo antes de </head>

[2] Pegamos ahora este otro código justo después de <body>:

<div id='pageflip'>
<a href='URL_DEL_FEED'><img alt='feed' src='http://www.wallheaven.com/page_flip.png'/></a>
<div class='msg_block'/>
</div>

Cambiamos donde dice "URL_DEL_FEED" por la dirección de nuestro feed.

Para cambiar la imagen que sale debajo por la vuestra, lo hacemos en el primer código (el que colocamos antes de </head>).

Para cambiar la imagen que "se dobla" (la parte de color negro), lo hacemos en este último código (el que colocamos después de <body>).

Usar dos opciones para comentar

2009-06-07T04:21:00.004+02:00

Si estas usando el nuevo formulario incrustado de Blogger para recibir los comentarios en tu blog, este sistema te dará la posibilidad de ofrecer a tus visitas el comentar con el formulario antiguo de forma opcional.

Ambas opciones serán visibles debajo de cada entrada y nuestras visitas tendrán la posibilidad de escoger la que quieran.

[1] Localizamos el código que muestra el formulario incrustado:

<div class='comment-form'>
<a name='comment-form'/>
<h3><data:postCommentMsg/></h3>
<p><data:blogCommentMessage/></p>
<iframe allowtransparency='true' expr:src='data:post.commentFormIframeSrc' frameborder='0' height='275' id='comment-editor' scrolling='auto' width='100%'/>
</div>

[2] Justo debajo de ese código, añadimos este otro para mostrar el enlace "Comentar con el antiguo formulario" y que este se abra en ventana pop-up:

<div class='comment-antiguos'>
<a expr:href='"http://www.blogger.com/comment.g?blogID=XXXXXXXXXX&amp;postID=" + data:post.id + "&isPopup=true"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450"); return false;' rel='nofollow'><b>Comentar con el antiguo formulario</b></a></div>

[3] Si lo que queremos es que el enlace se abra para comentar en página nueva, en lugar del código anterior, colocamos este:

<div class='comment-antiguos'>
<a expr:href='"http://www.blogger.com/comment.g?blogID=XXXXXXXXXX&amp;postID=" + data:post.id + "&isPopup=true"' rel='nofollow'><b>Comentar con el antiguo formulario</b></a></div>

[4] Una vez tengamos el código colocado, tenemos que sustituir las XXXXXXXX que he resaltado en negrita por la ID de nuestro blog.
Si miramos desde donde estamos situados en este momento (Edición HTML) hacia arriba, en la url de nuestro navegador se mostrará una serie de números que son los que hemos de copiar y pegar en lugar de las XXXXXXX (solo los números).

[5] Por último solo nos quedaría añadir un poco de CSS (antes de ]]></b:skin>) para darle estilo al enlace:

#comment-antiguos {
margin:0 auto;
width:410px;
font-weight: bold;
padding-bottom:50px;
font-size:17px;
}

Este último código CSS es exactamente el que estoy usando yo en el blog, cada uno habrá de adaptarlo a sus propias necesidades.

"En construcción"

2009-06-02T01:22:00.001+02:00

Hace tiempo publiqué una entrada sobre como redireccionar el blog a otro donde mostrar una página de "en construcción".

Este sistema no es del todo adecuado y, aunque en Blogger es bastante difícil conseguir según que cosas, siempre hay alguien que encuentra una mejor solución.

En Quite Ramdom hay publicado un sistema para ocultar el blog mientras estamos en construcción que me parece la más acertada hasta el momento.

Esto nos evitará el tener que "privatizar" el blog mientras trabajamos en algún cambio importante, ya que para el administrador el blog estará disponible como siempre, mientras que para las visitas permanecerá oculto (se cargará como siempre, pero solo podrá verlo el administrador).

Para no desconcertar a los usuarios, una vez han accedido al blog podrían ver en lugar de este una imagen que nosotros hayamos colocado con un logo o un texto de "En construcción" por ejemplo.

[1] En nuestro panel nos situamos en Edición HTML y localizamos la etiqueta <body> en el código de nuestra plantilla.

Justo después de esta etiqueta, añadimos esta línea de código:

<span class="item-control blog-admin">

[2] Bajamos ahora por el código de la plantilla, y casi al final del mismo, vemos la etiqueta de cierre </body>

Justo antes de esa etiqueta, colocamos el cierre del código anterior:

</span>

Una vez guardamos esos cambios, el blog estará oculto a los usuarios, para evitar que estos vean una página en blanco cuando accedan al blog, colocamos una imagen o logo de "En construcción" que se vea centrada en la pantalla.

Lo hacemos justo después de <body>, es decir, antes de la primera línea de código que habíamos colocado al comienzo del "truco":

<div style="text-align: center;"><img src="URL_de_la_imagen"/></div>

Visto en: Quite Random

Expandir y contraer gadget con Scriptaculous

2009-05-31T04:40:00.003+02:00

Después de haber visto con anterioridad como expandir y contraer cualquier gadget usando algo de javascript, vamos a ver ahora como hacer eso mismo usando Scriptaculous y Prototype lo que añadirá al gadget un efecto "deslizante" muy elegante.

[1] En primer lugar tenemos que incluir el código necesario para el uso de cualquier efecto con Scriptaculous (como ya vimos en la entrada al respecto, este código solo es necesario incluirlo una vez en la plantilla) así que, si ya lo tenemos incluido nos saltamos este paso:

<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load("prototype","1.6.0.3");
google.load("scriptaculous", "1.8.2");
</script>

[2] Todos los gadget mantienen prácticamente la misma estructura en su código, con lo que no nos será muy difícil incluir el código necesario para conseguir el efecto.
En "Edición HTML" de nuestro panel, marcamos la casilla de "expandir las plantillas de artilugios" y localizamos el gadget que nos interesa por la línea de código que marca su comienzo y en la que podemos ver su título:

<b:widget id='HTML4' locked='false' title='Posts populares' type='HTML'>

[3] Una vez localizado el gadget, añadimos estas líneas de código que veis en negrita tomando como referencia el resto de código del gadget:

<b:widget id='HTML4' locked='false' title='Posts populares' type='HTML'>
<b:includable id='main'>
<a href='#' onclick='Effect.toggle("POPULARES","slide"); return false'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/> ▼</h2></b:if>
</a><div align='center' id='POPULARES' style='display: none;'>
<div class='widget-content'>
<data:content/>
</div>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Notas:

Yo he usado el símbolo ▼, es decir el triangulo ▼ que veis a la derecha de los títulos en los gadget con el efecto añadido.
Podéis sustituir ese código por [+/-] por ejemplo, e incluso por un icono: <img src="url_del_icono"/>

He destacado en color naranja la palabra POPULARES esa palabra es un "identificador único" es decir, solo puede usarse en un gadget concreto, así que será distinto en cada gadget que incluya el código y ha de ser idéntico en los dos lugares del código donde va colocado.

Ejemplo con el código añadido al gadget de etiquetas:

<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'>
<b:includable id='main'>
<a href='#' onclick='Effect.toggle("Etiquetas","slide"); return false'><b:if cond='data:title != ""'>
<h2 class='title'><data:title/>▼</h2></b:if>
</a>
<div align='left' id='Etiquetas' style='display: none;'>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<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 + "?max-results=30"'>
<data:label.name/>
</a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div> </div>
</b:includable>
</b:widget>

Dos pajaritos Twitter

2009-05-29T02:02:00.000+02:00

Pack compuesto por solo dos iconos gratuitos y de libre uso, en una versión muy original del pajarito azul de Twitter que he visto en Janko.

Los iconos se descargan en un archivo .zip (350 KB) y vienen cada uno de ellos en cinco tamaños: 512x512, 256x256, 128x128, 64x64 y 32x32.

Enlace en el nombre del autor de la entrada

2009-05-25T04:32:00.000+02:00

Hace tiempo que he sustituido mi nombre en la firma de las entradas por una imagen y hace unas semanas que a esa imagen le he incluido un enlace a la entrada que llamo "Sobre mi".

Cambiemos o no la firma por una imagen podemos incluirle un enlace que lleve por ejemplo a nuestro perfil de Blogger, de Twitter, de Facebook, etc.

[1] Desde Edición HTML de nuestro panel y con la casilla de expandir las plantillas de artilugios marcada, localizamos estas líneas de código:

<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>

[2] Incluimos la etiqueta <data:post.author/> dentro del enlace:

<a href='http://twitter.com/RosaTorre' target="_blank"><data:post.author/></a>

En el ejemplo he enlazado mi nombre (autor del post) con mi cuenta en Twitter.

[3] Si ya hemos cambiado antes la firma o nombre del autor por una imagen, la etiqueta <data:post.author/> no estará en ese código, ya que en su lugar tendremos añadida la url de la imagen, aunque la forma de incluir el enlace a la firma sería prácticamente la misma:

<a href='http://twitter.com/RosaTorre' target="_blank"><img src="Url_de_la_imagen_de_la_firma"/></a>

Error del blog en Internet Explorer

2009-05-22T23:26:00.001+02:00

Me han estado llegando estos últimos días algunas consultas de personas que me informaban de un error al acceder a su blog o a otros de Blogger con Internet Explorer.

No se si en todas las versiones de este navegador está sucediendo esto, pero en todos los casos que me han llegado, el error se producía con IE8.

He estado mirando en Internet sobre el tema y he visto que en el Foro de Ayuda de Blogger varios usuarios notificaban este problema.

A través del Grupo de Ayuda, he llegado a la página de "Problemas conocidos de Blogger", donde nos informan que el equipo de Blogger ya conoce el problema y están tratando de encontrar una solución:

Some users are seeing an 'Operation Aborted' error message when trying to load their blogs from Internet Explorer. We're looking into this and will update this message when we have a fix.

We apologize for the inconvenience.

Traducción al castellano (usando Google):

Algunos usuarios están viendo un 'Operación abortada "mensaje de error al intentar cargar sus blogs de Internet Explorer. Estamos en ello y actualizar este mensaje cuando tenemos una solución.

Disculpe las molestias.

Botón flotante de RSS

2009-05-22T03:32:00.001+02:00

Un botón que invita a las visitas a suscribirse a nuestro feed.

La diferencia de este botón con los que vemos habitualmente en cualquier blog, es que este aparecerá "flotando" al borde derecho de nuestra pantalla y permanecerá en una posición fija mientras hacemos scroll en la página.

Podéis verlo funcionando en este blog de pruebas.

[1] Vamos a Edición HTML de nuestro panel de Blogger y localizamos casi al final de todo el código de la plantilla la etiqueta </body>
Justo sobre esa etiqueta colocamos el código para el icono:

<a class='feedback' href=' URL_DEL_FEED ' style='display:scroll;position:fixed;bottom:270px;right:0px;'><img src='http://1.bp.blogspot.com/_gcgjC6O3wCs/SgrRWQQjeXI/AAAAAAAAAQs/WPzM1JnSwXI/s320/rss_orange_l.jpg'/></a>

En "URL_DEL_FEED" colocamos la dirección del feed de nuestro blog.

En "bottom" controlamos la altura de la pantalla a la que se verá el botón.

[2] He añadido una clase al botón (feedback) en el código, lo que nos permitirá usando algo de CSS añadirle un efecto de opacidad al botón (opcional):

/* Boton RSS
--------------------------- */
.feedback{ opacity:0.6; filter: alpha(opacity=60);}
.feedback:hover{ opacity:2; filter: alpha(opacity=200);}

En el código está incluida la url de la imagen de color naranja del ejemplo, os dejo el mismo modelo de botón en distintos colores por si queréis usar alguno.

Sorteo de un Grabador Blu-ray

2009-05-20T01:05:00.004+02:00

Pablo administrador de "Dinero desde casa" sortea en su sitio un Grabador Blu-ray externo LaCie d2 8x y servidor multimedia LaCinema Black MAX.

Es compatible con DVD y CD, y su velocidad de escritura puede alcanzar 8x para los BD-R y 48x para los CD-R. Puedes grabar hasta 4 horas de vídeo HD en un disco Blu-Ray de 50 Gb es decir aproximadamente 10 veces más que en un DVD.

El concurso comenzó el día 11 de Mayo de 2009 y finalizará el 1 de Junio a las 00:00.

Puede participar cualquier persona que tenga un sitio web con más de dos meses online.

Para participar en el Sorteo dispones de distintas alternativas: (Una vez lleves a cabo cualquiera de las alternativas se te asignará 1,2 ó 3 números para participar en el Gran Sorteo).

[1] Escribir un Artículo en tu Blog sobre el Concurso (Con un enlace al Sorteo) y un comentario en este artículo dejando un enlace al artículo que has escrito sobre el tema (Dispondrás de 1 número para participar).

[2] Recomendar el Sorteo a algún amigo. No solo deberás recomendarlo sino que tu amigo ademas deberá participar en el Sorteo para que así se contabilice tu participación. (Dispondrás de 1 número para participar).

[3] Enviar este artículo a cualquier sistema de publicación de Anuncios (Tablones de Anuncios, Blogs, Directorios), crear Eventos Tuenti con el Sorteo y cualquier idea que te surja con tal de dar a conocer el Sorteo. Solo se contabilizarán dos envíos por persona. (Dispondrás de 2 números para participar).

Aún queda tiempo para participar y el regalo es más que interesante (está valorado en torno a 300€), además si el ganador del sorteo no fuese residente en España, se le enviará el valor del regalo en metálico.

¡Suerte!

Mini menú

2009-05-18T03:56:00.002+02:00

Me pregunta Surplus21 como colocar un "mini-menú" como el que tengo en el footer del Escaparate, donde he colocado algunos iconos enlazados con diferentes servicios o páginas: Mi perfil en Blogger, en Twitter, Technorati, etc...

No es más que un div al que he añadido algunos estilos y en el que he colocado los distintos iconos con enlace uno detrás de otro.

El código se coloca en un gadget HTML en la sidebar o donde queráis mostrar el mini menú:

<div style="text-align: center; background:#fff; border:2px solid #82B7C4; width: 100%;">

<span class="pushbutton"><a href="http://www.blogger.com/profile/06743611108067453905" target="_blank" title="Sobre mi"><img src="
http://4.bp.blogspot.com/_8PJ-pgoBhWQ/ScYgNwl4KeI/AAAAAAAAGYg/FL3sBqDjVlE/s320/personal.png"/></a></span>

<span class="pushbutton"><a href="mailto:lejaniaimposible@hotmail.com" title="Email"><img src="http://1.bp.blogspot.com/_8PJ-pgoBhWQ/ScYgVjvmKwI/AAAAAAAAGYw/68TckepVJX8/s320/email_edit.png"/></a></span>

<span class="pushbutton"><a href="http://feeds.feedburner.com/blogspot/hnBy" target="_blank" title="Suscribe"><img src="http://3.bp.blogspot.com/_8PJ-pgoBhWQ/SP9USfdc9aI/AAAAAAAAEgk/LKHLLAOgJ68/s320-R/16-rss-square.png"/></a></span>

<span class="pushbutton"><a href="http://twitter.com/RosaTorre" target="_blank" title="Sigueme en Twitter"><img src="http://4.bp.blogspot.com/_8PJ-pgoBhWQ/ScYjtuhV8CI/AAAAAAAAGZA/OGZ2EDm70Uo/s320/twitter.png"/></a></span>

</div>

La primera línea del código es donde se aplican los estilos del div o contenedor:

text-align: center; La alineación del contenido (los iconos) que en este caso es al centro.
background:#fff; El color de fondo.
border:2px solid #82B7C4; El grosor, aspecto y color del borde.
width: 100%; Ocupará todo el ancho de donde esté colocado, a no ser que cambiemos 100 por un valor menor.

La parte de código que corresponde a cada icono, es la que empieza por <span class="pushbutton"> y acaba por </span> esto es una clase que he añadido a cada icono para conseguir el efecto de "botón pulsar".

He dejado mis datos en el código de cada icono para que os sirvan de guía al colocar los vuestros.

Una vez añadido el código en el gadget y hechos los cambios necesarios, colocamos además estas líneas de CSS en nuestra plantilla antes de ]]></b:skin>, esto marcará la separación entre los iconos (2px) y le dará el efecto de pulsado:

.pushbutton{padding: 2px;}
.pushbutton a:hover {position: relative; top: 1px; left: 1px;}

También podemos usar el CSS en el mismo gadget si os resulta más cómodo, solo tenéis que pegar el código sobre el que habéis puesto para el mini menú de esta manera:

<style type="text/css">
.pushbutton{padding: 2px;}
.pushbutton a:hover {position: relative; top: 1px; left: 1px;}
</style>

Patrones (patterns) para el blog

2009-05-15T18:47:00.000+02:00

Ava7Patterns es una web muy agradable donde podrás descargar gratuitamente patterns (patrones de fondo) para tu blog. Dispone de un amplio catálogo, con diseños para todos los gustos, de distintas formas y colores que podremos probar de manera online en la misma página.
Después de escoger un patron que nos guste, pinchando en "preview" vermos instantaneamente como quedaría aplicado en el fondo de la página.

Algunos ejemplos:

En DinPattern encontramos una excelente colección de patterns (patrones de fondo) gratuitos, los hay de todos tipos y colores, algunos de los más originales que he visto. Se pueden utilizar tanto para uso propio como comercial, aunque el autor admite donaciones y tampoco estaría mal pinchar en algún anuncio si vas a usar uno de sus patrones.

Algunos ejemplos:

Adicionar espacios extra en la zona de entradas

2009-05-14T01:19:00.001+02:00

Vamos a ver paso a paso, como incluir una nueva sección sobre y debajo de las entradas dividida en dos columnas. El resultado será algo como esto:

Como siempre habrá quien quiera añadir los nuevos espacios solo en la parte de arriba o solo en la de abajo, vamos a ver como hacerlo por separado:

[1] Una vez en nuestro panel de Blogger vamos a la pestaña de Diseño y si tenemos algún gadget añadido sobre o debajo de la zona de entradas, lo retiramos para evitar problemas a la hora de modificar el código, más tarde podemos volver a colocarlos en su sitio de nuevo.

[2] Guardamos cambios.

[3] Vamos a la pestaña de Edición HTML y localizamos el código que pertenece a la sección de las entradas:

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
</b:section>
</div>

[4] Colocamos el código necesario para la nueva sección de dos columnas en la parte de abajo de las entradas.
Lo haremos en el código anterior de esta manera (el código que hay que añadir está destacado en color verde):

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
</b:section>

<div id='main-footer-contenedor'>
<div id='main2' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='main-footer-column' id='main-col1' preferred='yes' style='float:left;'/>
</div>
<div id='main3' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='main-footer-column' id='main-col2' preferred='yes' style='float:left;'/>
</div>
<div style='clear:both;'/>
</div>
</div>

[5] Guardamos los cambios y comprobamos el resultado en la parte de Diseño del panel.

[6] Si lo que queremos es una nueva sección de dos columnas en la parte superior de las entradas, volvemos a situarnos en el código de la plantilla que pertenece a las entradas ( paso [3] ) y añadimos el código necesario (destacado en colo rojo):

<div id='main-wrapper'>
<div id='main-top-contenedor'>

<div id='main-top1' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='main-top-column' id='main-top1' preferred='yes' style='float:left;'/>
</div>

<div id='main-top2' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='main-top-column' id='main-top2' preferred='yes' style='float:left;'/>
</div>
<div style='clear:both;'/>
</div>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
</b:section>
</div>

[7] Guardamos los cambios y comprobamos el resultado en la parte de Diseño del panel.

Imagen RSS con efecto "Rollover"

2009-05-12T00:10:00.001+02:00

Alguien que no me ha dicho su nombre , me ha mandado el código por email de este icono RSS con efecto rollover.

Pasa el ratón sobre ella.

En realidad son dos imágenes, una en color y otra en blanco y negro, que usando un sencillo código hace posible el que al pasar el ratón sobre una de ellas se muestre la otra.

Podéis copiar y pegar el código donde queráis mostrar el icono, por ejemplo, en un gadget HTML en la sidebar y tan solo tendréis que colocar la url de vuestro feed donde está señalado.

<a href="url_de_tu_feed" onmouseover="RSS.src='http://2.bp.blogspot.com/_8PJ-pgoBhWQ/SfkFNAJa48I/AAAAAAAAGvs/_0Sbqpyg8z0/s320/RSScLaro.png'" onmouseout="RSS.src='http://1.bp.blogspot.com/_8PJ-pgoBhWQ/SfkFRLoVQXI/AAAAAAAAGv0/MaFCzGhD1Z8/s320/RSSOscuro.png'"><br /><img src="http://1.bp.blogspot.com/_8PJ-pgoBhWQ/SfkFRLoVQXI/AAAAAAAAGv0/MaFCzGhD1Z8/s320/RSSOscuro.png" name="RSS" border="0" /></a>

Y si queréis saber más sobre este curioso efecto y como hacerlo usando vuestras propias imágenes, en Vagabundia tenéis una entrada muy completa al respecto.

Muzicons. Música en tus entradas

2009-05-10T00:35:00.000+02:00

Pocas veces tendremos la oportunidad de usar un servicio online para compartir música tan sencillo como Muzicons.

Ni siquiera necesitaremos registrarnos para obtener el código del original reproductor, claro que si lo hacemos tendremos la ventaja de tenerlo a buen recaudo para volver a usarlo más de una vez.

La página está en inglés aunque es muy fácil de usar casi por pura intuición.
Los resultados de cada paso se van viendo de forma automática a la derecha en "result" y podemos probar como quedará el aspecto del reproductor las veces que queramos antes de copiar el código:

01-Icon Aquí escogemos el icono-carita que se verá en el reproductor.
02-Music Aquí escogemos el tema musical (solo en formato .mp3) desde una url donde tengamos alojado el tema o usando el propio buscador del sitio.
03-Look Aquí el aspecto que tendrá el reproductor, podemos incluso incluir un pequeño texto (máximo 12 caracteres).
04-Background Color del reproductor.

Aquí tenéis un ejemplo que acabo de obtener sin necesidad de registro: