Inicio » Archivos de mayo 2009

Últimos comentarios en Blogger

Fondos de pantalla GRATIS para tu celular

Cambiar tamaño de letra del blog a opción del lector

De acuerdo al contenido del blog es al público al que está dirigido y es posible que este público sean adultos mayores o bien tengan dificultades visuales. Así que una buena herramienta es darles la opción de que sean ellos quienes elijan el tamaño del texto del blog y puedan cambiarlo a su gusto. Para ello vamos a usar dos métodos:

El primero es que el lector escoja el tamaño exacto de la letra. Para lograr esto sólo pegamos este código en un elemento HTML/Javascript:

Tamaño de letra: <a href="javascript:void(0);" onclick="javascript:body.style.fontSize='10px'"><span>10</span></a> <a href="javascript:void(0);" onclick="javascript:body.style.fontSize='12px'"><span>12</span></a> <a href="javascript:void(0);" onclick="javascript:body.style.fontSize='14px'"><span>14</span></a> <a href="javascript:void(0);" onclick="javascript:body.style.fontSize='16px'"><span>16</span></a> <a href="javascript:void(0);" onclick="javascript:body.style.fontSize='18px'"><span>18</span></a>

Las opciones de tamaño de la fuente van desde 10 hasta 18 puntos, puedes agregar las que quieras repitiendo la línea correspondiente.

La segunda opción la vi en Vagabundia y se trata de cambiar el tamaño de la letra con dos botónes, uno para aumentar y otro para disminuir.
Primero hay que ir a Diseño > Edición de HTML y pegar antes de </head> lo siguiente:

<script type='text/javascript'>
var tgs=new Array('div','td');
var szs=new Array('xx-small','x-small','small','medium','large','x-large','xx-large');
var startSz=2;
function ts(trgt,inc) {
if (!document.getElementById) return

var d=document,
cEl=null,sz=startSz,i,j,cTags;
sz += inc;
if (sz < 0) sz=0;
if (sz > 6) sz=6;
startSz=sz;
if ( !(cEl=d.getElementById(trgt))) cEl=d.getElementsByTagName(trgt)[0];
cEl.style.fontSize=szs[sz];
for (i=0 ; i < tgs.length; i++) {
cTags=cEl.getElementsByTagName(tgs[i]);
for (j=0; j < cTags.length ; j++) cTags[j].style.fontSize=szs[sz];
}
}
</script>

Ahora en un elemento HTML/Javascript pega esto:

<a href="javascript:ts('body',1)"><img src="http://dl.getdropbox.com/u/647003/CiudadBlogger/Iconos/%2Bfont.PNG"/></a>
<a href="javascript:ts('body',-1)"><img src="http://dl.getdropbox.com/u/647003/CiudadBlogger/Iconos/-font.png"/></a>

El resultado serán dos íconos con los que se podrá manipular el tamaño de la fuente de texto, puedes ver el ejemplo funcionando de ambos métodos en este blog de pruebas.
Los íconos puedes cambiarlos por los tuyos si así lo deseas, sólo cambia la URL de la imagen, o bien, puedes usar sólo texto, si este es el caso entonces usa esto:

<a href="javascript:ts('body',1)">Aumentar fuente</a>
<a href="javascript:ts('body',-1)">Disminuir fuente</a>

Este truco hará que cambie el tamaño de la letra de todo el blog, si deseas que sólo cambie la letra de las entradas cambia donde dice body por main.

50 cabeceras para tu blog GRATIS

Personaliza la suscripcion de FeedBurner

Si tienes en tu blog una caja de suscripción por mail de FeedBurner o aún si no la tienes puedes obtenerla y personalizarla para hacerla mucho más atractiva y no sólo lograr más tentación para suscribirse al feed, sino hacerla que se adapte al diseño de tu blog.
Por defecto estas cajas de suscripción son así:

Lo que haremos será darle un toque personalizado añadiendo color de fondo, una imagen u otro color de texto.

Primero consigue tu código de esta herramienta en FeedBurner, ingresa a tu cuenta y luego en la pestaña Publicize elige Suscripciones por Email del menú de la izquierda.
Ahora escoge tu idioma y copia el código.

Ese es el código básico, ahora vamos a hacerle unas modificaciones usando como ejemplo el código de mi feed.
Si quieres cambiarle el color de fondo tanto de toda la caja como al área de texto entonces agrega estas líneas:

