Agregar mensaje de alerta sencillo

Si quieren poner un mensaje de bienvenida en su blog o un mensaje de advertencia como el que se ve en el ejemplo entonces hacemos lo siguiente:

Vamos a Diseño > Edición de HTML y pegamos antes de </body> lo siguiente:

<script language='JavaScript'>
alert("Aquí escriben su texto");
</script>

Para muchos este mensaje de alerta puede resultarles muy engorroso, así que les recomiendo que sólo lo usen si es necesario. Saludos.

Cambiar orden de entradas

Nos dice Karina Morales de Monterrey México lo siguiente:

"...recuerdo que hace tiempo en Blogger estaba la opción de cambiar el orden de los post de más antiguos a más nuevos pero ya no lo veo ¿puedes ayudarme? Gracias..."

Qué bueno que lo mencionas Karina, porque yo creí que había alucinado pues también recuerdo haber visto esa opción hace tiempo. Pero bueno, primero dejemos en claro que los post (o entradas) se ordenan automáticamente de los más nuevos a los más antiguos. Así que lo que podemos hacer para cambiar este orden en los post es editando la fecha de las entradas de modo que le pongamos la fecha que deseamos para poder así ordenarlas a nuestro gusto.
Para ello vamos a Creación de entradas, Editar entradas, seleccionamos la entrada que vamos a editar y en la parte inferior izquierda damos click en Opciones de entrada; ahí cambiamos la fecha y la hora del post.

Hacemos esto con todas las entradas a las que deseamos cambiar el orden y listo. Espero que les haya ayudado. Saludos Karina.

Recibe donaciones económicas

Aunque Google Checkout ya tiene un par de años no ha tenído mucho renombre en el ámbito web. En palabras breves Google Checkout es una modalidad para comprar en internet através de un tercero, o sea Google. Esto es, simplificar y reunir todas sus compras de internet en sólo una cuenta para evitar estar dando nuestra tarjeta de crédito por todos lados y evitar transacciones fraudulentas.

Pero Google Checkout no se quedó ahí y lanzó Google Checkout for Non-Profits, de modo que asociaciones no lucrativas pueden usar este servicio para recolectar donaciones libres de impuestos* en todo el mundo. Y afiliarse es de lo más sencillo. Sólo deben crear una cuenta en Google Checkout e identificarse como una asociación no lucrativa, copiar el código HTML para su blog y empezar a recibir donaciones (claro, si alguien desea hacerlo).

Así que si tu blog pertenece a una asociación no lucrativa regístrate ya y empieza a atraer más donantes. Para abrir tu cuenta haz click aquí.

* Donaciones libres de impuestos hasta el 2010

Expandir post

Hace unos días estuve leyendo acerca de cómo poner la opción de leer más en un blog, y bueno, hice como veinte cambios y simplemente no quedaba. Luego me fijé que aunque se mostraba la opción, había posts que estaban tan cortos que no era necesario tener esa utilidad; hasta que me topé con un artículo de Deathly en el que nos daba una alternativa, expandir post. Esta me pareció perfecta, pues además de que me quedó a la primera resuelve el problema de que eliges en cada post si quieres que aparezca expandir el post o no.

Para hacerlo vamos a Diseño > Edición de HTML y marcamos Expandir artilugios. Pegamos el siguiente código antes de la etiqueta </head>

<script src='http://dl.getdropbox.com/u/647003/CiudadBlogger/Scripts/functiontoggleIt.js' type='text/javascript'></script>

Ahora buscamos este código:

<b:includable id='post' var='post'>
<div class='post uncustomized-post-template'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>
<div class='post-header-line-1'/>
<div class='post-body'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Y lo remplazamos por este:

<b:includable id='post' var='post'>
<div class='post uncustomized-post-template' expr:id='"post-" + data:post.id'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>
<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a href='javascript:void(0);' expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"'>Seguir leyendo [+]</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a href='javascript:void(0);' expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"'>Minimizar [-]</a></p>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Cuando quieras que esta opción aparezca en un post sólo escribimos lo que quieras que aparezca, y antes del texto que quieres que se oculte escribimos esta etiqueta