<form action="http://feedburner.google.com/fb/a/mailverify" style="border:6px solid #ccc;padding:3px;text-align:center; background-color:pink" target="popupwindow" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=CiudadBlogger', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Ingresa tu correo</p><p><input style="width:140px; background-color: #ffffff;" name="email" type="text"/></p><input value="CiudadBlogger" name="uri" type="hidden"/><input value="es_ES" name="loc" type="hidden"/><input style="background-color:grey;" value="¡Suscríbete ya!" type="submit"/><p>Delivered by <a href="http://feedburner.google.com" target="_blank">FeedBurner</a></p></form>

La primera parte en color rojo es la que dará un color de fondo, en este caso rosa, pero puedes cambiarlo por otro color; la segunda parte en rojo es lo que le da el color al botón, en este caso es un gris oscuro.
Se verá así:
Feed Burner

En este ejemplo igual he cambiado el borde, por defecto dice: border:1px yo lo he cambiado por border:6px
También he quitado el letrero que dice: Delivered by FeedBurner, si también quieres quitarlo entonces elimina la parte en color verde.

Igual puedes usar una imágen de fondo y cambiar el color de la letra para que se vea algo así:
Feed Burner

<form action="http://feedburner.google.com/fb/a/mailverify" style="border:6px solid #ccc;padding:3px;text-align:center; background: url('http://dl.getdropbox.com/u/647003/bg-colors.JPG');" target="popupwindow" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=CiudadBlogger', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p><span style="color: rgb(255, 255, 255); font-weight: bold;">Ingresa tu correo</span></p><p><input style="width:140px; background-color: rgb(238, 194, 178)" name="email" type="text"/></p><input value="CiudadBlogger" name="uri" type="hidden"/><input value="es_ES" name="loc" type="hidden"/><input style="background-color:yellow;" value="¡Suscríbete ya!" type="submit"/></form>

En este caso la primera parte en color rojo es la que agrega la imagen, tú puedes usar la imagen que quieras, sólo cambia la URL por otra.
La segunda parte en rojo le dará un color rosa a la caja de texto; y la última parte es el color del botón, en este caso amarillo.
Y por último la parte en azul es la que cambia el color del texto, yo he puesto en estilo negrita y color blanco para que resalte de la imagen. En cualquiera de los casos puedes modificar los colores por los que gustes.
Incluso puedes cambiar el "Ingresa tu correo" y el "Suscríbete" por lo que tú quieras.

Recuerda que este código es un extracto del mío, así que no lo copies tal como está, consigue el tuyo como expliqué en los primeros dos pasos y luego agrega las líneas de cambios que creas necesarios, de lo contrario tus lectores se suscribirían a mi feed...lo cual no me molestaría.

Optimizar los títulos de las entradas del blog

Opción de imprimir sólo la entrada

Paginas estaticas y Ocultar entradas

AVISO
Este método es obsoleto, ya que desde el 2010 Blogger permite la creación de páginas independientes que no aparecen en la portada del blog.

Pregunta Tavo cómo crear un menú en Blogger pero que los contenidos de dicho menú no sean visibles hasta que demos click en ellos; algo así como una página web común.

Crear páginas estáticas

Primero hay que crear el contenido de dicho menú, por ejemplo una entrada que se llame "Acerca de nosotros", "Quiénes somos", "Sucursales", etc. A todas estas entradas que serán las páginas estáticas deberás guardarlas con una etiqueta única, por ejemplo "menu".
Ahora ve a Diseño > Elementos de la página > Añadir un gadget y selecciona Lista de enlaces. A este gadget puedes titularlo "Menú Principal", luego le agregas los links de las entradas que creaste, por ejemplo:
http://nombre-de-mi-blog.blogspot.com/2009/05/Acerca-de-nosotros.html
y así sucecivamente con todas las entradas que deseas sean parte del menú.

Ocultar entradas

De este modo habrás creado páginas estáticas en tu blog, pero ahora hay un "problema", que esas páginas estáticas aparecen al inicio del blog o sea en la portada, y si bien podemos cambiar el orden de las entradas, también se pueden esconder las entradas que no quieres que aparezcan hasta que el lector les dé click, en este caso las páginas estáticas del menú.
Recuerda que todas las entradas que se van a ocultar debiste haberlas guardado con la misma etiqueta, por ejemplo "menu", pues todas las entradas que tengan esta etiqueta estarán ocultas después de hacer este truco.

Entra a Diseño > Edición de HTML y con la casilla marcada Expandir artilugios busca el siguiente código y añade las partes que están en color rojo:

<b:includable id='main' var='top'>