<span id="fullpost">y al final de su texto terminan con la etiqueta</span>

Ver ejemplo aquí

Solución del error bX-bliced

Roberto Jara de Chile escribió preguntando sobre el error bX-bliced de Blogger, y recordé cómo este error me dio dolores de cabeza hace un par de meses. Esta es la solución que leí (no recuerdo dónde) y que me funcionó a la perfección. Por cierto, esta solución la he aplicado igual para el error bX-si9ejx, error bX-928o1o y error bX-39cc9q.

1. Primero deben abir con WordPad la plantilla (.xml) que no pueden subir.
2. Ahora busquen con Ctrl + B los elementos b:widget y cambien el número de su id. Por ejemplo b:widget id='Header1' debe quedar como b:widget id="'Header2'
3. Y así con todos los widgets que encuentren, si ya existe uno que tenga el número 2 entonces lo cambian por el 3 y así sucesivamente.
4. Cuando terminen de cambiar los id de los widgets guardan el archivo con Ctrl + G
5. Ahora van de nuevo a Blogger y cargen la plantilla como de costumbre.

Esto debe solucionarles este error. Si tienen problemas al guardar el archivo en WordPad pueden seleccionar todo el texto y lo pegan en el código HTML de Blogger sustituyendo el anterior.
Espero y les haya servido. Saludos.

Juegos Google

Aquí les dejo estos juegos que los programadores de Google nos regalan de vez en cuando. Los dos primeros son muy parecidos (sino es que iguales) se mueven con el cursor, generan efectos al hacerles click, y cuando descansan sacan frases en inglés; el tercero ya lo he mencionado en Google divertido, y es referente al conejo de pascua, hay que atrapar los huevos; y este último es un rompecabezas de destreza mental.

Poner un buscador en Blogger

Se preguntarán -¿para qué poner un buscador en mi blog? Bueno, piensen que si tienen muchos post publicados y aunque tengan todo bien etiquetado talvez se les dificulte a sus lectores encontrar alguna información que hayan publicado en el pasado, sobre todo si su blog es informativo y/o educativo.
Así que acá les van tres formas de poner una caja de buscador en su blog. El primero es muy simple, está basado en Javascript y el aspecto es muy sencillo.

Para agragarlo van a Dieño, Elementos de la página, Añadir un gadget, HTML/Javascript. Y pegan este código:

<form id="searchthis" action="/search" style="display:inline;" method="get"><input id="search-box" name="q" type="text"/> <input id="search-btn" value="Buscar" type="submit"/></form>

El resultado será este:

El segundo buscador lo colocaremos através de Blogger in Draft; de nuevo vamos a Diseño, Elementos de la página, Añadir un gadget y elegimos Cuadro de búsqueda. Ahí elegimos las opciones, por si queremos que las búsquedas sean sólo en nuestro blog o en la web. Cabe señalar que los resultados nos los mostrará en el área de los post, al igual como las opciones de búsqueda en el blog o en la web.

Y por último este buscador de Google, que a diferencia del anterior en este aparecen las casillas en el buscador sobre dónde queremos hacer la búsqueda. El código es el siguiente:

<form action="http://www.google.com/search" method="GET">
<input value="UTF-8" name="ie" type="hidden"/>
<input value="UTF-8" name="oe" type="hidden"/>
<table bgcolor="#FFFFFF">
<a href="http://www.google.com/">
<img border="0" alt="Google" src="http://www.google.com/logos/Logo_25wht.gif"/>
</a>
<input maxlength="255" value=""
name="q" size="15" type="text"/> <input value="Buscar" name="btnG" type="submit"/>
<font size="-1">
<input value="URL DEL BLOG"
name="domains" type="hidden"/><br/><input value=""
name="sitesearch" type="radio"/> la Web<input checked value="URL DEL BLOG" name="sitesearch" type="radio"/> NOMBRE DEL BLOG<br/>
</font>
</table></form>