<div class='blog-posts'>
<b:include data='top' name='status-message'/>
<b:loop values='data:posts' var='post'>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name != "menu"'>
<h2 class='date-header'><data:post.dateHeader/></h2>
<b:include data='post' name='post'/>
</b:if>
</b:loop>
<b:else/>

<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
</b:if>

</b:if>
</b:loop>
</div>

<b:include name='nextprev'/>

<b:include name='feedLinks'/>
</b:includable>

De este modo habrás creado un menú con páginas estáticas y dichas páginas no aparecerán junto con todas las demás entradas.
En las partes de color rojo que se han agregado yo he puesto de ejemplo la etiqueta menu pero tú debes remplazarlo por el título de la etiqueta que le has asignado a tus páginas estáticas.

NOTA : Este método sólo funcionará si las entradas tienen sólo una etiqueta, de lo contrario las entradas se repetirán.
Para localizar mejor los códigos, el primer código en rojo debe ir justo después de:
<b:loop values='data:posts' var='post'>
Y el último debe ir justo antes del siguiente </b:loop> que encuentres.

Imagen en el formulario de comentarios

Social Bar con Friend Connect

Iconos Twitter

Libera espacio de tu cuenta de Picasa

Algunos lo saben, otros no, pero no es un misterio. Todas las fotos que publicas en blogspot se suben a la red de Picasa.
Así es, todos los que tenemos al menos un blog en Blogger automáticamente tenemos una cuenta en Picasa.

Si bien este servicio de alojamiento de fotos nos regala ~~1GB~~ 5 GB y parece más que suficiente el espacio, el problema viene cuando tenemos muchos blogs ¿por qué?
Bueno, al abrir una cuenta en Blogger se habilita la cuenta de Picasa y todas las fotos que subas al blog se van almacenando en Picasa, pero incluso si abres tres o más blogs con la misma cuenta, todas las fotos de todos esos blogs se irán a la misma cuenta de Picasa, o sea que no es ~~1GB~~ 5 GB por blog, sino por cuenta.

No sé si a ustedes les suceda, pero yo cuando estoy armando el post empiezo a subir imágenes que cuando las publico ya no me gusta cómo se ven, así que las edito y las subo de nuevo hasta que quede como me gusta. Pues bien, aunque haya subido tres veces la misma foto en el blog, en Picasa aparecen tres fotos con nombres distintos, o sea que sólo estoy usando una y las otras dos me están ocupando espacio de forma inútil.
Entonces para liberar espacio en la cuenta hay que eliminar esas fotos que nos roban capacidad de almacenamiento.
Primero ve a Picasaweb e ingresa con el mismo nombre de usuario y contraseña que usas para entrar en Blogger.
Verás que hay un álbum por blog además de un álbum que se llama Imágenes de Blogger, esa carpeta contiene las fotos que subes en tu perfil.
Sin entrar a ningún álbum desplázate hasta abajo de la página y verás ahí cuánto espacio has ocupado en tu cuenta.
Espacio en Picasaweb

Ahora que ya sabes cuánto espacio le queda a tu blog entra a tus álbumes y elimina las fotos que nunca hayas publicado, o bien a las que pertenezcan a un post que ya hayas eliminado.
De este modo habrás liberado espacio en tu cuenta y estarás listo(a) para poder seguir publicando sin temor a que tu cuenta se llene.

IMPORTANTE: Antes de eliminar cualquier foto asegúrate que sea la imagen que quieres borrar para que no cometas un error y elimines fotos que estén publicadas en tu blog.
Las fotos pueden tardar hasta 24 horas para eliminarse.

Insertar tablas en Blogger

Trucos de Adsense

Después de platicar con mi amigo Cyberbloggero acerca de cómo ~~estafar~~ mejorar Adsense me vi obligado a investigar y leer sobre el tema para entender mejor por qué algunos ganan más que otros con este sistema de anuncios publicitarios.
Si bien el tema es extenso también es aplicable de distinta forma para cada caso, sin embargo hay aspectos generales que a todo mundo le sirven. Así que si tienes un blog y te preguntas por qué nadie hace click en tus anuncios deberías probar con estos trucos de Adsense haciendo estas sencillas modificaciones:

El tamaño sí importa

Un gran error al momento de escoger el tamaño de los anuncios es elegir el rectángulo de 468 x 60, la gente ya ubica visualmente este tamaño como un anuncio y huye de él. El tamaño que ha probado que genera más clicks es el de 336 x 280 y 300 x 250 respectivamente.

Elimina los bordes