Sólo deben cambiar los datos que están en color rojo por los suyos y el resultado será este:

En la web Ciudad Blogger

Crea imágenes divertidas para tu blog

Aunque no recomiendo saturar nuestro blog de imágenes innecesarias, sí es bueno darle una buena cara de vez en cuando con una imagen divertida. ImageChef nos ofrece una gran variedad de estas imágenes, en ellas podremos poner nuestro nombre en la cintura de una modelo, la marquesina de un teatro o un plato de sopa entre muchas otras categorías.

Además de esto podemos usar imágenes estáticas, imágenes animadas ¡y hasta video! Pero no sólo eso, ahora han lanzado opciones para usar tu foto en photo frames, rompecabezas, etc.
Aquí les dejo unos ejemplos y ojalá que se diviertan haciendo los suyos.

Cómo subir un video en Blogger

Hay dos formas de subir videos a nuestro blog, una de ellas es usando el servidor de Blogger y otra es insertando el código HTML/Javascript del video alojado en otro sitio, explicaré los dos.

Usando el código HTML/Javascript

Primero vamos a donde está el video alojado, por ejemplo YouTube. En el lado derecho del video veremos dos opciones, URL e INSERTAR.

Copiamos el código que está en INSERTAR. Podemos elegir más opciones como poner un marco, cambiar el tamaño del video o poner videos relacionados. Estas opciones adicionales están presionando el ícono azul que está junto al código que vamos a copiar.

Ahora vamos a Diseño->Elementos de la página y Agregar un gadget.



Elegimos HTML/Javascript del menú de Gadgets que nos aparecen




Ahora pegamos el código que copiamos de YouTube ¡y listo!


Usando el servidor de Blogger

En esta modalidad es importante que sepan que el video sólo será mostrado en un post que publiquen.
Lo primero es crear una entrada, para ello vamos a Escritorio->Nueva entrada. Nos aseguramos que estamos en la modalidad de Redactar y veremos una barra de herramientas con opciones de formato de texto, alineación de texto, añadir imagen y añadir video. Elegimos Añadir video.

Ahora examinamos en nuestro equipo la ubicación donde tenemos el video, agregamos un título, aceptamos los Términos y condiciones y presionamos Subir video.


Y eso es todo, el tiempo que tardará en subir el video al servidor de Blogger dependerá del tamaño del video y de la velocidad de Internet que tengan.

NOTA: Si quieren usar un video de YouTube en un post hacen lo mismo que al inicio, copian el código de YouTube (o donde tengan el video) y pegan el código en el post.

Cambiar color de fondo por una imagen

En esta ocasión aprenderemos cómo cambiar el fondo de nuestro blog por una imágen o cambiar la imagen de fondo actual por otra. Para ello ve a Diseño->Edición de HTML y busca este código:

body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: center;
color: $textColor;
background: $bodybgColor;
font-family: arial,verdana,helvetica,tahoma;
font-size: 100%;
width: 100%;
}

Es posible que tu código no se vea exactamente como este, ya que varía según su plantilla, lo importante es que localices el background que está dentro de body {
Ahora lo que hay que hacer es cambiar lo que está en rojo por este código:

background: url(URL de la imagen) no-repeat;
background-attachment : fixed;

Sólo cambia donde dice URL de la imagen por la dirección donde tienes alojada la imagen de fondo que vas a usar. Si quieres que el fondo se mueva cuando bajen la página con el scrollbar entonces omite la última línea del código. Con ese código la imagen no se repetirá, pero si tu imagen es pequeña o un patrón (pattern) entonces elimina lo que está en negrita para que la imagen de fondo se repita.
Te recomiendo que elijas una imagen que no sea tan aparatosa y que los colores no lastimen la vista.

Si sólo quieres cambiar el color de fondo en lugar de una imágen entonces sólo cambia el código de color, por ejemplo: background:#fffff; esto dará un fondo de color blanco.

Ver número de usuarios en línea

¿Quieres saber cuántos lectores en línea hay en tu blog en tiempo real? Pues bueno, Whos amung us nos trae esta herramienta sencilla para nuestro sitio web. Sabremos el número de usuarios en línea, estadísticas como de qué paises nos visitan o cuándo tuvimos más visitantes en línea.

Agregarlo es lo mejor, ya que NO NECESITAS REGISTRARTE, sólo eliges el diseño del gadget, copias el código Javascript y lo pegas en tu blog.
Cuando quieras ver tus estadisticas completas sólo haces click en el gadget que colocaste. Más sencillo imposible ¿no? Así que si quieres que tus lectores vean cuántos bloggers más están leyéndote, esta es tu mejor opción.

Cómo poner un favicon en Blogger

Es normal que muchos no sepan qué es un favicon, pues es relativamente corto el tiempo que ha pasado desde su creación. Bueno, pues un favicon es el ícono de un sitio web que aparece en la barra de direcciones; en la lista de favoritos (o marcadores); en el historial web; y en la pestaña del navegador. O sea en estos lugares:

¿Que para qué sirve? Basicamente para que los usuarios tengan más fácil acceso a los sitios que visita mediante el reconocimiento de íconos, o sea por mejor accesibilidad.

Bueno, ahora vamos a poner el favicon a nuestro sitio.

1. Primero debes tener la imagen que quieres usar como favicon (generalmente el logo de tu página) en formato jpg, bmp, gif o png en medidas de 16 x 16px o 32 x 32px.
2. Ahora hay que convertir esa imagen en formato .ico y para ello puedes hacer uso de cualquier página web que nos dé este servicio, como por ejemplo Dynamic Drive. Puedes usar tu favicon en formatos png o gif pero si quieres que se vea en Internet Explorer entonces deberá estar en formato ico.
Entonces haz click en Examinar y busca la imagen en tu equipo. Luego click en Create Icon y descarga en tu ordenador la imagen en formato .ico
3. Ahora necesitas subir el ícono en un servidor gratuito, aquí puedes elegir el que quieras, siempre y cuando hagas público el archivo.
4. Ya que has subido al servidor el ícono entra en Blogger > Diseño > Edición de HTML y pega después de <head> este código:

<link href='http://URL del favicon/favicon.ico' rel='shortcut icon' type='image/x-icon'/>
<link href='http://URL del favicon/favicon.ico' rel='icon' type='image/x-icon'/>

El código debe ir aquí:

Obviamente tú debes sustituir donde dice URL del favicon/favicon.ico por la dirección donde tienes alojado el ícono. Si deseas que el favicon sea animado entonces lo haces en formato .gif
Algunos dicen que sólo basta poner la primera línea del código, pero yo les recomiendo que usen los dos, ya que algunos exploradores como el Internet Explorer no siempre muestran los favicones.

ACTUALIZACIÓN 1: Si el favicon no se ve entonces pega el código después de la etiqueta: <b:include data='blog' name='all-head-content'/>

ACTUALIZACIÓN 2: En algunas plantillas hay que poner el código antes de la etiqueta <b:skin><![CDATA[/*

Agregar opción de imprimir post

Imprimir artículo

Es posible que el contenido que publiques sea de mucha utilidad para tus lectores, es por ello que ahora agregaremos la opción de imprimir la página para hacerles la vida más fácil a los lectores y darle un toque de profesionalismo al blog.

Para ello pega al inicio o al final del post el siguiente código:

<a href="javascript:print()">Imprimir artículo</a>

Donde dice Imprimir artículo lo puedes cambiar por sólo Imprimir o por lo que quieras.

Si deseas que este código aparezca en todas las entradas automáticamente y no tener que estarlo pegando cada vez que publicas entonces ve a Configuración->Formato->Plantilla de entrada y pega ahí el código. Guardar los cambios y listo.

¿Lo quieres más llamativo? Entonces puedes cambiar el texto por una imagen, para ello usa este código:

<a href='javascript:window.print()'><img border='0' src='URL de la imagen'/></a>

Ahora sólo cambia donde dice URL de la imagen por la dirección donde tienes alojado el ícono que vas a usar.