Como mencionaba arriba, la gente huye de los anuncios, ellos entran a tu blog para leer el contenido no para ver publicidad, así que si eliminas los bordes estás eliminando el diseño de anuncio y hace que parezca que es parte del contenido.

Cambia el color de las letras

Ya quedó claro que Adsense debe camuflajearse con el contenido, así que para hacerlo parte del mismo, cambia el color de la descripción del anuncio y de las URL al mismo color que usas en el texto del blog. De igual modo procura que el tipo de fuente del anuncio sea el mismo que usas en tus entradas. Hacer estos cambios puede aumentar en un 25% el número de clicks.

El azul no ha pasado de moda

¿Qué piensas si vas en la carretera y ves un letrero rojo? ¿en STOP?
¿Y qué piensas si ves un texto en color azul? !en darle click!
Esto se llama asociación y funciona perfecto en mercadotecnia. Es por ello que el color de los links de los anuncios se recomiendan en color azul (#0000FF) o bien, usar el mismo color que usas para los títulos de los post.

Cuida el color del fondo

Si los anuncios los tienes dentro de los post lo ideal es que el fondo del anuncio sea igual al color de fondo que usas en los post. Por lo contrario si tus anuncios están fuera del post trata de usar un color de fondo que armonice con el resto del blog, usa colores contrastantes pero sutiles que puedan llamar la atención del visitante.

El mejor lugar para los anuncios

Google ha publicado hace algún tiempo las "zonas calientes" de una web, a lo que supone que son las zonas que más ve el lector y por lo mismo donde mejor estarían ubicados los anuncios.

Heat map

Zonas calientes para una web tradicional

Zonas calientes para blogs

Los colores más fuertes representan los lugares donde mejor quedan los anuncios. Sin embargo no todas páginas tienen estas plantillas así que puedes descubrir tú mismo hacia dónde ven más tus visitantes haciendo tus propias pruebas.

Como dije anteriormente, la gente no entra a los blogs buscando darle click a los anuncios, entra buscando información y entretenimiento así que si logras publicar contenido de calidad tendrás más visitas y por ende mayor posibilidad de clicks en los anuncios. Probar no cuesta nada, así que si tus ganancias de Adsense no están resultando lo que ~~quisieras~~ deberias ganar, entonces intenta con estos sencillos trucos que a muchos les ha funcionado y empieza a ganar dinero en internet.

Agregar Meta Tags en Blogger

Los meta-tags son etiquetas dentro de una web que contienen información útil para los robots y que sólo es visible para ellos. Estas etiquetas HTML permiten la correcta indexación de nuestro sitio en los motores de búsqueda.
En ellos hay información tales como el título del blog, las palabras clave, el autor, el idioma, la descripción, etc.
Agregar los meta-tags en Blogger es sencillo y no requiere conocimientos avanzados, sólo debemos elegir cuáles meta-tags vamos a usar. Aquí les dejo algunos que yo uso y su descripción:

<meta content='Título del blog' name='Title'/>
<meta content='palabraclave1, palabraclave2, palabraclave3' name='keywords'/>
<meta content='Tema del blog' name='Subject'/>
<meta content='Descripción del blog' name='description'/>
<meta content='El autor' name='author'/>
<meta content='es' name='language'/>
<meta content='3 days' name='Revisit-After'/>
<meta content='all' name='robots'/>
<meta content='all, index, follow' name='robots'/>
<meta content='all' name='googlebot'/>
<meta content='all, index, follow' name='googlebot'/>
<meta content='all' name='yahoo-slurp'/>
<meta content='all, index, follow' name='yahoo-slurp'/>
<meta content='index, follow' name='msnbot'/>
<meta content='all' name='googlebot-image'/>

Title es el título del blog
Keywords contiene las palabras clave con las que te quieres posicionar.
Subject es sobre qué se trata el blog, o sea el tema.
Description es la descripción del sitio.
Author es el nombre del autor, o sea tu nombre.
Language es el idioma del blog, en este caso es es español.
Revisit-After es el tiempo que se sugiere que tarden en regresar los robots a tu web.
Y los demás son órdenes para los robots de Google, MSN, Yahoo y Google Images permitiéndoles que indexen todo el contenido.

Estos Meta-Tagas se ponen justo después de la etiqueta <head> sólo cambia los datos en color verde por los tuyos y listo. Ahora los robots tendrán una mejor información de tu blog y les será más fácil rastrearte.

Solucion a naked domains

Iconos RSS divertidos

Abrir videos en ventana emergente (Popup)

Gana un dominio GRATIS

Bromas para tus lectores

Si te gustan las bromas y quieres hacerle pasar un susto a tus lectores estos códigos te van a gustar.
El primero es para bloquear el teclado del usuario, consiste en pegar este código en un elemento HTML/Javascript y cuando el usuario esté en tu blog y quiera usar el teclado aparecerá un mensaje de alerta diciendo que el teclado está bloqueado.

<script language="JavaScript">function tecla(){alert('TECLADO BLOQUEADO')}; document.onkeydown=tecla;</script>

El siguiente es menos odioso pero le sacará un susto a más de uno. Se trata de un botón que dice "No tocar", y cuando el usuario lo toque por curiosidad verá que la ¡ventana del navegador tiembla!. Este código igual lo pegas en un elemento HTML/Javascript. Puedes cambiar el ¡ NO TOCAR ! por lo que quieras.

<script language="JavaScript">

</script>


<script language="JavaScript">

</script>
<script language="JavaScript1.2">

</script>
<input value="¡ NO TOCAR !" onclick="shak(2)" type="button"/>

Puedes ver un ejemplo aquí, haciendo click en el botón ¡ NO TOCAR !.

Protege tu blog

Me he encontrado en muchos foros con bloggers que por una o por otra han perdido datos de su blog o hasta su blog mismo y esto les ha causado obviamente un gran problema. Para evitar perder toda tu información del blog sigue estas recomendaciones:

Haz una copia de tu plantilla

Antes de hacer cualquier cambio que implique editar el código HTML debes hacer un respaldo de la plantilla por si las cosas no salieran como quisieras entonces puedas regresar a la plantilla anterior. Puedes ver aquí cómo hacer un respaldo de la plantilla.

Guarda tus códigos de HTML/Javascript

Es importante que sepas que los respaldos de las plantillas no respetan los códigos HTML/Javascript que tengas en los elementos de la página. Es decir, tu plantilla guardará la forma en que se acomodan todos los elementos pero no el contenido de ellos, así que si en uno tenías el código de un video (por ejemplo) el código se perderá. Por eso siempre guarda en WordPad todos tus códigos, nunca está de más tenerlos respaldados.

Haz una copia de tu blog

Lamentablemente ha habido algunos casos donde usuarios han perdido sus blogs, ya sea por hack, porque Blogger los eliminó o simplemente eliminaron todas las entradas "sin darse cuenta". Para poder restablecer tu blog por si esto te pasara haz una copia del mismo cada mes para que tus entradas y comentarios nunca se pierdan. Para hacer esta copia ve a Configuración > Básico > Exportar blog. Cuando quieras recuperarlo entonces da click en Importar blog. Con esto tendrás todas tus entradas y comentarios intactos.

Sube tú mismo tus scripts

Es común que cuando agregamos una nueva función al blog copiamos el código tal como lo vimos en algún lado, y estos códigos quizá tengan alguna URL donde están alojados los scripts que hacen que la función nueva trabaje. ¿Pero qué pasa si el autor de ese script elimina el archivo del servidor? pues nada, pasará que todas las funciones que dependían de ese script dejarán de funcionar. Para evitar esto siempre descarga los scripts a tu equipo y súbelos a tu propio hosting, de este modo si el autor del script elimina el archivo, tu blog seguirá trabajando como si nada.
Lo primero es buscar en el código la URL del script, luego hay que copiarla y pegarla en la barra de direcciones del navegador. Si te aparece una ventana que dice Guardar archivo entonces sólo lo guardas y lo subes a la red; si en vez de eso te aparece una página con un código entonces copia el código completo y pégalo en WordPad, este lo guardarás añadiendo la extensión .js al final. Cuando termines sube el archivo a tu servidor.

Ten una carpeta de tus archivos

Aunque las fotos o videos que subimos al blog se quedan alojados en el servidor de Blogger siempre es bueno que tengas en el equipo una carpeta con TODOS los archivos que usas para el blog, ya sean fotos, mp3, videos, códigos, plantillas, notas, etc. Si algún día no puedes acceder a tus archivos que subiste en Blogger no habrá problema teniendo el respaldo de todos ellos a la mano.

Pónle nombre a tus códigos

Generalmente cuando vemos un truco nuevo queremos usarlo en el blog, y así vamos añadiendo y llenando el blog de códigos tras códigos. El problema está cuando queremos eliminar uno que ya no nos guste y no sabemos cuál es y borramos otro por error. Para prevenirlo siempre escribe arriba del código la función de éste. Si el código está después de ]]></b:skin> puedes hacerlo poniendo lo siguiente arriba de cada código en tu plantilla: